@feodor-conelabs/datatables
v1.0.1
Published
A toolkit for creating datatable components with Svelte
Downloads
164
Maintainers
Readme
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)