From f6b6c7a7978ef1fe823d24ba4a747dc87bb6d836 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Sat, 17 Jan 2026 16:48:36 -0600 Subject: [PATCH] feat: add useLegacyTable hook for react-table --- .../react/basic-use-legacy-table/index.html | 14 + .../react/basic-use-legacy-table/package.json | 27 ++ .../basic-use-legacy-table/src/index.css | 26 ++ .../react/basic-use-legacy-table/src/main.tsx | 372 ++++++++++++++++++ .../basic-use-legacy-table/src/makeData.ts | 48 +++ .../basic-use-legacy-table/tsconfig.json | 25 ++ .../basic-use-legacy-table/vite.config.js | 17 + packages/react-table/src/index.ts | 1 + packages/react-table/src/useLegacyTable.ts | 370 +++++++++++++++++ pnpm-lock.yaml | 34 ++ 10 files changed, 934 insertions(+) create mode 100644 examples/react/basic-use-legacy-table/index.html create mode 100644 examples/react/basic-use-legacy-table/package.json create mode 100644 examples/react/basic-use-legacy-table/src/index.css create mode 100644 examples/react/basic-use-legacy-table/src/main.tsx create mode 100644 examples/react/basic-use-legacy-table/src/makeData.ts create mode 100644 examples/react/basic-use-legacy-table/tsconfig.json create mode 100644 examples/react/basic-use-legacy-table/vite.config.js create mode 100644 packages/react-table/src/useLegacyTable.ts diff --git a/examples/react/basic-use-legacy-table/index.html b/examples/react/basic-use-legacy-table/index.html new file mode 100644 index 0000000000..208fa50077 --- /dev/null +++ b/examples/react/basic-use-legacy-table/index.html @@ -0,0 +1,14 @@ + + + + + + TanStack Table - useLegacyTable Example + + + + +
+ + + diff --git a/examples/react/basic-use-legacy-table/package.json b/examples/react/basic-use-legacy-table/package.json new file mode 100644 index 0000000000..380cff3b51 --- /dev/null +++ b/examples/react/basic-use-legacy-table/package.json @@ -0,0 +1,27 @@ +{ + "name": "tanstack-table-example-basic-use-legacy-table", + "version": "0.0.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview", + "start": "vite", + "lint": "eslint ./src", + "test:types": "tsc" + }, + "dependencies": { + "@faker-js/faker": "^10.2.0", + "@tanstack/react-table": "^9.0.0-alpha.10", + "react": "^19.2.3", + "react-dom": "^19.2.3" + }, + "devDependencies": { + "@rollup/plugin-replace": "^6.0.3", + "@types/react": "^19.2.8", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^5.1.2", + "typescript": "5.9.3", + "vite": "^7.3.1" + } +} diff --git a/examples/react/basic-use-legacy-table/src/index.css b/examples/react/basic-use-legacy-table/src/index.css new file mode 100644 index 0000000000..43c09e0f6b --- /dev/null +++ b/examples/react/basic-use-legacy-table/src/index.css @@ -0,0 +1,26 @@ +html { + font-family: sans-serif; + font-size: 14px; +} + +table { + border: 1px solid lightgray; +} + +tbody { + border-bottom: 1px solid lightgray; +} + +th { + border-bottom: 1px solid lightgray; + border-right: 1px solid lightgray; + padding: 2px 4px; +} + +tfoot { + color: gray; +} + +tfoot th { + font-weight: normal; +} diff --git a/examples/react/basic-use-legacy-table/src/main.tsx b/examples/react/basic-use-legacy-table/src/main.tsx new file mode 100644 index 0000000000..3ab27ac9ba --- /dev/null +++ b/examples/react/basic-use-legacy-table/src/main.tsx @@ -0,0 +1,372 @@ +/** + * This example demonstrates the useLegacyTable hook which provides + * a v8-style API for easier migration from TanStack Table v8 to v9. + * + * Key differences from the v9 useTable hook: + * - No need to define _features - all stock features are included + * - Uses v8-style get*RowModel() options instead of _rowModels + * - Subscribes to all state automatically (like v8 behavior) + * + * NOTE: useLegacyTable is deprecated and intended only as a migration aid. + * New code should use useTable with explicit _features and _rowModels. + */ +import React from 'react' +import ReactDOM from 'react-dom/client' +import './index.css' +import { + createColumnHelper, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useLegacyTable, +} from '@tanstack/react-table' +import { makeData } from './makeData' +import type { + CellData, + Column, + RowData, + StockFeatures, + TableFeatures, +} from '@tanstack/react-table' +import type { Person } from './makeData' + +declare module '@tanstack/react-table' { + // allows us to define custom properties for our columns + interface ColumnMeta< + TFeatures extends TableFeatures, + TData extends RowData, + TValue extends CellData = CellData, + > { + filterVariant?: 'text' | 'range' | 'select' + } +} + +// With useLegacyTable, we use StockFeatures since all features are included +const columnHelper = createColumnHelper() + +function App() { + const rerender = React.useReducer(() => ({}), {})[1] + + const columns = React.useMemo( + () => + columnHelper.columns([ + columnHelper.accessor('firstName', { + cell: (info) => info.getValue(), + }), + columnHelper.accessor((row) => row.lastName, { + id: 'lastName', + cell: (info) => info.getValue(), + header: () => Last Name, + }), + columnHelper.accessor((row) => `${row.firstName} ${row.lastName}`, { + id: 'fullName', + header: 'Full Name', + cell: (info) => info.getValue(), + }), + columnHelper.accessor('age', { + header: () => 'Age', + meta: { + filterVariant: 'range', + }, + }), + columnHelper.accessor('visits', { + header: () => Visits, + meta: { + filterVariant: 'range', + }, + }), + columnHelper.accessor('status', { + header: 'Status', + meta: { + filterVariant: 'select', + }, + }), + columnHelper.accessor('progress', { + header: 'Profile Progress', + meta: { + filterVariant: 'range', + }, + }), + ]), + [], + ) + + const [data, setData] = React.useState>(() => makeData(5_000)) + const refreshData = () => setData((_old) => makeData(50_000)) // stress test + + // Using useLegacyTable with the v8-style API! + // Notice how we use get*RowModel() options instead of _rowModels + // and we don't need to define _features + const table = useLegacyTable({ + data, + columns, + // V8-style row model options (these are mapped to v9 _rowModels under the hood) + getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), // client side filtering + getSortedRowModel: getSortedRowModel(), // client side sorting + getPaginationRowModel: getPaginationRowModel(), + // Debug options work the same + debugTable: true, + debugColumns: true, + }) + + // With useLegacyTable, we can use the v8-style getState() method + // or access state directly from table.state (both work the same) + const { columnFilters, pagination, sorting } = table.getState() + + return ( +
+
+ Migration Example: This example uses the deprecated{' '} + useLegacyTable hook with v8-style API. See the{' '} + + filters example + {' '} + for the recommended v9 approach. +
+ + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + ) + })} + + ))} + + + {table.getRowModel().rows.map((row) => { + return ( + + {row.getAllCells().map((cell) => { + return ( + + ) + })} + + ) + })} + +
+ {header.isPlaceholder ? null : ( + <> +
+ {/* With useLegacyTable, we use flexRender instead of table.FlexRender */} + {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} +
+ {header.column.getCanFilter() ? ( +
+ +
+ ) : null} + + )} +
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
+
+
+ + + + + +
Page
+ + {pagination.pageIndex + 1} of {table.getPageCount()} + + + + | Go to page: + { + const page = e.target.value ? Number(e.target.value) - 1 : 0 + table.setPageIndex(page) + }} + className="border p-1 rounded w-16" + /> + + +
+
{table.getPrePaginatedRowModel().rows.length} Rows
+
+ +
+
+ +
+
+

