addPagination

addPagination paginates the table by page index.

<script>
  const vm = table.createViewModel(columns)
</script>

<table>
  <tbody>
    {#each vm.current.pageRows as row (row.id)}
      ...
    {/each}
  </tbody>
</table>

<script>
  const vm = table.createViewModel(columns)
</script>

<table>
  <tbody>
    {#each vm.current.pageRows as row (row.id)}
      ...
    {/each}
  </tbody>
</table>

Options

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 the table’s data.

serverItemCount: number | (() => number) | ReadonlyBox<number>

Total item count when using server-side pagination. Required if serverSide = true. Pass a getter to make it reactive:

let total = $state(0)
const table = createTable(() => items, {
  page: addPagination({ serverSide: true, serverItemCount: () => total }),
})

let total = $state(0)
const table = createTable(() => items, {
  page: addPagination({ serverSide: true, serverItemCount: () => total }),
})

A Svelte store is rejected with an error. If the count lives in a store you do not own, wrap it with fromStore in your own code and pass () => wrapped.current.

Column Options

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

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.page}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.page}
  {/each}
{/each}

{#each vm.current.headerRows as headerRow (headerRow.id)}
  {headerRow.current.props.page}
  {#each headerRow.cells as cell (cell.id)}
    {cell.current.props.page}
  {/each}
{/each}

Interactions

• Page size counts every row pageRows receives: group header rows from addGroupBy and expanded children from addExpandedRows both take a slot.
• Sorting and filtering run before pagination, so pageCount reflects the filtered, sorted set.

Plugin State

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { pageIndex, pageSize, pageCount, hasPreviousPage, hasNextPage } = pluginStates.page

const vm = table.createViewModel(columns)
const { pluginStates } = vm
const { pageIndex, pageSize, pageCount, hasPreviousPage, hasNextPage } = pluginStates.page

pageSize: Box<number>

The page size. Writes below 1 are clamped to 1.

pageIndex: Box<number>

The page index, 0-based. The value you write is kept, but reads are clamped to the last page, so shrinking the data or growing the page size never shows an empty page.

pageCount: ReadonlyBox<number>

The total number of pages.

hasPreviousPage: ReadonlyBox<boolean>

hasNextPage: ReadonlyBox<boolean>

<button onclick={() => (pageIndex.current -= 1)} disabled={!hasPreviousPage.current}>
  Previous page
</button>
{pageIndex.current + 1} out of {pageCount.current}
<button onclick={() => (pageIndex.current += 1)} disabled={!hasNextPage.current}>
  Next page
</button>
<input type="number" min={1} bind:value={pageSize.current} />

<button onclick={() => (pageIndex.current -= 1)} disabled={!hasPreviousPage.current}>
  Previous page
</button>
{pageIndex.current + 1} out of {pageCount.current}
<button onclick={() => (pageIndex.current += 1)} disabled={!hasNextPage.current}>
  Next page
</button>
<input type="number" min={1} bind:value={pageSize.current} />

createPageState({ items, initialPageSize, initialPageIndex, serverSide, serverItemCount }), where items is a getter for the rows to paginate, builds the same state outside a table. It replaces the 6.x createPageStore.

Examples

{
  "pageIndex": 0,
  "pageCount": 10,
  "pageSize": 10
}