Component

PaginatedTable

Combines TableShell with Pagination. Choose the pagination style via paginationVariant.

paginationVariant="simple" (default)

live editor — edit to update preview

const ALL_ROWS = [{"id":1,"name":"User 1","role":"Admin"},{"id":2,"name":"User 2","role":"Author"},{"id":3,"name":"User 3","role":"Reviewer"},{"id":4,"name":"User 4","role":"Admin"},{"id":5,"name":"User 5","role":"Author"},{"id":6,"name":"User 6","role":"Reviewer"},{"id":7,"name":"User 7","role":"Admin"},{"id":8,"name":"User 8","role":"Author"},{"id":9,"name":"User 9","role":"Reviewer"},{"id":10,"name":"User 10","role":"Admin"},{"id":11,"name":"User 11","role":"Author"},{"id":12,"name":"User 12","role":"Reviewer"},{"id":13,"name":"User 13","role":"Admin"},{"id":14,"name":"User 14","role":"Author"},{"id":15,"name":"User 15","role":"Reviewer"},{"id":16,"name":"User 16","role":"Admin"},{"id":17,"name":"User 17","role":"Author"},{"id":18,"name":"User 18","role":"Reviewer"},{"id":19,"name":"User 19","role":"Admin"},{"id":20,"name":"User 20","role":"Author"},{"id":21,"name":"User 21","role":"Reviewer"},{"id":22,"name":"User 22","role":"Admin"},{"id":23,"name":"User 23","role":"Author"},{"id":24,"name":"User 24","role":"Reviewer"},{"id":25,"name":"User 25","role":"Admin"},{"id":26,"name":"User 26","role":"Author"},{"id":27,"name":"User 27","role":"Reviewer"},{"id":28,"name":"User 28","role":"Admin"},{"id":29,"name":"User 29","role":"Author"},{"id":30,"name":"User 30","role":"Reviewer"},{"id":31,"name":"User 31","role":"Admin"},{"id":32,"name":"User 32","role":"Author"},{"id":33,"name":"User 33","role":"Reviewer"},{"id":34,"name":"User 34","role":"Admin"},{"id":35,"name":"User 35","role":"Author"},{"id":36,"name":"User 36","role":"Reviewer"},{"id":37,"name":"User 37","role":"Admin"},{"id":38,"name":"User 38","role":"Author"},{"id":39,"name":"User 39","role":"Reviewer"},{"id":40,"name":"User 40","role":"Admin"},{"id":41,"name":"User 41","role":"Author"},{"id":42,"name":"User 42","role":"Reviewer"},{"id":43,"name":"User 43","role":"Admin"},{"id":44,"name":"User 44","role":"Author"},{"id":45,"name":"User 45","role":"Reviewer"}];

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);
  const totalPages = Math.ceil(ALL_ROWS.length / size);
  const rows = ALL_ROWS.slice((page - 1) * size, page * size);
  return (
    <PaginatedTable
      page={page}
      totalPages={totalPages}
      onPageChange={setPage}
      totalLabel={ALL_ROWS.length + " users"}
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
      paginationVariant="simple"
      position="bottom"
    >
      <Table>
        <TableHead>
          <Th>#</Th><Th>Name</Th><Th>Role</Th>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <Td>{row.id}</Td><Td>{row.name}</Td><Td>{row.role}</Td>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </PaginatedTable>
  );
}
render(<Demo />);

paginationVariant="pages" — numbered buttons with ellipsis

live editor — edit to update preview

const ALL_ROWS = [{"id":1,"name":"User 1","role":"Admin"},{"id":2,"name":"User 2","role":"Author"},{"id":3,"name":"User 3","role":"Reviewer"},{"id":4,"name":"User 4","role":"Admin"},{"id":5,"name":"User 5","role":"Author"},{"id":6,"name":"User 6","role":"Reviewer"},{"id":7,"name":"User 7","role":"Admin"},{"id":8,"name":"User 8","role":"Author"},{"id":9,"name":"User 9","role":"Reviewer"},{"id":10,"name":"User 10","role":"Admin"},{"id":11,"name":"User 11","role":"Author"},{"id":12,"name":"User 12","role":"Reviewer"},{"id":13,"name":"User 13","role":"Admin"},{"id":14,"name":"User 14","role":"Author"},{"id":15,"name":"User 15","role":"Reviewer"},{"id":16,"name":"User 16","role":"Admin"},{"id":17,"name":"User 17","role":"Author"},{"id":18,"name":"User 18","role":"Reviewer"},{"id":19,"name":"User 19","role":"Admin"},{"id":20,"name":"User 20","role":"Author"},{"id":21,"name":"User 21","role":"Reviewer"},{"id":22,"name":"User 22","role":"Admin"},{"id":23,"name":"User 23","role":"Author"},{"id":24,"name":"User 24","role":"Reviewer"},{"id":25,"name":"User 25","role":"Admin"},{"id":26,"name":"User 26","role":"Author"},{"id":27,"name":"User 27","role":"Reviewer"},{"id":28,"name":"User 28","role":"Admin"},{"id":29,"name":"User 29","role":"Author"},{"id":30,"name":"User 30","role":"Reviewer"},{"id":31,"name":"User 31","role":"Admin"},{"id":32,"name":"User 32","role":"Author"},{"id":33,"name":"User 33","role":"Reviewer"},{"id":34,"name":"User 34","role":"Admin"},{"id":35,"name":"User 35","role":"Author"},{"id":36,"name":"User 36","role":"Reviewer"},{"id":37,"name":"User 37","role":"Admin"},{"id":38,"name":"User 38","role":"Author"},{"id":39,"name":"User 39","role":"Reviewer"},{"id":40,"name":"User 40","role":"Admin"},{"id":41,"name":"User 41","role":"Author"},{"id":42,"name":"User 42","role":"Reviewer"},{"id":43,"name":"User 43","role":"Admin"},{"id":44,"name":"User 44","role":"Author"},{"id":45,"name":"User 45","role":"Reviewer"}];

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);
  const totalPages = Math.ceil(ALL_ROWS.length / size);
  const rows = ALL_ROWS.slice((page - 1) * size, page * size);
  return (
    <PaginatedTable
      page={page}
      totalPages={totalPages}
      onPageChange={setPage}
      totalLabel={ALL_ROWS.length + " users"}
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
      paginationVariant="pages"
      position="bottom"
    >
      <Table>
        <TableHead>
          <Th>#</Th><Th>Name</Th><Th>Role</Th>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <Td>{row.id}</Td><Td>{row.name}</Td><Td>{row.role}</Td>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </PaginatedTable>
  );
}
render(<Demo />);

