Paginated table

Live demo

Code

Paginated Table

import { PaginatedTable } from './paginated-table';

const values = Table.OffsetPagination.paginationToResultValues(
  pagination,
  window.navigator.language,
);

<PaginatedTable
  caption="Table caption"
  rows={rows}
  columns={columns}
  fallbackMessage="Fallback message"
>
  <PaginatedTable.OffsetPagination {...pagination}>
    {values.from} - {values.to} of {values.total}
  </PaginatedTable.OffsetPagination>
</PaginatedTable>;

Paginated table with variant option in the table cells

import{ PaginatedTable } from './paginated-table';

const columns: Columns = [
  {
    headerName: 'Registered business name',
    field: 'companyName',
    cellTextVariant: 'captionMedium150',
  },
  {
    headerName: 'Business display name',
    field: 'displayName',
    cellTextVariant: 'captionMedium150',
  },
  {
    headerName: 'Contact Email',
    field: 'emailAddress',
    cellTextVariant: 'captionMedium150',
  },
];

<PaginatedTable
  caption="Table caption"
  rows={rows}
  columns={columns}
  fallbackMessage="Fallback message"
  banner={
    <PaginatedTable.Banner>
      <Text>I am a banner</Text>
    </PaginatedTable.Banner>
  }
>
  <PaginatedTable.OffsetPagination {...pagination}>
    {values.from} - {values.to} of {values.total}
  </PaginatedTable.OffsetPagination>
</Paginated>