api.exec()
Description
Allows triggering the Grid actionsUsage
api.exec(
action: string,
config: object
): void;
Parameters
action
- (required) an action to be firedconfig
- (required) the config object with parameters (see the action to be fired)
Actions
info
The full list of actions can be found here
Example
The example below shows how to enable autoresizing of columns so that they automatically adjust to content:
<script>
import { Grid } from "@wx/svelte-grid";
import { getData } from "./common/data";
const { data } = getData();
const columns = [
{ id: "id", width: 50 },
{ id: "firstName", header: "First Name" },
{ id: "lastName", header: "Last Name" },
{ id: "email", header: "Email", editor: "text" },
{
id: "companyName",
header: "Company - long column name could be here",
editor: "text",
},
];
let api;
const init = (api) => {
// initialize to get the table with the calculated sizes
api.exec("resize-column", { id: "email", auto: "header" });
api.exec("resize-column", {
id: "companyName",
auto: "header",
maxRows: 20,
});
};
const resizeColumns = () => {
api.exec("resize-column", { id: "email", auto: "header" });
api.exec("resize-column", {
id: "companyName",
auto: "header",
maxRows: 20,
});
};
</script>
<div style="padding: 20px;">
<h4>Email and Company columns adjusted to header.</h4>
<Grid
{data}
{columns}
bind:api
{init}
on:update-cell={resizeColumns} />
</div>
Related articles: