svelte simple datatables

A toolkit for creating datatable components with Svelte

Presentation

This lib provides an API to dynamically interact with iterable data: filtering, paging, sorting, selecting...

• Headless by design
  
• Typescript support
  
• SSR friendly
• no dependencies

Also provides some demo components, which you can grab and customize in your own project.

🌐 Live examples

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>

🌐 See full documentation

DataHandler methods

getRows(): Readable<any[]>
setRows( data: any[] ): void

sort( orderBy: Function | string ): void
sortAsc( orderBy: Function | string ): void
sortDesc( orderBy: Function | string ): void
getSorted(): Writable<{ identifier?: string; direction?: 'asc' | 'desc'; }>
applySorting( params: {orderBy: Function | string; direction?: 'asc' | 'desc'} = null ): void

filter( value: string, filterBy: Function | string, comparator: Function = null ): void
clearFilters(): void

search( value: string, scope?: string[] ): 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: any): void
getSelected(): Writable<any[]>
selectAll(params: { selectBy?: Function | string, scope?: 'all' | 'currentPage' } = { scope: 'all' }): void
isAllSelected(): Readable<boolean>

getTriggerChange(): Writable<number>