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: