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 />);

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 />);

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 />);

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 />);

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.