position="both"

live editor — edit to update preview

const ALL_ROWS = [{"id":1,"name":"User 1","role":"Admin"},{"id":2,"name":"User 2","role":"Author"},{"id":3,"name":"User 3","role":"Reviewer"},{"id":4,"name":"User 4","role":"Admin"},{"id":5,"name":"User 5","role":"Author"},{"id":6,"name":"User 6","role":"Reviewer"},{"id":7,"name":"User 7","role":"Admin"},{"id":8,"name":"User 8","role":"Author"},{"id":9,"name":"User 9","role":"Reviewer"},{"id":10,"name":"User 10","role":"Admin"},{"id":11,"name":"User 11","role":"Author"},{"id":12,"name":"User 12","role":"Reviewer"},{"id":13,"name":"User 13","role":"Admin"},{"id":14,"name":"User 14","role":"Author"},{"id":15,"name":"User 15","role":"Reviewer"},{"id":16,"name":"User 16","role":"Admin"},{"id":17,"name":"User 17","role":"Author"},{"id":18,"name":"User 18","role":"Reviewer"},{"id":19,"name":"User 19","role":"Admin"},{"id":20,"name":"User 20","role":"Author"},{"id":21,"name":"User 21","role":"Reviewer"},{"id":22,"name":"User 22","role":"Admin"},{"id":23,"name":"User 23","role":"Author"},{"id":24,"name":"User 24","role":"Reviewer"},{"id":25,"name":"User 25","role":"Admin"},{"id":26,"name":"User 26","role":"Author"},{"id":27,"name":"User 27","role":"Reviewer"},{"id":28,"name":"User 28","role":"Admin"},{"id":29,"name":"User 29","role":"Author"},{"id":30,"name":"User 30","role":"Reviewer"},{"id":31,"name":"User 31","role":"Admin"},{"id":32,"name":"User 32","role":"Author"},{"id":33,"name":"User 33","role":"Reviewer"},{"id":34,"name":"User 34","role":"Admin"},{"id":35,"name":"User 35","role":"Author"},{"id":36,"name":"User 36","role":"Reviewer"},{"id":37,"name":"User 37","role":"Admin"},{"id":38,"name":"User 38","role":"Author"},{"id":39,"name":"User 39","role":"Reviewer"},{"id":40,"name":"User 40","role":"Admin"},{"id":41,"name":"User 41","role":"Author"},{"id":42,"name":"User 42","role":"Reviewer"},{"id":43,"name":"User 43","role":"Admin"},{"id":44,"name":"User 44","role":"Author"},{"id":45,"name":"User 45","role":"Reviewer"}];

function Demo() {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(10);
  const totalPages = Math.ceil(ALL_ROWS.length / size);
  const rows = ALL_ROWS.slice((page - 1) * size, page * size);
  return (
    <PaginatedTable
      page={page}
      totalPages={totalPages}
      onPageChange={setPage}
      totalLabel={ALL_ROWS.length + " users"}
      pageSize={size}
      onPageSizeChange={(s) => { setSize(s); setPage(1); }}
      paginationVariant="pages"
      position="both"
    >
      <Table>
        <TableHead>
          <Th>#</Th><Th>Name</Th><Th>Role</Th>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              <Td>{row.id}</Td><Td>{row.name}</Td><Td>{row.role}</Td>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </PaginatedTable>
  );
}
render(<Demo />);

Props

Prop	Type	Default	Description
page*	number	—	Current page (1-indexed).
totalPages*	number	—	Total number of pages.
onPageChange*	(page: number) => void	—	Called with the new page number.
paginationVariant	"simple" \| "pages"	"simple"	"simple" shows prev/next + page indicator. "pages" shows numbered buttons with ellipsis.
position	"top" \| "bottom" \| "both"	"bottom"	Where to render the pagination bar.
totalLabel	string	—	Label shown on the left, e.g. "45 users".
pageSize	number	—	Current page size. Required to show the size selector.
onPageSizeChange	(size: number) => void	—	Called when the user selects a different page size.
className	string	—	Class on the outer wrapper div.