@mac-barrett/svelte-data-table
v0.1.1
Published
A simple Svelte Component that wraps around the DataTables API
Downloads
6
Maintainers
Readme
Svelte DataTable Component
About:
Svelte component that wraps around the DataTable api. See datatables.net
Getting Started:
Install:
npm i @mac-barrett/svelte-data-table
Import:
import { SvelteDataTable } from '@mac-barrett/svelte-data-table'
Svelte wrapper component for the DataTables.net npm package. See the DataTables.net documentation for more information about the API
Usage:
<SvelteDataTable bind:this={myDataTable}
config={{
paging: false,
autoWidth: false
}}
>
<thead slot="thead">
<tr>
{#each headers as header}
<td>{header}</td>
{/each}
</tr>
</thead>
<tbody slot="tbody">
{#each rows as row}
<tr>
{#each row as col}
<td>{col}</td>
{/each}
</tr>
{/each}
</tbody>
</SvelteDataTable>
Properties:
Data tables config object. Used to set datatables properties. See DataTables.net for more information.
export let config: Config | undefined
Filter callback function. The DataTables API will automatically use this to determine which rows show up in your table.
export var filterCallback: (settings: any, data: string[], row: number, rawInput: any[], searchCounter: number) => boolean
Methods:
Can be called to return the instance of the DataTablesAPI for the table. See the DataTables.net documentation for more information about the API
export const getAPI = () => { return dataTableAPI; }
Call this to reinitialize the datatables API so that it will use new data that has been inserted into the table.
export const reinitializeAPI = async (newDataCallback: (() => Promise<any>) | undefined = undefined) => {
await tick();
if (tableElement !== undefined) {
dataTableAPI?.destroy();
if (newDataCallback !== undefined) {
await newDataCallback();
}
await tick();
dataTableAPI = new DataTables('#table', config);
}
else console.error('DataTable Element is undefined.')
}