Plugins

addPagination

addPagination paginates the table by page index.

<script>
  const {
    headerRows,
    pageRows,
  } = table.createViewModel(columns);
</script>

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

# Options

const table = createTable(data, {
  page: addPagination({ ... }),
});

# initialPageIndex?: number

Sets the initial page index.

Defaults to 0.

# initialPageSize?: number

Sets the initial page size.

Defaults to 10.

# serverSide?: boolean

If true, the pagination plugin will have no effect on the rows of the table. Instead, you can control pagination by updating $data. The plugin's state can be used as variables in your data-fetching query to get paginated data from the server directly.

Defaults to false.

# serverItemCount: Writable<number>

The total number of items expected from the server.

When using server-side pagination, the number of items in $data only reflects the number of items in the page and not the number of total items. To calculate the right number of pages required, the plugin needs to know how many items in total are expected.

Required when serverSide = true.

# Column Options

const columns = table.createColumns([
  table.column({
    header: 'Name',
    accessor: 'name',
    plugins: {
      page: { ... },
    },
  }),
]);

Nothing here so far.

# Prop Set

{#each $headerRows as headerRow (headerRow.id)}
  <Subscribe rowProps={headerRow.props()} let:rowProps>
    {rowProps.page} <!-- HeaderRow props -->
    {#each headerRow.cells as cell (cell.id)}
      <Subscribe props={cell.props()} let:props>
        {props.page} <!-- HeaderCell props -->
      </Subscribe>
    {/each}
  </Subscribe>
{/each}

Nothing here so far.

# Plugin State

const { headerRows, pageRows, pluginStates } = table.createViewModel(columns);
const { ... } = pluginStates.page;

# pageSize: Writable<number>

The current number of rows per page. If a value less than 1 is set, a minimum value of 1 is enforced.

# pageIndex: Writable<number>

The current page index.

# hasPreviousPage: Readable<boolean>

Whether a previous page is available.

# hasNextPage: Readable<boolean>

Whether a next page is available.

# pageCount: Readable<number>

The total number of pages derived from the number of rows and page size.

# Examples

# Simple pagination