inland-turquoise

Row Selection not reactive

Hi again I have tried following the row selection guide (https://tanstack.com/table/v8/docs/guide/row-selection), however I'm not able to get a simple checkbox to correctly work with the indications at the end of the guide. What should be the correct way to get reactive stores (or similar) using the alpha release?

15 Replies

inland-turquoiseOP•14mo ago

This is the basic component I'm using:

<script lang="ts">
    import { Checkbox } from '$lib/components/ui/checkbox';

    type PropTypes = {
        checked: boolean | 'indeterminate';
        onCheckedChange?: (event: unknown) => void
    };

    let { checked = false, onCheckedChange }: PropTypes = $props();

    const checkChange = (value: unknown) => {
        if (onCheckedChange)
            onCheckedChange(value);
    };
</script>

<Checkbox checked={checked} onclick={checkChange} />

<script lang="ts">
    import { Checkbox } from '$lib/components/ui/checkbox';

    type PropTypes = {
        checked: boolean | 'indeterminate';
        onCheckedChange?: (event: unknown) => void
    };

    let { checked = false, onCheckedChange }: PropTypes = $props();

    const checkChange = (value: unknown) => {
        if (onCheckedChange)
            onCheckedChange(value);
    };
</script>

<Checkbox checked={checked} onclick={checkChange} />

And the columns definition (partial) is this:

const columns = [
        {
            id: 'select-col',
            header: ({ table }: { table: Table<Rtu> }) => {
                return renderComponent(TableCheckbox, {
                    checked: table.getIsAllRowsSelected(),
                    onCheckedChange: table.getToggleAllRowsSelectedHandler()
                });
            },
            cell: ({ row }: { row: Row<Rtu> }) => {
                return renderComponent(TableCheckbox, {
                    checked: row.getIsSelected(),
                    onCheckedChange: row.getToggleSelectedHandler()
                })

const columns = [
        {
            id: 'select-col',
            header: ({ table }: { table: Table<Rtu> }) => {
                return renderComponent(TableCheckbox, {
                    checked: table.getIsAllRowsSelected(),
                    onCheckedChange: table.getToggleAllRowsSelectedHandler()
                });
            },
            cell: ({ row }: { row: Row<Rtu> }) => {
                return renderComponent(TableCheckbox, {
                    checked: row.getIsSelected(),
                    onCheckedChange: row.getToggleSelectedHandler()
                })

The selection change works (I've checked by printing manually after the handler has been called) However monitoring the value of checked in the component shows that it never updates Sorry again @Walker, I might have missed if there is any new example showing how selection should work in Svelte. By any chance do you have an example somewhere that I could check out, to avoid having to bother you again? 😔

ratty-blush•14mo ago

hmmmmmmmmm would you get a minimum repro set up on either SvelteLab or Stackblitz?

inland-turquoiseOP•14mo ago

Sure thing

ratty-blush•14mo ago

Also - full disclosure, alpha is very likely to be broken you could always copy the svelte 5 adapter PR that uses table v8 though

inland-turquoiseOP•14mo ago

oh I see

ratty-blush•14mo ago

also also - the docs for alpha (v9) are going to be in flux, and may often not be accurate let me find the PR url for you though

ratty-blush•14mo ago

https://github.com/TanStack/table/pull/5403#issuecomment-2394978923

GitHub

feat: svelte 5 adapter by walker-tx · Pull Request #5403 · TanStack...

Overhauls the Svelte adapter so that it's compatible with Svelte 5. Some overview of the work that was done: All dependencies on svelte/internal are removed. createSvelteTable now returns ...

ratty-blush•14mo ago

This PR was created for v8, even though it was merged into alpha you should be able to copy everything from packages/svelte-table/src and paste it into a folder in your own project then you'll import everything that you need (FlexRender, renderComponent, etc) from index.ts but whatever you decide to do, send me a minimal reproduction of you're issue and i'll do my best.

inland-turquoiseOP•14mo ago

Oh I see, I'll try Ok, I tried in these hours, however using the table-core v8 and the adapter you've suggested from the PR doesn't work unfortunately I'm having issues with the createTable function requiring a TableOptionsResolved object instead of a TableOptions object for some reason 🤔 And, at the same time, stackblitz is refusing to work with svelte 5

inland-turquoiseOP•14mo ago

I have however made an example that produces the same issues @Walker I'm not allowed to upload files here, so I made a gist; they're two files. https://gist.github.com/stefa168/b013e88b0e4e6696fc70d8df9a4cf43a

Gist

RtuListTable.svelte

GitHub Gist: instantly share code, notes, and snippets.

ratty-blush•14mo ago

mmmmmmmk so there's a bug with the FlexRender component 🙃 buuuuuuuuut i'm working on a little repo that should be helpful for you as a reference

inland-turquoiseOP•14mo ago

Wohooooo

ratty-blush•14mo ago

https://github.com/walker-tx/svelte5-tanstack-table-examples

GitHub

GitHub - walker-tx/svelte5-tanstack-table-examples: A reference for...

A reference for using Svelte 5 with TanStack Table v8 - walker-tx/svelte5-tanstack-table-examples

ratty-blush•14mo ago

it's rought, but it should be a helpful reference

Gaming

Programming

Row Selection not reactive

Did you find this page helpful?