usePagination

Expected Future Changes

• DataTable is deprecated and may be removed in a future release. Use @tanstack/react-table instead.

• The usePagination plugin may be removed in a future release. Use the pagination feature built into @tanstack/react-table instead.

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.