@vincjo/datatables v1.14.5
Presentation
This lib provides an API to dynamically interact with iterable data on the client-side: filtering, paging, sorting, selecting...
- Headless by design
- Typescript support
- SSR friendly
- no dependencies
Also provides some showcase components, which you can grab and customize in your own project.
:globe_with_meridians: Live examples
:satellite: Server-side data processing
Support for server-side pagination, sort, filters is located in @vincjo/datatables/remote
namespace.
Install
npm i -D @vincjo/datatables
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>
:globe_with_meridians: See full documentation
DataHandler methods
getRows(): Readable<Row[]>
setRows( data: Row[] ): void
sort( orderBy: Field<Row> ): void
sortAsc( orderBy: Field<Row> ): void
sortDesc( orderBy: Field<Row> ): void
getSort(): Writable<(Sort<Row>)>
applySort( params: { orderBy?: Field<Row>, direction?: 'asc' | 'desc'} = null ): void
defineSort( params: { orderBy?: Field<Row>, direction?: 'asc' | 'desc'} = null ): void
clearSort(): void
filter( value: string, filterBy: Field<Row>, comparator: Comparator<Row> ): void
clearFilters(): void
getFilterCount(): Readable<number>
search( value: string, scope?: Field<Row>[] ): void
clearSearch(): void
getRowsPerPage(): Writable<number | null>
getRowCount(): Readable<{ total: number; start: number; end: number; }>
getPages( param: { ellipsis: boolean } ): Readable<number[]>
getPageCount(): Readable<number>
getPageNumber(): Readable<number>
setPage( value: number | ‘previous’ | ‘next’ ): void
select(value: Row[] | (Row[keyof Row])[]): void
getSelected(): Writable<Row[] | (Row[keyof Row])[]>
selectAll(params: { selectBy?: keyof Row, scope?: 'all' | 'currentPage' } = { scope: 'all' }): void
isAllSelected(): Readable<boolean>
on(event: 'change' | 'clearFilters' | 'clearSearch', callback: () => void)
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
8 months ago
11 months ago
8 months ago
11 months ago
8 months ago
9 months ago
7 months ago
11 months ago
6 months ago
10 months ago
6 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago