PaginationByRows

It is recommended to reset the active page as part of the callback to onChangeRowsPerPage.

Result

Loading...

Live Editor

function Example() { const [activePage, setActivePage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(5); const handlePageClick = (e, { nextActivePage }) => { setActivePage(nextActivePage); }; const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => { setRowsPerPage(nextRowsPerPage); setActivePage(nextActivePage); }; return ( <PaginationByRows id="demo-component" rows={23} activePage={activePage} rowsPerPage={rowsPerPage} onPageClick={handlePageClick} onChangeRowsPerPage={handleChangeRowsPerPage} /> ); }

function Example() {
  const [activePage, setActivePage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const handlePageClick = (e, { nextActivePage }) => {
    setActivePage(nextActivePage);
  };

  const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => {
    setRowsPerPage(nextRowsPerPage);
    setActivePage(nextActivePage);
  };

  return (
    <PaginationByRows
      id="demo-component"
      rows={23}
      activePage={activePage}
      rowsPerPage={rowsPerPage}
      onPageClick={handlePageClick}
      onChangeRowsPerPage={handleChangeRowsPerPage}
    />
  );
}

No Rows Per Page

Result

Loading...

Live Editor

function Example() { const [activePage, setActivePage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(5); const handlePageClick = (e, { nextActivePage }) => { setActivePage(nextActivePage); }; const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => { setRowsPerPage(nextRowsPerPage); setActivePage(nextActivePage); }; return ( <PaginationByRows id="no-rows" rows={23} showRowsPerPage={false} activePage={activePage} rowsPerPage={rowsPerPage} onPageClick={handlePageClick} onChangeRowsPerPage={handleChangeRowsPerPage} /> ); }

function Example() {
  const [activePage, setActivePage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const handlePageClick = (e, { nextActivePage }) => {
    setActivePage(nextActivePage);
  };

  const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => {
    setRowsPerPage(nextRowsPerPage);
    setActivePage(nextActivePage);
  };

  return (
    <PaginationByRows
      id="no-rows"
      rows={23}
      showRowsPerPage={false}
      activePage={activePage}
      rowsPerPage={rowsPerPage}
      onPageClick={handlePageClick}
      onChangeRowsPerPage={handleChangeRowsPerPage}
    />
  );
}

No Rows Per Page or Total

Result

Loading...

Live Editor

function Example() { const [activePage, setActivePage] = useState(1); const [rowsPerPage, setRowsPerPage] = useState(5); const handlePageClick = (e, { nextActivePage }) => { setActivePage(nextActivePage); }; const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => { setRowsPerPage(nextRowsPerPage); setActivePage(nextActivePage); }; return ( <PaginationByRows id="no-rows-total" rows={23} showRowsPerPage={false} showRowsOfTotal={false} activePage={activePage} rowsPerPage={rowsPerPage} onPageClick={handlePageClick} onChangeRowsPerPage={handleChangeRowsPerPage} /> ); }

function Example() {
  const [activePage, setActivePage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(5);

  const handlePageClick = (e, { nextActivePage }) => {
    setActivePage(nextActivePage);
  };

  const handleChangeRowsPerPage = (e, { nextRowsPerPage, nextActivePage }) => {
    setRowsPerPage(nextRowsPerPage);
    setActivePage(nextActivePage);
  };

  return (
    <PaginationByRows
      id="no-rows-total"
      rows={23}
      showRowsPerPage={false}
      showRowsOfTotal={false}
      activePage={activePage}
      rowsPerPage={rowsPerPage}
      onPageClick={handlePageClick}
      onChangeRowsPerPage={handleChangeRowsPerPage}
    />
  );
}

Analytics

The PaginationByRows component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'PaginationByRows',
	actions: {
		onPageClick: { type: 'PAGINATIONBYROWS_ON_PAGE_CLICK', payload: 'Page Click' },
		onChangeRowsPerPage: { type: 'PAGINATIONBYROWS_ON_CHANGE_ROWS', payload: 'Change Rows' },
	},
};

Props