Applying inline editors

The Grid widget provides a predefined number of inline editors that can be applied to a column cell: text, combo, richselect, datepicker.

To apply the inline editor to column cells, set the editor parameter of the columns property to the required value.

Example:

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

    const { allData: data, countries, users } = getData();

    const columns = [
        { id: "id", width: 50 },
        {
            id: "firstName",
            header: 'Name - "text"',
            editor: "text",
            width: 180,
        },
        {
            id: "country",
            header: 'Country - "combo"',
            editor: {
                type: "combo",
                config: { template: (option) => `${option.id}. ${option.name}` },
            },
            options: countries,
            width: 180,
        },
        {
            id: "date",
            header: 'Date - "datepicker"',
            width: 180,
            editor: "datepicker",
            template: (v) => (v ? v.toLocaleDateString() : ""),
        },
        {
            id: "assigned",
            header: 'Users - "richselect"',
            width: 180,
            editor: "richselect",
            options: users,
        },
    ];
</script>

<Grid {data} {columns} />