TablePagination

A table pagination component lets users navigate through tabular data split across multiple pages.

Expand code


<TablePagination entries={200}/>

Entries

The entries prop determines, how many total rows will be available to navigate.

Expand code


<EntriesPagination entries={500}/>
<EntriesPagination entries={1000}/>

Rows

By default, users can select between 10, 25, 50 or 100 rows to be displayed at a time. Use the rows prop to override the select options.

Expand code


<EntriesPagination entries={500} rows={[25, 50, 100]}/>
<EntriesPagination entries={1000} rows={[50, 100, 250]}/>

Text overrides

RowLabel

The rowLabel sets the text before the select dropdown.

Expand code


<TablePagination entries={200} rowLabel={'Select amount of rows to display'}/>

EntriesDescription

The entriesDescription overrides the text between the current rows and total entries.

Expand code


<TablePagination entries={200} entriesDescription={'/'}/>

ActivePage

You can set the currently selected page (defaults to 1) with the activePage prop.

Expand code


<TablePagination entries={200} activePage={3}/>

Pages will be calculated based on the entries and currently selected row count.
If the prop is greater than the calculated number of pages, it will fall back to the last page.
If it is smaller than 0, it will fall back to 1.

Change detection

You can handle navigation changes with the prop onChange.
The function uses two parameters: newPage, the navigated page & count, the currently selected row count.

Control customization

The navigation controls can be customized, by overriding the icons or aria-labels.

Expand code


const next = <svg>...</svg>
const prev = <svg>...</svg>
 
<TablePagination 
  entries={200}
  activePage={3}
  nextLabel={'Next'}
  prevLabel={'Previous'}
  nextButton={next}
  prevButton={prev}
/>

Props

Name	Type	Default	Description
activePage	`number`	1	currently selected page
entries	`number`	-	Number of total entries
entriesDescription	`string`	of	Sets the text between current rows & total rows
nextButton	`node`	-	Use a custom icon
nextLabel	`string`	Go to next page	Sets aria-label attribute
onChange	`function`	-	On change, get the current page
prevButton	`node`	-	Use a custom icon
prevLabel	`string`	Go to previous page	Sets aria-label attribute
rowLabel	`string`	Rows per page	Sets text before the select dropdown
rows	`number[]`	[10, 25, 50, 100]	Sets row count options