Hello world

ID
Name
Email
Comment
1id labore ex et quam laborumEliseo@gardner.biz

laudantium enim quasi est quidem magnam voluptate ipsam eos ...

2quo vero reiciendis velit similique earumJayne_Kuhic@sydney.com

est natus enim nihil est dolore omnis voluptatem numquam et ...

3odio adipisci rerum aut animiNikita@garfield.biz

quia molestiae reprehenderit quasi aspernatur aut expedita o...

4alias odio sitLew@alysha.tv

non et atque occaecati deserunt quas accusantium unde odit n...

5vero eaque aliquid doloribus et culpaHayden@althea.biz

harum non quasi et ratione tempore iure ex voluptates in rat...

Code

import { TableHandler, type State } from '@vincjo/datatables/server'

const table = new TableHandler([], { rowsPerPage: 5, totalRows: 500 })

table.load((state: State) => {
    const { currentPage, rowsPerPage, sort } = state
    let params = `_page=${currentPage}`
    if (rowsPerPage)    params += `&_limit=${rowsPerPage}`
    if (sort)           params += `&_sort=${sort.field}&_order=${sort.direction}`
    const response = await fetch(`https://jsonplaceholder.typicode.com/comments?${params}`)
    return response.json()
})

table.invalidate()

Markup

<script lang="ts">
    import {
        type TableHandler,
        Datatable,
        RowsPerPage,
        ThSort,
        RowCount,
        Pagination
    } from '@vincjo/datatables/server'
    let { table }: { table: TableHandler } = $props()
</script>

<Datatable {table}>
    {#snippet header()}
        <div></div>
        <RowsPerPage {table}/>
    {/snippet}
    <table>
        <thead>
            <tr>
                <ThSort {table} field="id">ID</ThSort>
                <ThSort {table} field="name">Name</ThSort>
                <ThSort {table} field="email">Email</ThSort>
                <ThSort {table} field="body">Comment</ThSort>
            </tr>
        </thead>
        <tbody>
            {#each table.rows as row}
                <tr>
                    <td>{row.id}</td>
                    <td><b>{row.name}</b></td>
                    <td>{row.email}</td>
                    <td><p>{row.body.substring(0, 60) + '...'}</p></td>
                </tr>
            {/each}
        </tbody>
    </table>
    {#snippet footer()}
        <RowCount {table}/>
        <Pagination {table}/>
    {/snippet}
</Datatable>