Unstyled table pagination

Table pagination lets users navigate through data in tables.

The TablePaginationUnstyled component controls two table properties: displayed page index and number of rows per page.

By default it renders its internal components wrapped in a tr tag, so it's easy to insert it in a table's tr. This can be changed, if needed, by supplying the component or components.Root prop. This way you can place the pagination controls outside of the table.

Basic TablePaginationUnstyled

Custom pagination options

It's possible to customize the options shown in the "Rows per page" select using the rowsPerPageOptions prop. You should either provide an array of:

• numbers, each number will be used for the option's label and value.

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

  Copy (Or $keyC)

• objects, the value and label keys will be used respectively for the value and label of the option (useful for words such as "All").

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

  Copy (Or $keyC)

Customized look and feel

API

• <TablePaginationUnstyled />