Pagination Feature Guide

Client-side pagination is enabled by default in Material React Table. There are a number of ways to customize pagination, turn off pagination, or completely replace the built in pagination with your own manual or server-side pagination logic.

Relevant Props

#	Type	Default Value	More Info Links
1	boolean	true

2	() => MRT_RowModel<TData>

3	boolean		TanStack Table Pagination Docs

4	Partial<TablePaginationProps> \| ({ table }) => Partial<TablePaginationProps>		Material UI TablePagination Props

5	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

6	number		TanStack Table Pagination Docs

7	boolean		TanStack Table Expanding Docs

8	'bottom' \| 'top' \| 'both'

9	number

Relevant State Options

	#	State Option	Type	Default Value	More Info Links
	1		{ pageIndex: number, pageSize: number }	{ pageIndex: 0, pageSize: 10 }	TanStack Table Pagination Docs

Disable Pagination

If you simply want to disable pagination, you can set the enablePagination prop to false. This will both hide the pagination controls and disable the pagination functionality.

If you only want to disable the pagination logic, but still want to show and use the pagination controls, take a look down below at the Manual Pagination docs.

<MaterialTable columns={columns} data={data} enablePagination={false} />

Customize Pagination

Customize Pagination Behavior

There are a few props that you can use to customize the pagination behavior. The first one is autoResetPageIndex. This prop is true by default, and causes a table to automatically reset the table back to the first page whenever sorting, filtering, or grouping occurs. This makes sense for most use cases, but if you want to disable this behavior, you can set this prop to false.

Next there is paginateExpandedRows, which works in conjunction expanding features. This prop is true by default, and forces the table to still only render the same number of rows per page that is set as the page size, even as sub-rows become expanded. However, this does cause expanded rows to sometimes not be on the same page as their parent row, so you can turn this off to keep sub rows with their parent row on the same page.

Customize Pagination Components

You can customize the pagination component with the muiTablePaginationProps prop to change things like the rowsPerPageOptions or whether or not to show the first and last page buttons, and more.

<MaterialReactTable
  columns={columns}
  data={data}
  muiTablePaginationProps={{
    rowsPerPageOptions: [5, 10],
    showFirstLastPageButtons: false,
  }}
/>

View all table pagination options that you can tweak in the Material UI Table Pagination API Docs.

Manual or Server-Side Pagination

Manual Pagination

The default pagination features are client-side. This means you have to have all of your data fetched and stored in the table all at once. This may not be ideal for large datasets, but do not worry, Material React Table supports server-side pagination.

When the manualPagination prop is set to true, Material React Table will assume that the data that is passed to the table already has had the pagination logic applied. Usually you would do this in your back-end logic.

Override Page Count and Row Count

If you are using manual pagination, the default page count and row count in the Material UI pagination component will be incorrect, as it is only derived from the number of rows provided in the client-side data prop. Luckily, you can override these values and set your own page count or row count in the pageCount and rowCount props.

<MaterialTable
  columns={columns}
  data={data}
  manualPagination
  rowCount={data.meta.totalDBRowCount} //you can tell the pagination how many rows there are in your back-end data
/>

Manage Pagination State

For either client-side or server-side pagination, you may want to have access to the pagination state yourself. You can do this like so with state:

//store pagination state in your own state
const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: 5, //customize the default page size
});

useEffect(() => {
  //do something when the pagination state changes
}, [pagination.pageIndex, pagination.pageSize]);

return (
  <MaterialTable
    columns={columns}
    data={data}
    onPaginationChange={setPagination} //hoist pagination state to your state when it changes internally
    state={{ pagination }} //pass the pagination state to the table
  />
);

Alternatively, if all you care about is customizing the initial pagination state and do not need to react to its changes, like customizing the default page size or the page index, you can do that like so with initialState:

<MaterialTable
  columns={columns}
  data={data}
  initialState={{ pagination: { pageSize: 25, pageIndex: 2 } }}
/>

Here is the full Remote Data example showing off server-side filtering, pagination, and sorting.

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Drop to group by

	First Name	Last Name	Address	State	Phone Number
No records to display

Source Code

