MIGRATION.md

V2 migration guide

Basically,

• stores are replaced by runes, getters() by properties.
• DataHandler is named TableHandler

Smooth transition from v1 to v2

In order to make the migration process a little easier, v1 is embed in “legacy” namespace so you will have the opportunity to upgrade your components progressively by simply modifying imports.

- @vincjo/datatables
+ @vincjo/datatables/legacy

- @vincjo/datatables/remote
+ @vincjo/datatables/legacy/remote

Old vs new

Svelte 4

import { DataHandler } from '@vincjo/datatables/legacy'

const handler = new DataHandler(data)
const rows = handler.getRows()
const currentPage = handler.getPageNumber()
// $rows, $currentPage

Svelte 5

import { TableHandler } from '@vincjo/datatables'

const table = new TableHandler(data)
// table.rows, table.currentPage

API changes (for consistancy and ease of use)

Filters

const search = table.createSearch()
const filter = table.createFilter('first_name') // column filter

<!-- search -->
<input type="text" bind:value={search.value} oninput={() => search.set()}>

<!-- column filter -->
 <input type="text" bind:value={filter.value} oninput={() => filter.set()}>

Sorting

const sort = table.createSort('first_name')

<button onclick={() => sort.set()} class:active={sort.isActive} type="button">
    first_name
    <span class:active={sort.direction === 'asc'} >↑</span>
    <span class:active={sort.direction === 'desc'}>↓</span>
</button>

Row selection

const table = new TableHandler(data, { selectBy: 'id' })
// selectBy param is mandatory to enable row selection at the TableHandler instanciation level.

<tr class:active={table.selected.includes(row.id)}>
    <td>
        <input type="checkbox" 
            checked={table.selected.includes(row.id)}
            onclick={() => table.select(row.id)}
        >
    </td>
</tr>