Applying editors to Grid cells

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

Applying in-built inline editors

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} />

Customizing built-in editors

The Grid API allows applying a template and custom Svelte component to the cell editor (except the "text" type editor) via the config object of the editor parameter in the columns property.

Please note that for the "combo" editor the cell component will be applied to dropdown options only while for 'datepicker" to the input field.

The example below shows how to apply a template to the "combo" editor in the Country column and the StatusStub component to the "richselect" editor in the Status column.

A template should be a function that takes an option and returns a string to be displayed (template?:(obj) => string). In our example each option should be of the format id.label (e.g., 1.USA). The cell property in the config object takes the custom component name that should be applied to the editor. In our case, it's the StatusStub component.

<script>
    import { Grid } from "wx-svelte-grid";
    import { getData } from "../data";
    import StatusStub from "../custom/StatusStub.svelte";// import the component

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

    const statuses = [
        {
            id: 1,
            label: "In progress",
            type: "primary",
        },
        {
            id: 2,
            label: "Done",
            type: "success",
        },
        {
            id: 3,
            label: "Not started",
            type: "disabled",
        },
    ];

    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.label}` },
            },
            options: countries,
            width: 180,
        },
        {
            id: "date",
            header: 'Date - "datepicker"',
            width: 180,
            editor: "datepicker",
            template: v => (v ? v.toLocaleDateString() : ""),
        },
        {
            id: "user",
            header: 'User - "richselect"',
            width: 180,
            editor: "richselect",
            options: users,
        },
        {
            id: "status",
            resize: true,
            header: "Status",
            width: 133,
            editor: {
                type: "richselect",
                config: { cell: StatusStub },
            },
            options: statuses,
        },
    ];
</script>

    <Grid {data} {columns} />

StatusStub

<script>
    let { data } = $props();
</script>

<div class="status {data.type}">
    <div class="status-wrapper">
        <div class="dot"></div>
        <span class="name">{data.label}</span>
    </div>
</div>

<style>
    .status {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .status .status-wrapper {
        border-radius: 18px;
        padding: 2px 8px;
        display: flex;
        gap: 4px;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .status .status-wrapper::before {
        position: absolute;
        height: 100%;
        width: 100%;
        content: "";
        border-radius: 18px;
        opacity: 0.15;
    }
    .status .dot {
        height: 6px;
        width: 6px;
        border-radius: 50%;
    }
</style>

Applying custom editors

Grid allows adding custom components to column cells. The rules of embedding custom components are described here: Adding custom content to cells

The example below shows how to customize the Checkbox component and call the update-cell action via the api.exec() method so that the cell is updated directly in Grid.

CheckboxCell

<script>
    import { Checkbox } from "wx-svelte-core";// import the Checkbox component

    let { row, column, api } = $props();// get access to Grid api via `$props`

    function onChange(ev) {
        const { value } = ev;
        api.exec("update-cell", { //call the action
            id: row.id,
            column:column.id,
            value
        });
    }
</script>

 <Checkbox value={row[col.id]} onchange={onChange} />

In the next example we import the component and apply it to the Grid cell:

<script>
    import CheckboxCell from "../custom/CheckboxCell.svelte";
    import { Grid } from "wx-svelte-grid";

    import { getData } from "./common/data";
    const { data } = getData();

    let cell;
    const columns = [
        { id: "id", width: 50 },
        { id: "checked", cell: CheckboxCell, width: 36 },
    ];
</script>

<Grid {data} {columns} />

---

Related articles:

• Adding custom content to cells