1import React, { FC, useEffect, useMemo, useState } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import type {
4  ColumnFiltersState,
5  PaginationState,
6  SortingState,
7} from '@tanstack/react-table';
8
9type UserApiResponse = {
10  data: Array<User>;
11  meta: {
12    totalRowCount: number;
13  };
14};
15
16type User = {
17  firstName: string;
18  lastName: string;
19  address: string;
20  state: string;
21  phoneNumber: string;
22};
23
24const Example: FC = () => {
25  //data and fetching state
26  const [data, setData] = useState<User[]>([]);
27  const [isError, setIsError] = useState(false);
28  const [isLoading, setIsLoading] = useState(false);
29  const [isRefetching, setIsRefetching] = useState(false);
30  const [rowCount, setRowCount] = useState(0);
31
32  //table state
33  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
34  const [globalFilter, setGlobalFilter] = useState('');
35  const [sorting, setSorting] = useState<SortingState>([]);
36  const [pagination, setPagination] = useState<PaginationState>({
37    pageIndex: 0,
38    pageSize: 10,
39  });
40
41  //if you want to avoid useEffect, look at the React Query example instead
42  useEffect(() => {
43    const fetchData = async () => {
44      if (!data.length) {
45        setIsLoading(true);
46      } else {
47        setIsRefetching(true);
48      }
49
50      const url = new URL(
51        '/api/data',
52        process.env.NODE_ENV === 'production'
53          ? 'https://www.material-react-table.com'
54          : 'http://localhost:3000',
55      );
56      url.searchParams.set(
57        'start',
58        `${pagination.pageIndex * pagination.pageSize}`,
59      );
60      url.searchParams.set('size', `${pagination.pageSize}`);
61      url.searchParams.set('filters', JSON.stringify(columnFilters ?? []));
62      url.searchParams.set('globalFilter', globalFilter ?? '');
63      url.searchParams.set('sorting', JSON.stringify(sorting ?? []));
64
65      try {
66        const response = await fetch(url.href);
67        const json = (await response.json()) as UserApiResponse;
68        setData(json.data);
69        setRowCount(json.meta.totalRowCount);
70      } catch (error) {
71        setIsError(true);
72        console.error(error);
73        return;
74      }
75      setIsError(false);
76      setIsLoading(false);
77      setIsRefetching(false);
78    };
79    fetchData();
80    // eslint-disable-next-line react-hooks/exhaustive-deps
81  }, [
82    columnFilters,
83    globalFilter,
84    pagination.pageIndex,
85    pagination.pageSize,
86    sorting,
87  ]);
88
89  const columns = useMemo<MRT_ColumnDef<User>[]>(
90    () => [
91      {
92        accessorKey: 'firstName',
93        header: 'First Name',
94      },
95      //column definitions...
96      {
97        accessorKey: 'lastName',
98        header: 'Last Name',
99      },
100      {
101        accessorKey: 'address',
102        header: 'Address',
103      },
104      {
105        accessorKey: 'state',
106        header: 'State',
107      },
108      {
109        accessorKey: 'phoneNumber',
110        header: 'Phone Number',
111      },
112      
113    ],
114    [],
115  );
116
117  return (
118    <MaterialReactTable
119      columns={columns}
120      data={data}
121      enableRowSelection
122      getRowId={(row) => row.phoneNumber}
123      initialState={{ showColumnFilters: true }}
124      manualFiltering
125      manualPagination
126      manualSorting
127      muiToolbarAlertBannerProps={
128        isError
129          ? {
130              color: 'error',
131              children: 'Error loading data',
132            }
133          : undefined
134      }
135      onColumnFiltersChange={setColumnFilters}
136      onGlobalFilterChange={setGlobalFilter}
137      onPaginationChange={setPagination}
138      onSortingChange={setSorting}
139      rowCount={rowCount}
140      state={{
141        columnFilters,
142        globalFilter,
143        isLoading,
144        pagination,
145        showAlertBanner: isError,
146        showProgressBars: isRefetching,
147        sorting,
148      }}
149    />
150  );
151};
152
153export default Example;
154

View Extra Storybook Examples