Plugins

addPagination

addPagination paginates the table by page index. For token-based pagination, refer to addTokenPagination.

<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.

# 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