The Plugin System

Svelte Headless Table is designed with extensibility in mind. Its complex features are powered by an extensive suite of plugins.

addSortBy
addColumnFilters
addTableFilter
addColumnOrder
addHiddenColumns
addPagination
addSubRows
addGroupBy
addExpandedRows
addSelectedRows
addResizedColumns
addGridLayout

Defining plugins

Svelte Headless Table treats each plugin as an extension to its core. Every plugin optionally defines transformations on the rows and columns of the table, and extends the functionality of column definitions, rows, and cells.

For this example, we extend a basic table with addSortBy and addColumnOrder.

const table = createTable(data, {
    sort: addSortBy({ disableMultiSort: true }),
    colOrder: addColumnOrder()
})

const table = createTable(data, {
    sort: addSortBy({ disableMultiSort: true }),
    colOrder: addColumnOrder()
})

Plugins are configurable via function arguments.

`sort` and `colOrder` are just names to identify the plugins – they can be any name you prefer as long as they remain consistent. This lets you add multiple plugins to a table without any naming conflicts.

The order in which you define plugins matters – the order of object keys is predictable and plugins are evaluated from first to last.