Reactivity example with a simple CRUD

This example uses Svelte runes to mimic interactions with a Rest API.

ID	First name	Last name	Email
1	Sallyann	Curnnokk	scurnnokk0@fc2.com
2	Alix	Lavigne	alavigne1@telegraph.co.uk
3	Belia	Gorman	bgorman2@odnoklassniki.ru
4	Wes	Gullyes	wgullyes3@netscape.com
5	Karlyn	Halt	khalt4@upenn.edu
6	Meggi	Younge	myounge5@blogs.com
7	Douglass	Kynd	dkynd6@godaddy.com
8	Jesse	Pattemore	jpattemore7@mozilla.org
9	Etti	Gowrich	egowrich8@google.ca
10	Meaghan	Petrina	mpetrina9@merriam-webster.com

Update rows after invalidation

<script lang="ts">
    import { TableHandler, Row } from '@vincjo/datatables'
    let { data }: { data: Row[] } = $props()

    const table = new TableHandler(data, { rowsPerPage: 20 })

    $effect(() => {
        data
        table.rows = data
    })
</script>

Maintain vertical scroll state after update

<script lang="ts">
    import { TableHandler, Row } from '@vincjo/datatables'
    let { data }: { data: Row[] } = $props()

    let element: HTMLElement | undefined

    const table = new TableHandler(data, { rowsPerPage: 20 })

    $effect(() => {
        data
        update()
    })

    const update = () => {
        if (element) {
            const scrollTop = element.parentNode.scrollTop
            table.rows = data
            setTimeout(() => {
                element.parentNode.scrollTop = scrollTop
            }, 2)
        }
    }
</script>

<Datatable {table}>
    <table bind:this={element}>
        [...]
    </table>
</Datatable>