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.

usePagination Parmeters​

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

Returns Plugin

onPageClick​

Type: [Function]

onPageClick Parameters​

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