Reactivity example with a simple CRUD

Auto update rows :

<script lang="ts">
    import { Datahandler } from '@vincjo/datatables'
    export let myData

    const handler = new DataHandler(myData, { rowsPerPage: 20 })

    $: myData, handler.setRows(myData)
</script>

Keeping scroll top state :

<script lang="ts">
    import { Datahandler } from '@vincjo/datatables'
    export let myData

    let tableElement: HTMLElement | undefined

    const handler = new DataHandler(myData, { rowsPerPage: 20 })

    $: myData, update()


    const update = () => {
        if (tableElement) {
            const scrollTop = tableElement.parentNode.scrollTop
            handler.setRows(myData)
            setTimeout(() => {
                tableElement.parentNode.scrollTop = scrollTop
            }, 2)
        }
    }
</script>

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