Embedding a custom component to a cell

To apply a custom component to a cell:

• Customize/create the required component
• Import the component

The example below shows how to update the Checkbox component by calling the update-cell event via the api.exec() method:

<script>
    import { Checkbox } from "wx-svelte-core";
    import { Cell } from "wx-svelte-grid";

    let { row, col, columnStyle, cellStyle, onaction, api } = $props();

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

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

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

<script>
    import { CheckboxCell } from "./stubs/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} />

info

If you are interested to know how to apply custom styles to a cell, see the Styling section.

---

Related articles: How to access Grid API