Current State:

+ 
+          {JSON.stringify({ columnFilters, pagination, sorting }, null, 2)}
+
+
+
+ ) +} + +function Filter({ + column, +}: { + column: Column +}) { + const columnFilterValue = column.getFilterValue() + const { filterVariant } = column.columnDef.meta ?? {} + + return filterVariant === 'range' ? ( +
+
+ {/* See faceted column filters example for min max values functionality */} + + column.setFilterValue((old: [number, number] | undefined) => [ + value, + old?.[1], + ]) + } + placeholder={`Min`} + className="w-24 border shadow rounded" + /> + + column.setFilterValue((old: [number, number] | undefined) => [ + old?.[0], + value, + ]) + } + placeholder={`Max`} + className="w-24 border shadow rounded" + /> +
+
+
+ ) : filterVariant === 'select' ? ( + + ) : ( + column.setFilterValue(value)} + placeholder={`Search...`} + type="text" + value={(columnFilterValue ?? '') as string} + /> + // See faceted column filters example for datalist search suggestions + ) +} + +// A typical debounced input react component +function DebouncedInput({ + value: initialValue, + onChange, + debounce = 500, + ...props +}: { + value: string | number + onChange: (value: string | number) => void + debounce?: number +} & Omit, 'onChange'>) { + const [value, setValue] = React.useState(initialValue) + + React.useEffect(() => { + setValue(initialValue) + }, [initialValue]) + + React.useEffect(() => { + const timeout = setTimeout(() => { + onChange(value) + }, debounce) + + return () => clearTimeout(timeout) + }, [value]) + + return ( + setValue(e.target.value)} + /> + ) +} + +const rootElement = document.getElementById('root') +if (!rootElement) throw new Error('Failed to find the root element') + +ReactDOM.createRoot(rootElement).render( + + + , +) diff --git a/examples/react/basic-use-legacy-table/src/makeData.ts b/examples/react/basic-use-legacy-table/src/makeData.ts new file mode 100644 index 0000000000..b9055b2d8c --- /dev/null +++ b/examples/react/basic-use-legacy-table/src/makeData.ts @@ -0,0 +1,48 @@ +import { faker } from '@faker-js/faker' + +export type Person = { + firstName: string + lastName: string + age: number + visits: number + progress: number + status: 'relationship' | 'complicated' | 'single' + subRows?: Array +} + +const range = (len: number) => { + const arr: Array = [] + for (let i = 0; i < len; i++) { + arr.push(i) + } + return arr +} + +const newPerson = (): Person => { + return { + firstName: faker.person.firstName(), + lastName: faker.person.lastName(), + age: faker.number.int(40), + visits: faker.number.int(1000), + progress: faker.number.int(100), + status: faker.helpers.shuffle([ + 'relationship', + 'complicated', + 'single', + ])[0], + } +} + +export function makeData(...lens: Array) { + const makeDataLevel = (depth = 0): Array => { + const len = lens[depth] + return range(len).map((_d): Person => { + return { + ...newPerson(), + subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined, + } + }) + } + + return makeDataLevel() +} diff --git a/examples/react/basic-use-legacy-table/tsconfig.json b/examples/react/basic-use-legacy-table/tsconfig.json new file mode 100644 index 0000000000..1a164003a6 --- /dev/null +++ b/examples/react/basic-use-legacy-table/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "noErrorTruncation": true + }, + "include": ["src"] +} diff --git a/examples/react/basic-use-legacy-table/vite.config.js b/examples/react/basic-use-legacy-table/vite.config.js new file mode 100644 index 0000000000..2e1361723a --- /dev/null +++ b/examples/react/basic-use-legacy-table/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import rollupReplace from '@rollup/plugin-replace' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + rollupReplace({ + preventAssignment: true, + values: { + __DEV__: JSON.stringify(true), + 'process.env.NODE_ENV': JSON.stringify('development'), + }, + }), + react(), + ], +}) diff --git a/packages/react-table/src/index.ts b/packages/react-table/src/index.ts index 2f7d5e1c07..b4af777733 100755 --- a/packages/react-table/src/index.ts +++ b/packages/react-table/src/index.ts @@ -3,4 +3,5 @@ export * from '@tanstack/table-core' export * from './FlexRender' export * from './Subscribe' export * from './createTableHook' +export * from './useLegacyTable' export * from './useTable' diff --git a/packages/react-table/src/useLegacyTable.ts b/packages/react-table/src/useLegacyTable.ts new file mode 100644 index 0000000000..06af32285a --- /dev/null +++ b/packages/react-table/src/useLegacyTable.ts @@ -0,0 +1,370 @@ +'use client' + +import { + aggregationFns, + createExpandedRowModel, + createFacetedMinMaxValues, + createFacetedRowModel, + createFacetedUniqueValues, + createFilteredRowModel, + createGroupedRowModel, + createPaginatedRowModel, + createSortedRowModel, + filterFns, + sortFns, + stockFeatures, +} from '@tanstack/table-core' +import { useMemo } from 'react' +import { useStore } from '@tanstack/react-store' +import { useTable } from './useTable' +import type { + CreateRowModels_All, + RowData, + RowModel, + StockFeatures, + Table, + TableOptions, + TableState, +} from '@tanstack/table-core' +import type { ReactTable } from './useTable' + +// ============================================================================= +// V8-style row model factory functions +// These are stub functions that act as markers for useLegacyTable to know +// which row models to enable. They don't actually do anything - the real +// implementation is handled by useLegacyTable internally. +// ============================================================================= + +/** + * @deprecated Use `createFilteredRowModel(filterFns)` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the filtered row model. + */ +export function getFilteredRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +/** + * @deprecated Use `createSortedRowModel(sortFns)` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the sorted row model. + */ +export function getSortedRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +/** + * @deprecated Use `createPaginatedRowModel()` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the paginated row model. + */ +export function getPaginationRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +/** + * @deprecated Use `createExpandedRowModel()` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the expanded row model. + */ +export function getExpandedRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +/** + * @deprecated Use `createGroupedRowModel(aggregationFns)` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the grouped row model. + */ +export function getGroupedRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +/** + * @deprecated Use `createFacetedRowModel()` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the faceted row model. + */ +export function getFacetedRowModel< + TData extends RowData, +>(): FacetedRowModelFactory { + return (() => () => {}) as unknown as FacetedRowModelFactory +} + +/** + * @deprecated Use `createFacetedMinMaxValues()` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the faceted min/max values. + */ +export function getFacetedMinMaxValues< + TData extends RowData, +>(): FacetedMinMaxValuesFactory { + return (() => () => undefined) as unknown as FacetedMinMaxValuesFactory +} + +/** + * @deprecated Use `createFacetedUniqueValues()` with the new `useTable` hook instead. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It acts as a marker to enable the faceted unique values. + */ +export function getFacetedUniqueValues< + TData extends RowData, +>(): FacetedUniqueValuesFactory { + return (() => () => new Map()) as unknown as FacetedUniqueValuesFactory +} + +/** + * @deprecated The core row model is always created automatically in v9. + * + * This is a stub function for v8 API compatibility with `useLegacyTable`. + * It does nothing - the core row model is always available. + */ +export function getCoreRowModel< + TData extends RowData, +>(): RowModelFactory { + return (() => () => {}) as unknown as RowModelFactory +} + +// ============================================================================= +// Type definitions +// ============================================================================= + +/** + * Row model factory function type from v8 API + */ +type RowModelFactory = ( + table: Table, +) => () => RowModel + +/** + * Faceted row model factory function type from v8 API + */ +type FacetedRowModelFactory = ( + table: Table, + columnId: string, +) => () => RowModel + +/** + * Faceted min/max values factory function type from v8 API + */ +type FacetedMinMaxValuesFactory = ( + table: Table, + columnId: string, +) => () => undefined | [number, number] + +/** + * Faceted unique values factory function type from v8 API + */ +type FacetedUniqueValuesFactory = ( + table: Table, + columnId: string, +) => () => Map + +/** + * Legacy v8-style row model options + */ +export interface LegacyRowModelOptions { + /** + * Returns the core row model for the table. + * @deprecated This option is no longer needed in v9. The core row model is always created automatically. + */ + getCoreRowModel?: RowModelFactory + /** + * Returns the filtered row model for the table. + * @deprecated Use `_rowModels.filteredRowModel` with `createFilteredRowModel(filterFns)` instead. + */ + getFilteredRowModel?: RowModelFactory + /** + * Returns the sorted row model for the table. + * @deprecated Use `_rowModels.sortedRowModel` with `createSortedRowModel(sortFns)` instead. + */ + getSortedRowModel?: RowModelFactory + /** + * Returns the paginated row model for the table. + * @deprecated Use `_rowModels.paginatedRowModel` with `createPaginatedRowModel()` instead. + */ + getPaginationRowModel?: RowModelFactory + /** + * Returns the expanded row model for the table. + * @deprecated Use `_rowModels.expandedRowModel` with `createExpandedRowModel()` instead. + */ + getExpandedRowModel?: RowModelFactory + /** + * Returns the grouped row model for the table. + * @deprecated Use `_rowModels.groupedRowModel` with `createGroupedRowModel(aggregationFns)` instead. + */ + getGroupedRowModel?: RowModelFactory + /** + * Returns the faceted row model for a column. + * @deprecated Use `_rowModels.facetedRowModel` with `createFacetedRowModel()` instead. + */ + getFacetedRowModel?: FacetedRowModelFactory + /** + * Returns the faceted min/max values for a column. + * @deprecated Use `_rowModels.facetedMinMaxValues` with `createFacetedMinMaxValues()` instead. + */ + getFacetedMinMaxValues?: FacetedMinMaxValuesFactory + /** + * Returns the faceted unique values for a column. + * @deprecated Use `_rowModels.facetedUniqueValues` with `createFacetedUniqueValues()` instead. + */ + getFacetedUniqueValues?: FacetedUniqueValuesFactory +} + +/** + * Legacy v8-style table options that work with useLegacyTable. + * + * This type omits `_features` and `_rowModels` and instead accepts the v8-style + * `get*RowModel` function options. + * + * @deprecated This is a compatibility layer for migrating from v8. Use `useTable` with explicit `_features` and `_rowModels` instead. + */ +export type LegacyTableOptions = Omit< + TableOptions, + '_features' | '_rowModels' +> & + LegacyRowModelOptions + +/** + * Legacy table instance type that includes the v8-style `getState()` method. + * + * @deprecated Use `useTable` with explicit state selection instead. + */ +export type LegacyReactTable = ReactTable< + StockFeatures, + TData, + TableState +> & { + /** + * Returns the current table state. + * @deprecated In v9, access state directly via `table.state` or use `table.store.state` for the full state. + */ + getState: () => TableState +} + +/** + * @deprecated This hook is provided as a compatibility layer for migrating from TanStack Table v8. + * + * Use the new `useTable` hook instead with explicit `_features` and `_rowModels`: + * + * ```tsx + * // New v9 API + * const _features = tableFeatures({ + * columnFilteringFeature, + * rowSortingFeature, + * rowPaginationFeature, + * }) + * + * const table = useTable({ + * _features, + * _rowModels: { + * filteredRowModel: createFilteredRowModel(filterFns), + * sortedRowModel: createSortedRowModel(sortFns), + * paginatedRowModel: createPaginatedRowModel(), + * }, + * columns, + * data, + * }) + * ``` + * + * Key differences from v8: + * - Features are tree-shakeable - only import what you use + * - Row models are explicitly passed via `_rowModels` + * - Use `table.Subscribe` for fine-grained re-renders + * - State is accessed via `table.state` after selecting with the 2nd argument + * + * @param options - Legacy v8-style table options + * @returns A table instance with the full state subscribed and a `getState()` method + */ +export function useLegacyTable( + options: LegacyTableOptions, +): LegacyReactTable { + const { + // Extract legacy row model options + getCoreRowModel: _getCoreRowModel, + getFilteredRowModel, + getSortedRowModel, + getPaginationRowModel, + getExpandedRowModel, + getGroupedRowModel, + getFacetedRowModel, + getFacetedMinMaxValues, + getFacetedUniqueValues, + // Rest of the options + ...restOptions + } = options + + // Build the _rowModels object based on which legacy options were provided + const _rowModels: CreateRowModels_All = {} + + // Map v8 row model factories to v9 _rowModels + // Note: getCoreRowModel is handled automatically in v9, so we ignore it + + if (getFilteredRowModel) { + _rowModels.filteredRowModel = createFilteredRowModel(filterFns) + } + + if (getSortedRowModel) { + _rowModels.sortedRowModel = createSortedRowModel(sortFns) + } + + if (getPaginationRowModel) { + _rowModels.paginatedRowModel = createPaginatedRowModel() + } + + if (getExpandedRowModel) { + _rowModels.expandedRowModel = createExpandedRowModel() + } + + if (getGroupedRowModel) { + _rowModels.groupedRowModel = createGroupedRowModel(aggregationFns) + } + + if (getFacetedRowModel) { + _rowModels.facetedRowModel = createFacetedRowModel() + } + + if (getFacetedMinMaxValues) { + _rowModels.facetedMinMaxValues = createFacetedMinMaxValues() + } + + if (getFacetedUniqueValues) { + _rowModels.facetedUniqueValues = createFacetedUniqueValues() + } + + // Call useTable with the v9 API, subscribing to all state changes + const table = useTable>({ + ...restOptions, + _features: stockFeatures, + _rowModels, + } as TableOptions) + + const state = useStore(table.store, (state) => state) + + return useMemo( + () => + ({ + ...table, + getState: () => state, + }) as LegacyReactTable, + [table, state], + ) +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d4d8a59e4b..e97528134e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1444,6 +1444,40 @@ importers: specifier: ^7.3.1 version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.6.1) + examples/react/basic-use-legacy-table: + dependencies: + '@faker-js/faker': + specifier: ^10.2.0 + version: 10.2.0 + '@tanstack/react-table': + specifier: ^9.0.0-alpha.10 + version: link:../../../packages/react-table + react: + specifier: ^19.2.3 + version: 19.2.3 + react-dom: + specifier: ^19.2.3 + version: 19.2.3(react@19.2.3) + devDependencies: + '@rollup/plugin-replace': + specifier: ^6.0.3 + version: 6.0.3(rollup@4.53.3) + '@types/react': + specifier: ^19.2.8 + version: 19.2.8 + '@types/react-dom': + specifier: ^19.2.3 + version: 19.2.3(@types/react@19.2.8) + '@vitejs/plugin-react': + specifier: ^5.1.2 + version: 5.1.2(vite@7.3.1(@types/node@25.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.6.1)) + typescript: + specifier: 5.9.3 + version: 5.9.3 + vite: + specifier: ^7.3.1 + version: 7.3.1(@types/node@25.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(tsx@4.19.2)(yaml@2.6.1) + examples/react/basic-use-table: dependencies: '@tanstack/react-table':