DataHandler Methods
Get rows
getRows():
Readable<Row[]>
<script lang="ts">
import { DataHandler } from '@vincjo/datatables'
import { someData } from './my-data.json'
const handler = new DataHandler(someData, { rowsPerPage: 50 })
const rows = handler.getRows()
</script>
<ul>
{#each $rows as row}
<li>{row.first_name} {row.last_name}</li>
{/each}
</ul>
Set rows
setRows( data: Row[] ): void
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let data
export let handler: DataHandler
$: data, handler.setRows(data)
</script>
Sort data
sort( orderBy: Field
<Row>
): void
sortAsc( orderBy: Field<Row>
): void
sortDesc( orderBy: Field<Row>
): void
getSort(): Writable<{
identifier?: string, direction?: ‘asc’ | ‘desc’}>
applySort( params?:{
orderBy?: Field<Row>
, direction?: ‘asc’ | ‘desc’}
): void
clearSort(): void
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
const sort = handler.getSort()
</script>
<button type="button"
on:click={() => handler.sort('email')}
class:active={$sort.identifier === 'email'}
class:asc={$sort.direction === 'asc'}
class:desc={$sort.direction === 'desc'}
>
Sort by email
</button>
<button type="button"
on:click={() => handler.sort( row => row.first_name + row.last_name)}
class:active={$sort.identifier === 'row => row.first_name + row.last_name'}
class:asc={$sort.direction === 'asc'}
class:desc={$sort.direction === 'desc'}
>
Sort by first_name + last_name
</button>
Filter data
filter( value: string, filterBy: Field
<Row>
, comparator?: Comparator<Row>
): void
clearFilters(): void
getFilterCount(): void
<script lang="ts">
import { type DataHandler, check } from '@vincjo/datatables'
export let handler: DataHandler
let value1 = ''
let value2 = ''
const clear = () => {
handler.clearFilters()
}
handler.on('clearFilters', () => {
value1 = ''
value2 = ''
})
</script>
<button on:click={clear}>Clear</button>
<input type="text"
bind:value1
on:input={() => handler.filter(value1, 'email', check.endsWith)}
/>
<input type="text"
bind:value2
on:input={() => handler.filter(value2, (row) => row.first_name + row.last_name)}
/>
Search
search( value: string, scope?: Field
<Row>
[] ): void
clearSearch(): void
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
let value = ''
handler.on('clearSearch', () => value = '')
</script>
<input type="text"
bind:value={value}
on:input={() => handler.search(value, ['name', 'email'])}
/>
<button type="button" on:click={() => handler.clearSearch()}>
Clear
</button>
Rows per page
getRowsPerPage(): Writable
<number | null>
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
const rowsPerPage = handler.getRowsPerPage()
</script>
<p>Show {$rowsPerPage} entries</p>
Row count
getRowCount(): Readable
<{
total: number, start: number, end: number}>
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
const rowCount = handler.getRowCount()
</script>
<p>
Showing <b>{$rowCount.start}</b>
to <b>{$rowCount.end}</b>
of <b>{$rowCount.total}</b> entries
</p>
Pagination
getPages( param?:
{
ellipsis: boolean}
): Readable<number[]>
getPageCount(): Readable<number>
getPageNumber(): Readable<number>
setPage( value: number | ‘previous’ | ‘next’ ): void
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
const pageNumber = handler.getPageNumber()
const pageCount = handler.getPageCount()
</script>
<button type="button" on:click={() => handler.setPage(1)}>
First page
</button>
<button type="button" on:click={() => handler.setPage('previous')}>
Previous
</button>
<p>Page {$pageNumber} / {$pageCount}</p>
<button on:click={() => handler.setPage('next')}>
Next
</button>
<button on:click={() => handler.setPage($pageCount)}>
Last page
</button>
Row selection
select( value: Row | Row[keyof Row] ): void
getSelected(): Writable<Row[] | Row[keyof Row][]>
selectAll( params:{
selectBy?: keyof Row, scope?: ‘all’ | ‘currentPage’}
): void
isAllSelected(): Readable<boolean>
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
const rows = handler.getRows()
const selected = handler.getSelected()
const isAllSelected = handler.isAllSelected()
</script>
<input type="checkbox"
on:click={() => handler.selectAll({ selectBy: 'id' })}
checked={$isAllSelected}
/>
{#each $rows as row}
<tr class:active={$selected.includes(row.id)}>
<td>
<input type="checkbox"
on:click={() => handler.select(row.id)}
checked={$selected.includes(row.id)}
/>
</td>
<td>{@html row.first_name}</td>
<td>{@html row.email}</td>
</tr>
{/each}
Event
on( event: ‘change’ | ‘clearFilters’ | ‘clearSearch’, callback:
() => void
): void
<script lang="ts">
import type { DataHandler } from '@vincjo/datatables'
export let handler: DataHandler
let element: HTMLElement
handler.on('change', () => {
element.scrollTop = 0
})
</script>
<ul bind:this={element}>
</ul>