Applying complex editors

To apply a complex editor to a cell, you need to add a custom component/template to a cell:

1. Import it to the page
2. Add its name as the value of the cell parameter of the columns property
3. Bind it to the Grid

Example:

<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}
bind:CheckboxCell={cell} />

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