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 (
		<div data-testid="pw-paginationbyrows">
			<PaginationByRows
				id="demo-component"
				rows={23}
				activePage={activePage}
				rowsPerPage={rowsPerPage}
				onPageClick={handlePageClick}
				onChangeRowsPerPage={handleChangeRowsPerPage}
			/>
		</div>
	);
}

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

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

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