How to add checkboxes to 'Reactivity example with a simple CRUD'

[JLLMNCHR]

Hello. I've spent several days trying to extend the example 'Reactivity example with a simple CRUD' with checkboxes.

Basically, add to each row the typical checkbox:

                     <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            value={row.id}
                            id={row.id} />
                    </td>

The problem is that when changing the page, (and then return to that page) the checked checkboxes are no longer taken into account.

What would be the way to do it?

I have tried several things without success. For example:

bind:checked={$users[row.id]}

Any help is appreciated.

[yayza]

Same, I'm new to svelte and this package is a godsend it's so easy to use and very easy to customize. I wish there was more examples in the docs, but the main one is how do I edit rows since $rows is a Readable store only? I get errors like rows.set is not a function when trying to do something like this:

{#each rows as row, id}
    <div>
        <div>
            <Input placeholder="count" bind:value={row.crv_count} />
            <Input placeholder="size" bind:value={row.crv_size} />
            <Select class="!w-20" bind:value={row.option}>
                <option value="5">oz</option>
                <option value="10">L</option>
                <option value="10">gal</option>
            </Select>
        </div>
        <div>
            <input
                type="text"
                name="count"
                disabled
                value={row.crv_count * row.crv_size * row.crv_option}
            /><Button type="submit" color="green">Add</Button>
        </div>
    </div>
{/each}```

[yayza]

Hello. I've spent several days trying to extend the example 'Reactivity example with a simple CRUD' with checkboxes.

Basically, add to each row the typical checkbox:

                     <td>
                        <input
                            class="form-check-input"
                            type="checkbox"
                            value={row.id}
                            id={row.id} />
                    </td>

The problem is that when changing the page, (and then return to that page) the checked checkboxes are no longer taken into account.

What would be the way to do it?

I have tried several things without success. For example:

bind:checked={$users[row.id]}

Any help is appreciated.

maybe in your case you can bind it to a value in the user's object like bind:checked={$users[row.id]?.selected} i'm not sure if that will work I'm just throwing ideas out there.

EDIT: Forgot to mention, don't forget to use handler.setRows() after you updated your data. It worked for me.

[JLLMNCHR]

Same, I'm new to svelte and this package is a godsend it's so easy to use and very easy to customize. I wish there was more examples in the docs, but the main one is how do I edit rows since $rows is a Readable store only? I get errors like rows.set is not a function when trying to do something like this:

{#each rows as row, id}
    <div>
        <div>
            <Input placeholder="count" bind:value={row.crv_count} />
            <Input placeholder="size" bind:value={row.crv_size} />
            <Select class="!w-20" bind:value={row.option}>
                <option value="5">oz</option>
                <option value="10">L</option>
                <option value="10">gal</option>
            </Select>
        </div>
        <div>
            <input
                type="text"
                name="count"
                disabled
                value={row.crv_count * row.crv_size * row.crv_option}
            /><Button type="submit" color="green">Add</Button>
        </div>
    </div>
{/each}```

Hy, The advice I can give you is to locally clone the following repository: https://github.com/vincjo/datatables When looking at the code of the reactivity example, you will see in store.ts that the update is not done through setRows, but through users 'store', which is writable, in an update method:

export const users = writable([])

export const update = (user: User) => {
    users.update(store => {
        const result = store.find(item => item.id === user.id)
        result.first_name = user.first_name
        result.last_name = user.last_name
        result.email = user.email
        return store
    })
}

[vincjo]

Hi,

Row selection with checkboxes is currently under development. (Built-in but not yet documented) https://vincjo.fr/datatables/row-selection

Selected row ids are stored into an array :

let selected = [1, 5, 15]

To know if a row is selected, a checkbox checked :

<tr class:active={selected.includes(row.id)}>
    <td>
        <input type="checkbox" checked={selected.includes(row.id)} on:click={() => select(row.id)}/>
    </td>
</tr>

To update a selected state :

const select = (id) => {
    if (selected.includes(id)) {
        selected = selected.filter(item => item !== id)
    }
    else {
        selected = [id, ...selected]
    }
}

You can use the built-in row-selection feature, which works on the same principle using a $selected writable store, and handler.select() method. I plan to improve the documentation site over the next few months

[JLLMNCHR]

Thank you very much. With this it works for me:

                           on:change={() => handler.select(row)}
                           checked={$selected.includes(row)}

[vincjo]

Using the full row object works as well 👌

[JLLMNCHR]

Nothing more to add