Skip to main content

api.exec()

Description​

Allows triggering the Grid actions

Usage​

api.exec(
    action: string,
    config: object
): void;

Parameters​

  • action - (required) an action to be fired
  • config - (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: