Remote Datatables

Installation

npm i -D @vincjo/datatables

Server-side pagination

This part of the lib provides 2 additional functions

onChange: (state: State) => Promise<Row[]>
invalidate: () => void

⚠️ In this case DataHandler and showcase components are located in @vincjo/datatables/remote

→ basic usage

Skeleton components

By @kmalloy24

Sample code

<script lang="ts">
    import { DataHandler, type State, 
             Datatable, Th, ThFilter } from '@vincjo/datatables/remote'
    import { myLoadFunction } from './my-api-helper'

    const handler = new DataHandler([], { rowsPerPage: 10 })
    const rows = handler.getRows()

    handler.onChange( (state: State) => myLoadFunction(state) )

    handler.invalidate()
</script>

<Datatable {handler}>
    <table>
        <thead>
            <tr>
                <Th {handler} orderBy="first_name">First Name</Th>
                <Th {handler} orderBy="last_name">Last Name</Th>
                <Th {handler} orderBy="email">Email</Th>
            </tr>
            <tr>
                <ThFilter {handler} filterBy="first_name"/>
                <ThFilter {handler} filterBy="last_name" />
                <ThFilter {handler} filterBy="email"/>
            </tr>
        </thead>
        <tbody>
            {#each $rows as row}
                <tr>
                    <td>{row.first_name}</td>
                    <td>{row.last_name}</td>
                    <td>{row.email}</td>
                </tr>
            {/each}
        </tbody>
    </table>
</Datatable>

Back to main site

Link to client-side data processing documentation