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..b900926e73 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,207 @@ 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. + +> **Note**: Some of these APIs are new in `v8.13.0` + +```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/bootstrap/package.json b/examples/react/bootstrap/package.json index a92c8f79ae..8f995eddd4 100644 --- a/examples/react/bootstrap/package.json +++ b/examples/react/bootstrap/package.json @@ -16,7 +16,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@types/bootstrap": "^5.2.10", "@types/react": "^18.2.48", diff --git a/examples/react/column-dnd/package.json b/examples/react/column-dnd/package.json index 6f88920bbf..d0eb0af8aa 100644 --- a/examples/react/column-dnd/package.json +++ b/examples/react/column-dnd/package.json @@ -13,7 +13,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/column-ordering/package.json b/examples/react/column-ordering/package.json index 865652fd80..0eee6da1a6 100644 --- a/examples/react/column-ordering/package.json +++ b/examples/react/column-ordering/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/column-pinning-sticky/package.json b/examples/react/column-pinning-sticky/package.json index 3d3855e535..47507ce0bb 100644 --- a/examples/react/column-pinning-sticky/package.json +++ b/examples/react/column-pinning-sticky/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/column-pinning/package.json b/examples/react/column-pinning/package.json index 333606c45e..656dae4c51 100644 --- a/examples/react/column-pinning/package.json +++ b/examples/react/column-pinning/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/column-resizing-performant/package.json b/examples/react/column-resizing-performant/package.json index 9bd3801fa6..1837f8abfb 100644 --- a/examples/react/column-resizing-performant/package.json +++ b/examples/react/column-resizing-performant/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/editable-data/package.json b/examples/react/editable-data/package.json index 9140c48040..71a86c6a1a 100644 --- a/examples/react/editable-data/package.json +++ b/examples/react/editable-data/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/expanding/package.json b/examples/react/expanding/package.json index 9061eef060..a9b854d777 100644 --- a/examples/react/expanding/package.json +++ b/examples/react/expanding/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/filters/package.json b/examples/react/filters/package.json index a9b95aa221..8faee05c52 100644 --- a/examples/react/filters/package.json +++ b/examples/react/filters/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/match-sorter-utils": "^8.11.8", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", diff --git a/examples/react/full-width-resizable-table/package.json b/examples/react/full-width-resizable-table/package.json index 5c449956dd..39df2f06cc 100755 --- a/examples/react/full-width-resizable-table/package.json +++ b/examples/react/full-width-resizable-table/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/full-width-table/package.json b/examples/react/full-width-table/package.json index ea6ce04a59..6dad32ab53 100755 --- a/examples/react/full-width-table/package.json +++ b/examples/react/full-width-table/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/fully-controlled/package.json b/examples/react/fully-controlled/package.json index 42e45c4fb4..e2d07f38ac 100644 --- a/examples/react/fully-controlled/package.json +++ b/examples/react/fully-controlled/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/grouping/package.json b/examples/react/grouping/package.json index 4bd6268bdb..4d75bb5092 100644 --- a/examples/react/grouping/package.json +++ b/examples/react/grouping/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/kitchen-sink/package.json b/examples/react/kitchen-sink/package.json index 9e97a9cea8..bb97c713bf 100644 --- a/examples/react/kitchen-sink/package.json +++ b/examples/react/kitchen-sink/package.json @@ -19,7 +19,7 @@ "devDependencies": { "@emotion/babel-plugin": "^11.11.0", "@emotion/babel-plugin-jsx-pragmatic": "^0.2.1", - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", diff --git a/examples/react/material-ui-pagination/package.json b/examples/react/material-ui-pagination/package.json index 4be0c06c2f..51a21dc67e 100644 --- a/examples/react/material-ui-pagination/package.json +++ b/examples/react/material-ui-pagination/package.json @@ -18,7 +18,7 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json index 1c72a0a9ab..22d3492c28 100644 --- a/examples/react/pagination-controlled/package.json +++ b/examples/react/pagination-controlled/package.json @@ -9,11 +9,11 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", + "@tanstack/react-query": "^5.24.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-query": "^3.39.3" + "react-dom": "^18.2.0" }, "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/package.json b/examples/react/pagination/package.json index 69b9c2112a..a373eee1f9 100644 --- a/examples/react/pagination/package.json +++ b/examples/react/pagination/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" 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/examples/react/row-dnd/package.json b/examples/react/row-dnd/package.json index a8b68bedb1..7141bcb661 100644 --- a/examples/react/row-dnd/package.json +++ b/examples/react/row-dnd/package.json @@ -13,7 +13,7 @@ "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/row-pinning/package.json b/examples/react/row-pinning/package.json index d9326ce134..0ae4c3e9e7 100644 --- a/examples/react/row-pinning/package.json +++ b/examples/react/row-pinning/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/row-selection/package.json b/examples/react/row-selection/package.json index 98b2ed5e0a..97742b8a4c 100644 --- a/examples/react/row-selection/package.json +++ b/examples/react/row-selection/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/sorting/package.json b/examples/react/sorting/package.json index cf132fe767..f7bce2549e 100644 --- a/examples/react/sorting/package.json +++ b/examples/react/sorting/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/sub-components/package.json b/examples/react/sub-components/package.json index d85e723b70..1ad3425c07 100644 --- a/examples/react/sub-components/package.json +++ b/examples/react/sub-components/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/virtualized-columns/package.json b/examples/react/virtualized-columns/package.json index e633c496b5..14eba11e9c 100644 --- a/examples/react/virtualized-columns/package.json +++ b/examples/react/virtualized-columns/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", diff --git a/examples/react/virtualized-infinite-scrolling/package.json b/examples/react/virtualized-infinite-scrolling/package.json index 58c15f6add..a008f0eff3 100644 --- a/examples/react/virtualized-infinite-scrolling/package.json +++ b/examples/react/virtualized-infinite-scrolling/package.json @@ -9,8 +9,8 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", - "@tanstack/react-query": "5.17.12", + "@faker-js/faker": "^8.4.1", + "@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/examples/react/virtualized-rows/package.json b/examples/react/virtualized-rows/package.json index b6b5f07f86..4bf3a4604d 100644 --- a/examples/react/virtualized-rows/package.json +++ b/examples/react/virtualized-rows/package.json @@ -9,7 +9,7 @@ "start": "vite" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/react-table": "^8.12.0", "@tanstack/react-virtual": "^3.0.1", "react": "^18.2.0", diff --git a/examples/solid/bootstrap/package.json b/examples/solid/bootstrap/package.json index fefcbcac81..b18e1bab0a 100644 --- a/examples/solid/bootstrap/package.json +++ b/examples/solid/bootstrap/package.json @@ -10,7 +10,7 @@ }, "license": "MIT", "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "typescript": "5.3.3", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" diff --git a/examples/solid/column-ordering/package.json b/examples/solid/column-ordering/package.json index c67dcad584..f4132540fc 100644 --- a/examples/solid/column-ordering/package.json +++ b/examples/solid/column-ordering/package.json @@ -10,7 +10,7 @@ }, "license": "MIT", "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "typescript": "5.3.3", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" diff --git a/examples/solid/filters/package.json b/examples/solid/filters/package.json index fe48eaebd3..c17996e0fd 100644 --- a/examples/solid/filters/package.json +++ b/examples/solid/filters/package.json @@ -10,7 +10,7 @@ }, "license": "MIT", "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "typescript": "5.3.3", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" diff --git a/examples/solid/sorting/package.json b/examples/solid/sorting/package.json index d1b35e3d3e..59dc358e03 100644 --- a/examples/solid/sorting/package.json +++ b/examples/solid/sorting/package.json @@ -10,7 +10,7 @@ }, "license": "MIT", "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "typescript": "5.3.3", "vite": "^5.0.11", "vite-plugin-solid": "^2.8.0" diff --git a/examples/svelte/column-ordering/package.json b/examples/svelte/column-ordering/package.json index cf72c1dfd7..2cf2dcc473 100644 --- a/examples/svelte/column-ordering/package.json +++ b/examples/svelte/column-ordering/package.json @@ -10,7 +10,7 @@ "test:types": "svelte-check --tsconfig ./tsconfig.json" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", "@tanstack/svelte-table": "^8.12.0", diff --git a/examples/svelte/column-pinning/package.json b/examples/svelte/column-pinning/package.json index 9936276a93..d590568319 100644 --- a/examples/svelte/column-pinning/package.json +++ b/examples/svelte/column-pinning/package.json @@ -10,7 +10,7 @@ "test:types": "svelte-check --tsconfig ./tsconfig.json" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", "@tanstack/svelte-table": "^8.12.0", diff --git a/examples/svelte/filtering/package.json b/examples/svelte/filtering/package.json index 7e6c595996..dc14ccd851 100644 --- a/examples/svelte/filtering/package.json +++ b/examples/svelte/filtering/package.json @@ -10,7 +10,7 @@ "test:types": "svelte-check --tsconfig ./tsconfig.json" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", "@tanstack/match-sorter-utils": "^8.11.8", diff --git a/examples/svelte/sorting/package.json b/examples/svelte/sorting/package.json index 18c19891da..1d6539567c 100644 --- a/examples/svelte/sorting/package.json +++ b/examples/svelte/sorting/package.json @@ -10,7 +10,7 @@ "test:types": "svelte-check --tsconfig ./tsconfig.json" }, "devDependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-replace": "^5.0.5", "@sveltejs/vite-plugin-svelte": "^3.0.1", "@tanstack/svelte-table": "^8.12.0", diff --git a/examples/vue/column-ordering/package.json b/examples/vue/column-ordering/package.json index 4fd9ea224d..44e9964b62 100644 --- a/examples/vue/column-ordering/package.json +++ b/examples/vue/column-ordering/package.json @@ -7,7 +7,7 @@ "preview": "vite preview" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "vue": "^3.4.14", "@tanstack/vue-table": "^8.12.0" }, diff --git a/examples/vue/column-pinning/package.json b/examples/vue/column-pinning/package.json index 25d3312fa3..65f194f326 100644 --- a/examples/vue/column-pinning/package.json +++ b/examples/vue/column-pinning/package.json @@ -7,7 +7,7 @@ "preview": "vite preview" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/vue-table": "^8.12.0", "vue": "^3.4.14" }, diff --git a/examples/vue/pagination-controlled/package.json b/examples/vue/pagination-controlled/package.json index cc604ea537..fdfa9b1fc5 100644 --- a/examples/vue/pagination-controlled/package.json +++ b/examples/vue/pagination-controlled/package.json @@ -9,7 +9,7 @@ "test:types": "vue-tsc" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "vue": "^3.4.14", "@tanstack/vue-table": "^8.12.0" }, diff --git a/examples/vue/pagination/package.json b/examples/vue/pagination/package.json index 89600259f5..2bf9e6c555 100644 --- a/examples/vue/pagination/package.json +++ b/examples/vue/pagination/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "vue": "^3.4.14", - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@tanstack/vue-table": "^8.12.0" }, "devDependencies": { diff --git a/examples/vue/sorting/package.json b/examples/vue/sorting/package.json index f0e4a7fa13..668de5737b 100644 --- a/examples/vue/sorting/package.json +++ b/examples/vue/sorting/package.json @@ -9,7 +9,7 @@ "test:types": "vue-tsc" }, "dependencies": { - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "vue": "^3.4.14", "@tanstack/vue-table": "^8.12.0" }, diff --git a/package.json b/package.json index 4b117034d3..c9d21de5a5 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@babel/preset-env": "^7.23.8", "@babel/preset-react": "^7.23.3", "@babel/preset-typescript": "^7.23.3", - "@faker-js/faker": "^8.3.1", + "@faker-js/faker": "^8.4.1", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", 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..e01f374dee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^7.23.3 version: 7.23.3(@babel/core@7.23.7) '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-babel': specifier: ^6.0.4 version: 6.0.4(@babel/core@7.23.7)(rollup@4.9.5) @@ -161,8 +161,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -200,8 +200,8 @@ importers: specifier: ^3.2.2 version: 3.2.2(react@18.2.0) '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -259,8 +259,8 @@ importers: examples/react/column-ordering: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -290,8 +290,8 @@ importers: examples/react/column-pinning: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -321,8 +321,8 @@ importers: examples/react/column-pinning-sticky: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -352,8 +352,8 @@ importers: examples/react/column-resizing-performant: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -439,8 +439,8 @@ importers: examples/react/editable-data: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -470,8 +470,8 @@ importers: examples/react/expanding: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -501,8 +501,8 @@ importers: examples/react/filters: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/match-sorter-utils': specifier: ^8.11.8 version: link:../../../packages/match-sorter-utils @@ -535,8 +535,8 @@ importers: examples/react/full-width-resizable-table: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -566,8 +566,8 @@ importers: examples/react/full-width-table: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -597,8 +597,8 @@ importers: examples/react/fully-controlled: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -628,8 +628,8 @@ importers: examples/react/grouping: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -684,8 +684,8 @@ importers: specifier: ^0.2.1 version: 0.2.1(@babel/core@7.23.7) '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -727,8 +727,8 @@ importers: version: 18.2.0(react@18.2.0) devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -748,8 +748,8 @@ importers: examples/react/pagination: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -779,8 +779,11 @@ importers: examples/react/pagination-controlled: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.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 @@ -825,8 +825,8 @@ importers: specifier: ^3.2.2 version: 3.2.2(react@18.2.0) '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -856,8 +856,8 @@ importers: examples/react/row-pinning: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -887,8 +887,8 @@ importers: examples/react/row-selection: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -918,8 +918,8 @@ importers: examples/react/sorting: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -949,8 +949,8 @@ importers: examples/react/sub-components: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -980,8 +980,8 @@ importers: examples/react/virtualized-columns: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -1014,11 +1014,11 @@ importers: examples/react/virtualized-infinite-scrolling: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.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 @@ -1051,8 +1051,8 @@ importers: examples/react/virtualized-rows: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/react-table': specifier: ^8.12.0 version: link:../../../packages/react-table @@ -1117,8 +1117,8 @@ importers: version: 1.8.11 devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 typescript: specifier: 5.3.3 version: 5.3.3 @@ -1158,8 +1158,8 @@ importers: version: 1.8.11 devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 typescript: specifier: 5.3.3 version: 5.3.3 @@ -1202,8 +1202,8 @@ importers: version: 1.8.11 devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 typescript: specifier: 5.3.3 version: 5.3.3 @@ -1224,8 +1224,8 @@ importers: version: 1.8.11 devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 typescript: specifier: 5.3.3 version: 5.3.3 @@ -1293,8 +1293,8 @@ importers: examples/svelte/column-ordering: devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -1323,8 +1323,8 @@ importers: examples/svelte/column-pinning: devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -1380,8 +1380,8 @@ importers: examples/svelte/filtering: devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -1413,8 +1413,8 @@ importers: examples/svelte/sorting: devDependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@rollup/plugin-replace': specifier: ^5.0.5 version: 5.0.5(rollup@4.9.5) @@ -1468,8 +1468,8 @@ importers: examples/vue/column-ordering: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -1496,8 +1496,8 @@ importers: examples/vue/column-pinning: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -1524,8 +1524,8 @@ importers: examples/vue/pagination: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -1552,8 +1552,8 @@ importers: examples/vue/pagination-controlled: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -1579,6 +1579,9 @@ importers: examples/vue/row-selection: dependencies: + '@faker-js/faker': + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -1608,8 +1611,8 @@ importers: examples/vue/sorting: dependencies: '@faker-js/faker': - specifier: ^8.3.1 - version: 8.3.1 + specifier: ^8.4.1 + version: 8.4.1 '@tanstack/vue-table': specifier: ^8.12.0 version: link:../../../packages/vue-table @@ -3668,8 +3671,8 @@ packages: dev: true optional: true - /@faker-js/faker@8.3.1: - resolution: {integrity: sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==} + /@faker-js/faker@8.4.1: + resolution: {integrity: sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'} /@floating-ui/core@1.5.3: @@ -4895,16 +4898,16 @@ packages: - vite dev: true - /@tanstack/query-core@5.17.10: - resolution: {integrity: sha512-bJ2oQUDBftvHcEkLS3gyzzShSeZpJyzNNRu8oHK13iNdsofyaDXtNO/c1Zy/PZYVX+PhqOXwoT42gMiEMRSSfQ==} + /@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==} + /@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.17.10 + '@tanstack/query-core': 5.24.1 react: 18.2.0 dev: false @@ -5735,6 +5738,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 +5750,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 +5783,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 +5798,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 +6059,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 +6276,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 +6752,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 +6857,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 +7085,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 +7443,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 +7771,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 +7820,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 +7862,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 +7916,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 +8165,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 +8287,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 +8610,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 +8830,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 +9914,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 +10389,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==}