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>