Skip to main content

editor

Description​

Fires when changing a value in the table via the inline editing

Usage​

"editor": ({
    value: any
}) => boolean|void;

Parameters​

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

  • value - (required) a new value

Returning false from the event handler will prevent changing a value via the inline editor.

Example​

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

    const columns = [
        { id: "id", width: 50 },
        { id: "city", header: "City", editor: "text", width: 160 },
        {
            id: "email",
            header: "Email",
            editor: "text",
            width: 250,
            css: "center",
        },
    ];

    let api;

    $: if (api) {
        api.on("editor", (ev) => {
            console.log("A new value:", ev.value);
        });
    }
</script>

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

Related articles: