From 468bb04f5c3f63e0b2acca34fdf42dc573e50877 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 27 Feb 2024 14:34:21 -0600 Subject: [PATCH 1/4] feat: pagination row count apis, new pagination docs --- docs/api/features/pagination.md | 34 ++- docs/guide/pagination.md | 205 +++++++++++++++++- .../react/pagination-controlled/package.json | 2 +- .../pagination-controlled/src/fetchData.ts | 3 +- .../react/pagination-controlled/src/index.css | 4 + .../react/pagination-controlled/src/main.tsx | 55 +++-- examples/react/pagination/src/index.css | 4 + examples/react/pagination/src/main.tsx | 135 ++++++------ .../table-core/src/features/Pagination.ts | 50 ++++- pnpm-lock.yaml | 104 +++------ 10 files changed, 404 insertions(+), 192 deletions(-) diff --git a/docs/api/features/pagination.md b/docs/api/features/pagination.md index 8403e604de..5e80d5a7a2 100644 --- a/docs/api/features/pagination.md +++ b/docs/api/features/pagination.md @@ -38,7 +38,15 @@ Enables manual pagination. If this option is set to `true`, the table will not a pageCount?: number ``` -When manually controlling pagination, you should supply a total `pageCount` value to the table if you know it. If you do not know how many pages there are, you can set this to `-1`. +When manually controlling pagination, you can supply a total `pageCount` value to the table if you know it. If you do not know how many pages there are, you can set this to `-1`. Alternatively, you can provide a `rowCount` value and the table will calculate the `pageCount` internally. + +### `rowCount` + +```tsx +rowCount?: number +``` + +When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. `pageCount` will be calculated internally from `rowCount` and `pageSize`. ### `autoResetPageIndex` @@ -118,14 +126,6 @@ resetPageSize: (defaultState?: boolean) => void Resets the page size to its initial state. If `defaultState` is `true`, the page size will be reset to `10` regardless of initial state. -### `setPageCount` - -```tsx -setPageCount: (updater: Updater) => void -``` - -Updates the page count using the provided function or value. - ### `getPageOptions` ```tsx @@ -166,6 +166,22 @@ nextPage: () => void Increments the page index by one, if possible. +### `firstPage` + +```tsx +firstPage: () => void +``` + +Sets the page index to `0`. + +### `lastPage` + +```tsx +lastPage: () => void +``` + +Sets the page index to the last available page. + ### `getPageCount` ```tsx diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index 7b6c41595e..33a9f4d4c2 100644 --- a/docs/guide/pagination.md +++ b/docs/guide/pagination.md @@ -7,7 +7,7 @@ title: Pagination Guide Want to skip to the implementation? Check out these examples: - [pagination](../framework/react/examples/pagination) -- [pagination-controlled](../framework/react/examples/pagination-controlled) +- [pagination-controlled (React Query)](../framework/react/examples/pagination-controlled) - [editable-data](../framework/react/examples/editable-data) - [expanding](../framework/react/examples/expanding) - [filters](../framework/react/examples/filters) @@ -18,4 +18,205 @@ Want to skip to the implementation? Check out these examples: [Pagination API](../api/features/pagination) -## Pagination Guide \ No newline at end of file +## Pagination Guide + +TanStack Table has great support for both client-side and server-side pagination. This guide will walk you through the different ways to implement pagination in your table. + +### Client-Side Pagination + +Using client-side pagination means that the `data` that you fetch will contain ***ALL*** of the rows for the table, and the table instance will handle pagination logic in the front-end. + +#### Should You Use Client-Side Pagination? + +Client-side pagination is usually the simplest way to implement pagination when using TanStack Table, but it might not be practical for very large datasets. + +However, a lot of people underestimate just how much data can be handled client-side. If your table will only ever have a few thousand rows or less, client-side pagination can still be a viable option. TanStack Table is designed to scale up to 10s of thousands of rows with decent performance for pagination, filtering, sorting, and grouping. The [official pagination example](../framework/react/examples/pagination) loads 100,000 rows and still performs well, albeit with only handful of columns. + +Every use-case is different and will depend on the complexity of the table, how many columns you have, how large every piece of data is, etc. The main bottlenecks to pay attention to are: + +1. Can your server query all of the data in a reasonable amount of time (and cost)? +2. What is the total size of the fetch? (This might not scale as badly as you think if you don't have many columns.) +3. Is the client's browser using too much memory if all of the data is loaded at once? + +If you're not sure, you can always start with client-side pagination and then switch to server-side pagination in the future as your data grows. + +#### Should You Use Virtualization Instead? + +Alternatively, instead of paginating the data, you can render all rows of a large dataset on the same page, but only use the browser's resources to render the rows that are visible in the viewport. This strategy is often called "virtualization" or "windowing". TanStack offers a virtualization library called [TanStack Virtual](https://tanstack.com/virtual/latest) that can work well with TanStack Table. The UI/UX of both virtualization and pagination have their own trade-offs, so see which one works best for your use-case. + +#### Pagination Row Model + +If you want to take advantage of the built-in client-side pagination in TanStack Table, you first need to pass in the pagination row model. + +```jsx +import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; +//... +const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), //load client-side pagination code +}); +``` + +### Manual Server-Side Pagination + +If you decide that you need to use server-side pagination, here is how you can implement it. + +No pagination row model is needed for server-side pagination, but if you have provided it for other tables that do need it in a shared component, you can still turn off the client-side pagination by setting the `manualPagination` option to `true`. Setting to the `manualPagination` option to `true` will tell the table instance to use the `table.getPrePaginationRowModel` row model under the hood, and it will make the table instance assume that the `data` that you pass in is already paginated. + +#### Page Count and Row Count + +Also, the table instance will have no way of knowing how many rows/pages there are in total in your back-end unless you tell it. Provide either the `rowCount` or `pageCount` table option to let the table instance know how many pages there are in total. If you provide a `rowCount`, the table instance will calculate the `pageCount` internally from `rowCount` and `pageSize`. Otherwise, you can directly provide the `pageCount` if you already have it. If you don't know the page count, you can just pass in `-1` for the `pageCount`, but the `getCanNextPage` and `getCanPreviousPage` row model functions will always return `true` in this case. + +```jsx +import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; +//... +const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + // getPaginationRowModel: getPaginationRowModel(), //not needed for server-side pagination + manualPagination: true, //turn off client-side pagination + rowCount: dataQuery.data?.rowCount, //pass in the total row count so the table knows how many pages there are (pageCount calculated internally if not provided) + // pageCount: dataQuery.data?.pageCount, //alternatively directly pass in pageCount instead of rowCount +}); +``` + +> **Note**: Setting the `manualPagination` option to `true` will make the table instance assume that the `data` that you pass in is already paginated. + +### Pagination State + +Whether or not you are using client-side or manual server-side pagination, you can use the built-in `pagination` state state and APIs. + +The `pagination` state is an object that contains the following properties: + +- `pageIndex`: The current page index (zero-based). +- `pageSize`: The current page size. + +You can manage the `pagination` state just like any other state in the table instance. + +```jsx +import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; +//... +const [pagination, setPagination] = useState({ + pageIndex: 0, //initial page index + pageSize: 10, //default page size +}); + +const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + onPaginationChange: setPagination, //update the pagination state when internal APIs mutate the pagination state + state: { + //... + pagination, + }, +}); +``` + +Alternatively, if you have no need for managing the `pagination` state in your own scope, but you need to set different initial values for the `pageIndex` and `pageSize`, you can use the `initialState` option. + +```jsx +const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + initialState: { + pagination: { + pageIndex: 2, //custom initial page index + pageSize: 25, //custom default page size + }, + }, +}); +``` + +> **Note**: Do NOT pass the `pagination` state to both the `state` and `initialState` options. `state` will overwrite `initialState`. Only use one or the other. + +### Pagination Options + +Besides the `manualPagination`, `pageCount`, and `rowCount` options which are useful for manual server-side pagination (and discussed [above](#manual-server-side-pagination)), there is one other table option that is useful to understand. + +#### Auto Reset Page Index + +The `autoResetPageIndex` table option is true by default, and it will reset the `pageIndex` to `0` when page-altering state changes occur, such as when the `data` is updated, filters change, grouping changes, etc. This is useful to prevent the table from showing an empty page when the `pageIndex` is out of range. + +However, you can opt out of this behavior by setting the `autoResetPageIndex` option to `false`. + +```jsx +const table = useReactTable({ + columns, + data, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + autoResetPageIndex: false, //turn off auto reset of pageIndex +}); +``` + +Be aware, however, that if you turn off `autoResetPageIndex`, you may need to add some logic to handle resetting the `pageIndex` yourself to avoid showing empty pages. + +### Pagination APIs + +There are several pagination table instance APIs that are useful for hooking up your pagination UI components. + +#### Pagination Button APIs + +- `getCanPreviousPage`: Useful for disabling the "previous page" button when on the first page. +- `getCanNextPage`: Useful for disabling the "next page" button when there are no more pages. +- `previousPage`: Useful for going to the previous page. (Button click handler) +- `nextPage`: Useful for going to the next page. (Button click handler) +- `firstPage`: Useful for going to the first page. (Button click handler) +- `lastPage`: Useful for going to the last page. (Button click handler) +- `setPageIndex`: uUseful for a "go to page" input. +- `resetPageIndex`: Useful for resetting the table state to the original page index. +- `setPageSize`: Useful for a "page size" input/select +- `resetPageSize`: Useful for resetting the table state to the original page size. +- `setPagination`: Useful for setting all of the pagination state at once. +- `resetPagination`: Useful for resetting the table state to the original pagination state. + +```jsx + + + + + +``` + +#### Pagination Info APIs + +- `getPageCount`: Useful for showing the total number of pages. +- `getRowCount`: Useful for showing the total number of rows. diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json index 1c72a0a9ab..959331304a 100644 --- a/examples/react/pagination-controlled/package.json +++ b/examples/react/pagination-controlled/package.json @@ -13,7 +13,7 @@ "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-query": "^3.39.3" + "@tanstack/react-query": "^5.24.1" }, "devDependencies": { "@rollup/plugin-replace": "^5.0.5", diff --git a/examples/react/pagination-controlled/src/fetchData.ts b/examples/react/pagination-controlled/src/fetchData.ts index 01329e6468..53a51ea688 100644 --- a/examples/react/pagination-controlled/src/fetchData.ts +++ b/examples/react/pagination-controlled/src/fetchData.ts @@ -36,7 +36,7 @@ const newPerson = (): Person => { export function makeData(...lens: number[]) { const makeDataLevel = (depth = 0): Person[] => { const len = lens[depth]! - return range(len).map((d): Person => { + return range(len).map((_d): Person => { return { ...newPerson(), subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, @@ -62,5 +62,6 @@ export async function fetchData(options: { (options.pageIndex + 1) * options.pageSize ), pageCount: Math.ceil(data.length / options.pageSize), + rowCount: data.length, } } diff --git a/examples/react/pagination-controlled/src/index.css b/examples/react/pagination-controlled/src/index.css index 43c09e0f6b..28e95652af 100644 --- a/examples/react/pagination-controlled/src/index.css +++ b/examples/react/pagination-controlled/src/index.css @@ -24,3 +24,7 @@ tfoot { tfoot th { font-weight: normal; } + +button:disabled { + opacity: 0.5; +} diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx index 7c8017b72f..e0699e415e 100644 --- a/examples/react/pagination-controlled/src/main.tsx +++ b/examples/react/pagination-controlled/src/main.tsx @@ -1,7 +1,12 @@ import React from 'react' import ReactDOM from 'react-dom/client' -import { QueryClient, QueryClientProvider, useQuery } from 'react-query' +import { + keepPreviousData, + QueryClient, + QueryClientProvider, + useQuery, +} from '@tanstack/react-query' import './index.css' @@ -77,43 +82,30 @@ function App() { [] ) - const [{ pageIndex, pageSize }, setPagination] = - React.useState({ - pageIndex: 0, - pageSize: 10, - }) - - const fetchDataOptions = { - pageIndex, - pageSize, - } + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }) - const dataQuery = useQuery( - ['data', fetchDataOptions], - () => fetchData(fetchDataOptions), - { keepPreviousData: true } - ) + const dataQuery = useQuery({ + queryKey: ['data', pagination], + queryFn: () => fetchData(pagination), + placeholderData: keepPreviousData, // don't have 0 rows flash while changing pages/loading next page + }) const defaultData = React.useMemo(() => [], []) - const pagination = React.useMemo( - () => ({ - pageIndex, - pageSize, - }), - [pageIndex, pageSize] - ) - const table = useReactTable({ data: dataQuery.data?.rows ?? defaultData, columns, - pageCount: dataQuery.data?.pageCount ?? -1, + // pageCount: dataQuery.data?.pageCount ?? -1, //you can now pass in `rowCount` instead of pageCount and `pageCount` will be calculated internally (new in v8.13.0) + rowCount: dataQuery.data?.rowCount, // new in v8.13.0 - alternatively, just pass in `pageCount` directly state: { pagination, }, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), - manualPagination: true, + manualPagination: true, //we're doing manual "server-side" pagination // getPaginationRowModel: getPaginationRowModel(), // If only doing manual pagination, you don't need this debugTable: true, }) @@ -165,7 +157,7 @@ function App() {
-
{table.getRowModel().rows.length} Rows
+
+ Showing {table.getRowModel().rows.length.toLocaleString()} of{' '} + {dataQuery.data?.rowCount.toLocaleString()} Rows +
diff --git a/examples/react/pagination/src/index.css b/examples/react/pagination/src/index.css index 43c09e0f6b..28e95652af 100644 --- a/examples/react/pagination/src/index.css +++ b/examples/react/pagination/src/index.css @@ -24,3 +24,7 @@ tfoot { tfoot th { font-weight: normal; } + +button:disabled { + opacity: 0.5; +} diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx index f33292da2c..39e4163413 100644 --- a/examples/react/pagination/src/main.tsx +++ b/examples/react/pagination/src/main.tsx @@ -12,8 +12,8 @@ import { getFilteredRowModel, getPaginationRowModel, ColumnDef, - OnChangeFn, flexRender, + getSortedRowModel, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -24,53 +24,36 @@ function App() { const columns = React.useMemo[]>( () => [ { - header: 'Name', + accessorKey: 'firstName', + cell: info => info.getValue(), footer: props => props.column.id, - columns: [ - { - accessorKey: 'firstName', - cell: info => info.getValue(), - footer: props => props.column.id, - }, - { - accessorFn: row => row.lastName, - id: 'lastName', - cell: info => info.getValue(), - header: () => Last Name, - footer: props => props.column.id, - }, - ], }, { - header: 'Info', + accessorFn: row => row.lastName, + id: 'lastName', + cell: info => info.getValue(), + header: () => Last Name, + footer: props => props.column.id, + }, + { + accessorKey: 'age', + header: () => 'Age', + footer: props => props.column.id, + }, + { + accessorKey: 'visits', + header: () => Visits, + footer: props => props.column.id, + }, + { + accessorKey: 'status', + header: 'Status', + footer: props => props.column.id, + }, + { + accessorKey: 'progress', + header: 'Profile Progress', footer: props => props.column.id, - columns: [ - { - accessorKey: 'age', - header: () => 'Age', - footer: props => props.column.id, - }, - { - header: 'More Info', - columns: [ - { - accessorKey: 'visits', - header: () => Visits, - footer: props => props.column.id, - }, - { - accessorKey: 'status', - header: 'Status', - footer: props => props.column.id, - }, - { - accessorKey: 'progress', - header: 'Profile Progress', - footer: props => props.column.id, - }, - ], - }, - ], }, ], [] @@ -105,15 +88,25 @@ function Table({ data: Person[] columns: ColumnDef[] }) { + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }) + const table = useReactTable({ - data, columns, - // Pipeline + data, + debugTable: true, getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), getPaginationRowModel: getPaginationRowModel(), - // - debugTable: true, + onPaginationChange: setPagination, + //no need to pass pageCount or rowCount with client-side pagination as it is calculated automatically + state: { + pagination, + }, + // autoResetPageIndex: false, // turn off page index reset when sorting or filtering }) return ( @@ -126,19 +119,28 @@ function Table({ {headerGroup.headers.map(header => { return ( - {header.isPlaceholder ? null : ( -
- {flexRender( - header.column.columnDef.header, - header.getContext() - )} - {header.column.getCanFilter() ? ( -
- -
- ) : null} -
- )} +
+ {flexRender( + header.column.columnDef.header, + header.getContext() + )} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} + {header.column.getCanFilter() ? ( +
+ +
+ ) : null} +
) })} @@ -168,7 +170,7 @@ function Table({
-
{table.getRowModel().rows.length} Rows
+
+ Showing {table.getRowModel().rows.length.toLocaleString()} of{' '} + {table.getRowCount().toLocaleString()} Rows + 
{JSON.stringify(table.getState().pagination, null, 2)}
) diff --git a/packages/table-core/src/features/Pagination.ts b/packages/table-core/src/features/Pagination.ts index a20e9bbebe..aa9151bedf 100644 --- a/packages/table-core/src/features/Pagination.ts +++ b/packages/table-core/src/features/Pagination.ts @@ -48,11 +48,17 @@ export interface PaginationOptions { */ onPaginationChange?: OnChangeFn /** - * When manually controlling pagination, you should supply a total `pageCount` value to the table if you know it. If you do not know how many pages there are, you can set this to `-1`. + * When manually controlling pagination, you can supply a total `pageCount` value to the table if you know it (Or supply a `rowCount` and `pageCount` will be calculated). If you do not know how many pages there are, you can set this to `-1`. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#pagecount) * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) */ pageCount?: number + /** + * When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. The `pageCount` can be calculated from this value and the `pageSize`. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#rowcount) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) + */ + rowCount?: number } export interface PaginationDefaultOptions { @@ -80,6 +86,12 @@ export interface PaginationInstance { * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) */ getPageCount: () => number + /** + * Returns the row count. If manually paginating or controlling the pagination state, this will come directly from the `options.rowCount` table option, otherwise it will be calculated from the table data. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#getrowcount) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) + */ + getRowCount: () => number /** * Returns an array of page options (zero-index-based) for the current page size. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#getpageoptions) @@ -110,6 +122,18 @@ export interface PaginationInstance { * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) */ previousPage: () => void + /** + * Sets the page index to `0`. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#firstpage) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) + */ + firstPage: () => void + /** + * Sets the page index to the last page. + * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#lastpage) + * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) + */ + lastPage: () => void /** * Resets the page index to its initial state. If `defaultState` is `true`, the page index will be reset to `0` regardless of initial state. * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#resetpageindex) @@ -129,9 +153,7 @@ export interface PaginationInstance { */ resetPagination: (defaultState?: boolean) => void /** - * Updates the page count using the provided function or value. - * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#setpagecount) - * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination) + * @deprecated The page count no longer exists in the pagination state. Just pass as a table option instead. */ setPageCount: (updater: Updater) => void /** @@ -269,6 +291,7 @@ export const Pagination: TableFeature = { } }) } + //deprecated table.setPageCount = updater => table.setPagination(old => { let newPageCount = functionalUpdate( @@ -326,6 +349,14 @@ export const Pagination: TableFeature = { }) } + table.firstPage = () => { + return table.setPageIndex(0) + } + + table.lastPage = () => { + return table.setPageIndex(table.getPageCount() - 1) + } + table.getPrePaginationRowModel = () => table.getExpandedRowModel() table.getPaginationRowModel = () => { if ( @@ -346,10 +377,13 @@ export const Pagination: TableFeature = { table.getPageCount = () => { return ( table.options.pageCount ?? - Math.ceil( - table.getPrePaginationRowModel().rows.length / - table.getState().pagination.pageSize - ) + Math.ceil(table.getRowCount() / table.getState().pagination.pageSize) + ) + } + + table.getRowCount = () => { + return ( + table.options.rowCount ?? table.getPrePaginationRowModel().rows.length ) } }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89a7b7d38c..c30aacb40a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -781,6 +781,9 @@ importers: '@faker-js/faker': specifier: ^8.3.1 version: 8.3.1 + '@tanstack/react-query': + specifier: ^5.24.1 + version: 5.24.1(react@18.2.0) '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -790,9 +793,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) - react-query: - specifier: ^3.39.3 - version: 3.39.3(react-dom@18.2.0)(react@18.2.0) devDependencies: '@rollup/plugin-replace': specifier: ^5.0.5 @@ -4899,6 +4899,10 @@ packages: resolution: {integrity: sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==} dev: false + /@tanstack/query-core@5.24.1: + resolution: {integrity: sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==} + dev: false + /@tanstack/react-query@5.17.12(react@18.2.0): resolution: {integrity: sha512-mJQ+3da1ug4t9b+GycUuNzMs5hd6t+F4tJ1hqyaN/dlETP+bWwYwrv2GXFIbZIfI1K1Hu+XWZ6HUhRPbNtZ4QQ==} peerDependencies: @@ -4908,6 +4912,15 @@ packages: react: 18.2.0 dev: false + /@tanstack/react-query@5.24.1(react@18.2.0): + resolution: {integrity: sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==} + peerDependencies: + react: ^18.0.0 + dependencies: + '@tanstack/query-core': 5.24.1 + react: 18.2.0 + dev: false + /@tanstack/react-virtual@3.0.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==} peerDependencies: @@ -5735,6 +5748,7 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + dev: true /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -5746,11 +5760,6 @@ packages: require-from-string: 2.0.2 dev: true - /big-integer@1.6.51: - resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==} - engines: {node: '>=0.6'} - dev: false - /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} @@ -5784,6 +5793,7 @@ packages: dependencies: balanced-match: 1.0.2 concat-map: 0.0.1 + dev: true /brace-expansion@2.0.1: resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} @@ -5798,19 +5808,6 @@ packages: fill-range: 7.0.1 dev: true - /broadcast-channel@3.7.0: - resolution: {integrity: sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==} - dependencies: - '@babel/runtime': 7.21.0 - detect-node: 2.1.0 - js-sha3: 0.8.0 - microseconds: 0.2.0 - nano-time: 1.0.0 - oblivious-set: 1.0.0 - rimraf: 3.0.2 - unload: 2.2.0 - dev: false - /browserslist@4.22.2: resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} @@ -6072,6 +6069,7 @@ packages: /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + dev: true /conventional-changelog-angular@7.0.0: resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==} @@ -6288,10 +6286,6 @@ packages: engines: {node: '>=8'} dev: true - /detect-node@2.1.0: - resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==} - dev: false - /dettle@1.0.1: resolution: {integrity: sha512-/oD3At60ZfhgzpofJtyClNTrIACyMdRe+ih0YiHzAniN0IZnLdLpEzgR6RtGs3kowxUkTnvV/4t1FBxXMUdusQ==} dev: true @@ -6768,6 +6762,7 @@ packages: /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} + dev: true /fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} @@ -6872,6 +6867,7 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 + dev: true /glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} @@ -7099,9 +7095,11 @@ packages: dependencies: once: 1.4.0 wrappy: 1.0.2 + dev: true /inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} + dev: true /ini-simple-parser@1.0.0: resolution: {integrity: sha512-cZUGzkBd1W8FoIbFNMbscMvIGwp+riO/4PaPAy2owQp0sja+ni6Yty11GBNnxaI1ePkSVXzPb8iMOOYuYw/MOQ==} @@ -7455,10 +7453,6 @@ packages: resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==} dev: true - /js-sha3@0.8.0: - resolution: {integrity: sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==} - dev: false - /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -7787,13 +7781,6 @@ packages: engines: {node: '>=4'} dev: true - /match-sorter@6.3.1: - resolution: {integrity: sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==} - dependencies: - '@babel/runtime': 7.21.0 - remove-accents: 0.4.2 - dev: false - /mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} dev: true @@ -7843,10 +7830,6 @@ packages: picomatch: 2.3.1 dev: true - /microseconds@0.2.0: - resolution: {integrity: sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==} - dev: false - /mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} @@ -7889,6 +7872,7 @@ packages: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: brace-expansion: 1.1.11 + dev: true /minimatch@5.1.6: resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} @@ -7942,12 +7926,6 @@ packages: resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==} dev: true - /nano-time@1.0.0: - resolution: {integrity: sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==} - dependencies: - big-integer: 1.6.51 - dev: false - /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -8197,14 +8175,11 @@ packages: isobject: 3.0.1 dev: true - /oblivious-set@1.0.0: - resolution: {integrity: sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==} - dev: false - /once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: wrappy: 1.0.2 + dev: true /onetime@5.1.2: resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==} @@ -8322,6 +8297,7 @@ packages: /path-is-absolute@1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} + dev: true /path-key@2.0.1: resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==} @@ -8644,25 +8620,6 @@ packages: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} dev: false - /react-query@3.39.3(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: '*' - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true - dependencies: - '@babel/runtime': 7.21.0 - broadcast-channel: 3.7.0 - match-sorter: 6.3.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} engines: {node: '>=0.10.0'} @@ -8883,6 +8840,7 @@ packages: hasBin: true dependencies: glob: 7.2.3 + dev: true /rimraf@5.0.5: resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==} @@ -9966,13 +9924,6 @@ packages: engines: {node: '>= 10.0.0'} dev: true - /unload@2.2.0: - resolution: {integrity: sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==} - dependencies: - '@babel/runtime': 7.21.0 - detect-node: 2.1.0 - dev: false - /update-browserslist-db@1.0.13(browserslist@4.22.2): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true @@ -10448,6 +10399,7 @@ packages: /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + dev: true /ws@8.16.0: resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==} From 7f8a38f624ed33783593fbaba5427a861900e024 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 27 Feb 2024 14:49:10 -0600 Subject: [PATCH 2/4] same version of react query in every example --- .../react/pagination-controlled/package.json | 4 ++-- .../virtualized-infinite-scrolling/package.json | 2 +- pnpm-lock.yaml | 17 ++--------------- 3 files changed, 5 insertions(+), 18 deletions(-) diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json index 959331304a..8c1bbb8a06 100644 --- a/examples/react/pagination-controlled/package.json +++ b/examples/react/pagination-controlled/package.json @@ -10,10 +10,10 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", + "@tanstack/react-query": "^5.24.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", - "react-dom": "^18.2.0", - "@tanstack/react-query": "^5.24.1" + "react-dom": "^18.2.0" }, "devDependencies": { "@rollup/plugin-replace": "^5.0.5", diff --git a/examples/react/virtualized-infinite-scrolling/package.json b/examples/react/virtualized-infinite-scrolling/package.json index 58c15f6add..0b6aba7638 100644 --- a/examples/react/virtualized-infinite-scrolling/package.json +++ b/examples/react/virtualized-infinite-scrolling/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "@faker-js/faker": "^8.3.1", - "@tanstack/react-query": "5.17.12", + "@tanstack/react-query": "^5.24.1", "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c30aacb40a..eecfbab454 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1017,8 +1017,8 @@ importers: specifier: ^8.3.1 version: 8.3.1 '@tanstack/react-query': - specifier: 5.17.12 - version: 5.17.12(react@18.2.0) + specifier: ^5.24.1 + version: 5.24.1(react@18.2.0) '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -4895,23 +4895,10 @@ packages: - vite dev: true - /@tanstack/query-core@5.17.10: - resolution: {integrity: sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==} - dev: false - /@tanstack/query-core@5.24.1: resolution: {integrity: sha512-DZ6Nx9p7BhjkG50ayJ+MKPgff+lMeol7QYXkvuU5jr2ryW/4ok5eanaS9W5eooA4xN0A/GPHdLGOZGzArgf5Cg==} dev: false - /@tanstack/react-query@5.17.12(react@18.2.0): - resolution: {integrity: sha512-mJQ+3da1ug4t9b+GycUuNzMs5hd6t+F4tJ1hqyaN/dlETP+bWwYwrv2GXFIbZIfI1K1Hu+XWZ6HUhRPbNtZ4QQ==} - peerDependencies: - react: ^18.0.0 - dependencies: - '@tanstack/query-core': 5.17.10 - react: 18.2.0 - dev: false - /@tanstack/react-query@5.24.1(react@18.2.0): resolution: {integrity: sha512-4+09JEdO4d6+Gc8Y/g2M/MuxDK5IY0QV8+2wL2304wPKJgJ54cBbULd3nciJ5uvh/as8rrxx6s0mtIwpRuGd1g==} peerDependencies: From 50bf3ce1309ffea96da46b6a3e2eeebe3868573b Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 27 Feb 2024 14:54:04 -0600 Subject: [PATCH 3/4] merge main --- docs/guide/pagination.md | 2 ++ pnpm-lock.yaml | 8 ++++++++ 2 files changed, 10 insertions(+) diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index 33a9f4d4c2..b900926e73 100644 --- a/docs/guide/pagination.md +++ b/docs/guide/pagination.md @@ -177,6 +177,8 @@ There are several pagination table instance APIs that are useful for hooking up - `setPagination`: Useful for setting all of the pagination state at once. - `resetPagination`: Useful for resetting the table state to the original pagination state. +> **Note**: Some of these APIs are new in `v8.13.0` + ```jsx