Headless (UI-less) datatable component for Svelte.
Main goal for this library is to create fully featured datatable component, but without UI implementation. Component only consists of data and methods common to datatable. I hope, this could speed up develpment of datatable for someone, regardless of its design.
With npm:
$ npm i svelte-headless-datatable
or with yarn:
$ yarn add svelte-headless-datatable
<script>
import createDatatable from 'svelte-headless-datatable'
const data = [
{
'id': '5e837815fcd5249efa8e4d85',
'firstName': 'Castro',
'lastName': 'Hewitt',
'age': 30
},
...
]
const columns = ['ID', 'Name', 'Surname', 'Age']
const datatable = createDatatable(data)
const { items, page, pages } = datatable
</script>
<table>
<thead>
<tr>
{#each columns as column}
<td>{column}</td>
{/each}
</tr>
</thead>
<tbody>
{#each $items as { id, firstName, lastName, age }}
<tr>
<td>{id}</td>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{age}</td>
</tr>
{/each}
</tbody>
</table>
<div>
<button
disabled={!$page}
on:click={() => page.set($page - 1)}
>
Prev
</button>
<button
disabled={$page === $pages - 1}
on:click={() => page.set($page + 1)}
>
Next
</button>
Page {$page + 1} of {$pages}
</div>