addPagination
addPagination paginates the table by page index.
Note:
Subscribe to
TableViewModel#pageRows instead of TableViewModel#rows.<script>
const { headerRows, pageRows } = table.createViewModel(columns)
</script>
<table>
<tbody>
{#each $pageRows as row (row.id)}
...
{/each}
</tbody>
</table><script>
const { headerRows, pageRows } = table.createViewModel(columns)
</script>
<table>
<tbody>
{#each $pageRows as row (row.id)}
...
{/each}
</tbody>
</table>Options
Information:
Options passed into
addPagination.const table = createTable(data, {
page: addPagination({ ... }),
});const table = createTable(data, {
page: addPagination({ ... }),
});initialPageIndex?: number
Default 0.
initialPageSize?: number
Default 10.
serverSide?: boolean
If true, use server-side pagination by updating $data.
serverItemCount: Writable<number>
Total item count when using server-side pagination. Required if serverSide = true.
Column Options
Information:
Options passed into column definitions.
const columns = table.createColumns([
table.column({
header: 'Name',
accessor: 'name',
plugins: {
page: { ... },
},
}),
]);const columns = table.createColumns([
table.column({
header: 'Name',
accessor: 'name',
plugins: {
page: { ... },
},
}),
]);Prop Set
Information:
Extensions to the view model. Subscribe to
.props().{#each $headerRows as headerRow (headerRow.id)}
<Subscribe rowProps={headerRow.props()} let:rowProps>
{rowProps.page}
{#each headerRow.cells as cell (cell.id)}
<Subscribe props={cell.props()} let:props>
{props.page}
</Subscribe>
{/each}
</Subscribe>
{/each}{#each $headerRows as headerRow (headerRow.id)}
<Subscribe rowProps={headerRow.props()} let:rowProps>
{rowProps.page}
{#each headerRow.cells as cell (cell.id)}
<Subscribe props={cell.props()} let:props>
{props.page}
</Subscribe>
{/each}
</Subscribe>
{/each}Plugin State
Information:
State provided by
addPagination.const { headerRows, pageRows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.page;const { headerRows, pageRows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.page;