Skip to main content
/
/
/
/
pagination

pagination

Tables are paginated by default with row count and page size options for users to choose from.

The default page size options are 10, 20, 50 and 100 rows per page.

Customizing Page Size Options

You can customize the page size options available to users by setting tableOptions.pageSizeOptions, the first option will be used as the default page size.

Future Changes

We plan to add user preferences for page size in the near future, allowing users to select and persist their preferred page size across sessions. Once this feature is implemented, the first option in pageSizeOptions will still be the default page size, but the user's preference will take precedence. (#100)

<DataTable tableOptions={{ pageSizeOptions: [4, 9, 69, 420] }} />
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
Showing 1-4 of 1000
1 of 250......
4 Rows
Showing 1-4 of 1000
1 of 250......
4 Rows

Disable

If you don't want pagination at all, you can disable it by setting tableOptions.enablePagination to false.

<DataTable tableOptions={{ enablePagination: false }} />
Name
Breed
Age
Birthdate
Last Checkup
Nationality
Microchip
Title
Identifier
Display Name
IP Address
Skills
Filter
Filter
Filter
Filter
Selkirk Rex
17
2008-02-08T18:48:47.009Z
2025-03-30T17:08:37.394Z
πŸ‡²πŸ‡΅
Legacy Implementation Liaison
0
Aric35
177.221.104.53
Hunting
American Shorthair
3
2022-01-11T19:38:47.327Z
2025-09-20T18:22:06.143Z
πŸ‡΅πŸ‡²
Principal Applications Developer
1
Jocelyn_Koelpin
183.178.38.10
Playing
Havana
17
2007-12-02T16:09:32.758Z
2025-03-27T23:53:33.990Z
πŸ‡³πŸ‡«
Investor Applications Administrator
2
Kathleen.Mosciski57
186.101.171.88
Hunting
Japanese Bobtail
–
2007-05-16T14:16:12.809Z
2025-07-02T10:03:51.929Z
πŸ‡¬πŸ‡³
Internal Infrastructure Planner
3
Crystal49
a36a:a9ed:0bdc:1feb:1854:e72d:11a4:43cb
Purring
American Wirehair
20
2005-03-20T05:26:51.899Z
2025-11-01T17:56:07.953Z
πŸ‡°πŸ‡­
Customer Optimization Administrator
4
Beverly59
4b1b:da8f:8528:04a2:c454:39e4:da0f:b2bb
Climbing
Himalayan
–
2024-11-23T15:17:50.905Z
2025-02-26T09:06:36.021Z
πŸ‡»πŸ‡¬
Forward Identity Assistant
5
May.Prosacco86
c73b:f2e2:f8db:0cef:aaa6:4d3c:8dcd:17e1
Sleeping
American Bobtail
12
2013-05-10T22:59:10.107Z
2025-03-20T13:16:31.031Z
πŸ΄β€β˜ οΈ
Legacy Group Manager
6
Audie.Hackett
193.225.156.126
Meowing
Exotic Shorthair
11
2014-02-03T02:29:26.148Z
2025-05-07T01:49:29.124Z
πŸ‡±πŸ‡Ή
International Mobility Architect
7
Christy.Bode-Lueilwitz11
203.128.8.19
Meowing
Peterbald
20
–
2025-01-08T03:41:04.126Z
πŸ‡ΊπŸ‡³
Chief Intranet Technician
8
Janae7
11.134.30.108
Jumping
American Shorthair
14
2011-05-14T02:26:51.612Z
2025-08-22T01:07:28.240Z
πŸ‡«πŸ‡·
Legacy Quality Analyst
9
Darrel.Simonis26
ae80:6f80:acc6:4188:fa52:edef:eefe:19f2
Scratching

Query Parameters

Current page is pushed to the URL as a query parameter page, so that users can share links to specific pages in a table. For example, navigating to ?page=3 will open the table on page 3. When on page 1, the page query parameter is removed from the URL to keep it clean.

Custom Query Parameter Name

You can customize the query parameter name used for pagination by setting tableOptions.queryKeys.page.

Generally we recommend keeping the default page value to ensure consistency across your application and user familiarity, however if you are using multiple tables on the same page you need to customize the query parameter names to avoid conflicts.

<DataTable tableOptions={{ queryKeys: { page: 'my-custom-table-page' } }} />

Disable Query Parameters

You can also disable query parameters for pagination by setting tableOptions.queryKeys.page to false.

<DataTable tableOptions={{ queryKeys: { page: false } }} />