Hello world
ID | Name | Email | Comment |
---|---|---|---|
1 | id labore ex et quam laborum | Eliseo@gardner.biz | laudantium enim quasi est quidem magnam voluptate ipsam eos ... |
2 | quo vero reiciendis velit similique earum | Jayne_Kuhic@sydney.com | est natus enim nihil est dolore omnis voluptatem numquam et ... |
3 | odio adipisci rerum aut animi | Nikita@garfield.biz | quia molestiae reprehenderit quasi aspernatur aut expedita o... |
4 | alias odio sit | Lew@alysha.tv | non et atque occaecati deserunt quas accusantium unde odit n... |
5 | vero eaque aliquid doloribus et culpa | Hayden@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>