Unstyled table pagination

Table pagination is an interface tool for splitting up large amounts of data to make it easier for users to navigate.

The TablePaginationUnstyled component controls two properties of its parent table:

• displayed page index
• number of rows per page

By default it renders its internal components wrapped in a <td> tag, so it can be inserted into a table's <tr>.

You can change this default behavior by supplying the component or components.Root prop. This is useful it you need to place the pagination controls outside of the table.

Basic usage

Custom pagination options

You can customize the options shown in the Rows per page select using the rowsPerPageOptions prop. This prop requires an array of either numbers or objects:

• numbers—each number is used for the option's label and value.

  <TablePaginationUnstyled rowsPerPageOptions={[10, 50]} />
  

  Copy or $key + C

• objects—the value and label keys are used, respectively, for the value and label of the option (useful for labels such as All).

  <TablePaginationUnstyled
    rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]}
  />
  

  Copy or $key + C

Customized look and feel

API

• <TablePaginationUnstyled />