Skip to main content

usePagination

Result
Loading...
Live Editor
const columns = [
  {
    id: 'demo-component-one-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'demo-component-one-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'demo-component-one-type',
    key: 'type',
    label: 'Type',
  },
];

const Example = () => {
  const usePaginationPlugin = usePagination();

  return (
    <DataTable
      id="demo-component"
      columns={columns}
      data={dataTableInitialData}
      plugins={[usePaginationPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Set active page to start​

Result
Loading...
Live Editor
const columns = [
  {
    id: 'active-page-to-start-one-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'active-page-to-start-one-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'active-page-to-start-one-type',
    key: 'type',
    label: 'Type',
  },
];

const Example = () => {
  const usePaginationPlugin = usePagination({
    activePage: 3,
  });

  return (
    <DataTable
      id="active-page-to-start"
      columns={columns}
      data={dataTableInitialData}
      plugins={[usePaginationPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

Manage pagination state yourself​

Result
Loading...
Live Editor
const columns = [
  {
    id: 'managing-state-one-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'managing-state-one-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'managing-state-one-type',
    key: 'type',
    label: 'Type',
  },
];

const Example = () => {
  const [activePage, setActivePage] = useState(3);
  const usePaginationPlugin = usePagination({
    activePage,
    onPageClick: (event, nextActivePage) => {
      setActivePage(nextActivePage);
    },
  });

  return (
    <DataTable
      id="managing-state"
      columns={columns}
      data={dataTableInitialData}
      plugins={[usePaginationPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

With Pagination By Row​

Result
Loading...
Live Editor
const columns = [
  {
    id: 'pagination-by-row-one-name',
    key: 'name',
    label: 'Name',
  },
  {
    id: 'pagination-by-row-one-income',
    key: 'income',
    label: 'Income',
  },
  {
    id: 'pagination-by-row-one-type',
    key: 'type',
    label: 'Type',
  },
];

const Example = () => {
  const [activePage, setActivePage] = useState(3);
  const usePaginationPlugin = usePagination({
    paginationStyle: 'by-rows',
  });

  return (
    <DataTable
      id="pagination-by-row"
      columns={columns}
      data={dataTableInitialData}
      plugins={[usePaginationPlugin]}
      title="Clients"
      responsive
      stacked
    />
  );
};

render(<Example />);

PluginProperties​

Type: [Object]

Properties​

  • pageSize [number]? The number of rows to show per page.
  • activePage [number]? The index of the page to start on.
  • onPageClick [onPageClick]? A callback that will be called whenever click is fired on a page item.
  • paginationStyle [string]? Defaults to 'page'. Set to 'by-rows' to paginate by rows.

usePagination​

Create a plugin hook that enables DataTable pagination by adding the pagination component below the table.

Parameters​

  • props [PluginProperties] (optional, default {})

Returns Plugin

onPageClick​

Type: [Function]

Parameters​

  • Event [Object]
  • nextActivePage [number] The integer value of the next active page.