Datatables

Installation

npm i -D @vincjo/datatables

Summary

This lib provides an API to dynamically interact with iterable data: filtering, paging, sorting, selecting…

Headless by design
Typescript support
SSR friendly
no dependencies

Also provides some demo components, which you can grab and customize in your own project.

Skeleton components

By @kmalloy24

2.0 preview documentation (Svelte 5)

Server-side pagination

Link to documentation for server-side pagination, sort, filters...

Sample code

<script lang="ts">
    import { DataHandler } from '@vincjo/datatables'
    import { someData } from './data'

    const handler = new DataHandler(someData, { rowsPerPage: 50 })
    const rows = handler.getRows()
</script>

<table>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
        {#each $rows as row}
            <tr>
                <td>{row.first_name}</td>
                <td>{row.last_name}</td>
            </tr>
        {/each}
    </tbody>
</table>