svelte checkbox Row Selection all example?

[exqmjmz]

I implemented head and cell output html checkbox

I refer to React Row Selection, but svelte doesn't know what code to implement.

[ollydowning]

Hi @LJM000,

I was struggling with this myself, and have come up with the following solution.

First, create a RowCheckBox.svelte component:

<script lang="ts">
    export let checked, indeterminate, onChange;
</script>

<input class="checkbox" type="checkbox" on:change={onChange} {checked} bind:indeterminate={indeterminate}/>

Next, define your column's as normal, passing in the following items we'll need in the component.

const defaultColumns: ColumnDef<Child>[] = [
    {
        id: 'select',
        header: ({table}) => renderComponent(RowCheckBox, {
            checked: table.getIsAllRowsSelected(),
            indeterminate: table.getIsSomeRowsSelected(),
            onChange: table.getToggleAllRowsSelectedHandler(),
        }),
        cell: (props) => renderComponent(RowCheckBox, {
            checked: props.row.getIsSelected(),
            disabled: !props.row.getCanSelect(),
            indeterminate: props.row.getIsSomeSelected(),
            onChange: props.row.getToggleSelectedHandler(),
        })

    },
    // Rest of Columns
]

Before we create our table, we need to handle ticking a checkbox by defining a state object and a function to handle updates. This is indirectly passed along to the component, through TanStack via on:change={onChange}.

let selection: RowSelectionState = {};

const onSelect = (updater: any) => {
    if (updater instanceof Function) {
        selection = updater(selection);
    } else {
        selection = updater;
    }

    options.update((old) => ({
        ...old,
        state: {
            ...old.state,
            rowSelection: selection,
        },
    } as TableOptions<Child>));
}

Finally this can all be passed into table options:

const options = writable<TableOptions<Child>>({
    //... other options
    columns: defaultColumns,
    state: {
        //... other state
        rowSelection: selection,
    },
    enableRowSelection: true,
    onRowSelectionChange: onSelect,
    //... other options
})

Let me know how you get on :)

[c-kirkeby]

Any idea how to use the on:change handlers from Svelte as part of the cell definition? Seems odd to have to define an onChange prop to proxy the underlying handler.