Skip to main content

add-row

Description

Fires when adding a row

Usage

"add-row": ({
id?: string | number,
before?: string | number,
after?: string | number,
row: {}
}) => boolean|void;

Parameters

The callback of the action takes an object with the following parameters:

  • id - (optional) the ID of a new row
  • before - (optional) the ID of a row before which a new row is added
  • after - (optional) the ID of a row after which a new row is added
  • row - (required) an object with the row data, i.e., column IDs and values

Returning false from the event handler will block adding rows.

Example

The example below shows how to add a new row with data (on a button click) by triggering the add-row action via the api.exec() method:

<script>
import { getData } from "./common/data";
import { Grid } from "@wx/svelte-grid";
import { Button } from "@wx/svelte-core";
const { data, columns } = getData();

let api;

const addRow = () => {
api.exec("add-row", {
row: { id: 21, city: "New City", firstName: "New name", lastName: "new name" },
after: 20,
});
};
</script>

<Button click={addRow} type="primary">Add Row</Button>

<Grid {data} {columns} bind:api />

Related articles: