diff --git a/docs/api/core/table.md b/docs/api/core/table.md index b5f6e314e5..006e7bec50 100644 --- a/docs/api/core/table.md +++ b/docs/api/core/table.md @@ -2,10 +2,10 @@ title: Table APIs --- -## `createAngularTable` / `useReactTable` / `createSolidTable` / `useQwikTable` / `useVueTable` / `createSvelteTable` +## `createTable` / `useTable` / `injectTable` ```tsx -type useReactTable = ( +type useTable = ( options: TableOptions ) => Table ``` diff --git a/docs/api/features/column-filtering.md b/docs/api/features/column-filtering.md index b32d4f314c..c86e94db3d 100644 --- a/docs/api/features/column-filtering.md +++ b/docs/api/features/column-filtering.md @@ -278,7 +278,7 @@ const column = columnHelper.data('key', { filterFn: 'myCustomFilter', }) -const table = useReactTable({ +const table = useTable({ columns: [column], filterFns: { myCustomFilter: (rows, columnIds, filterValue) => { diff --git a/docs/api/features/global-filtering.md b/docs/api/features/global-filtering.md index 7b48f55ad7..74991acf34 100644 --- a/docs/api/features/global-filtering.md +++ b/docs/api/features/global-filtering.md @@ -135,7 +135,7 @@ const column = columnHelper.data('key', { filterFn: 'myCustomFilter', }) -const table = useReactTable({ +const table = useTable({ columns: [column], filterFns: { myCustomFilter: (rows, columnIds, filterValue) => { diff --git a/docs/api/features/grouping.md b/docs/api/features/grouping.md index b9c21631fc..98f88f0f64 100644 --- a/docs/api/features/grouping.md +++ b/docs/api/features/grouping.md @@ -242,7 +242,7 @@ const column = columnHelper.data('key', { aggregationFn: 'myCustomAggregation', }) -const table = useReactTable({ +const table = useTable({ columns: [column], aggregationFns: { myCustomAggregation: (columnId, leafRows, childRows) => { diff --git a/docs/api/features/sorting.md b/docs/api/features/sorting.md index e5b60eea50..324af950dd 100644 --- a/docs/api/features/sorting.md +++ b/docs/api/features/sorting.md @@ -259,7 +259,7 @@ const column = columnHelper.data('key', { sortingFn: 'myCustomSorting', }) -const table = useReactTable({ +const table = useTable({ columns: [column], sortingFns: { myCustomSorting: (rowA: any, rowB: any, columnId: any): number => diff --git a/docs/faq.md b/docs/faq.md index 32bda46315..714a9fa448 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -26,8 +26,8 @@ export default function MyComponent() { // ... ]; - //❌ Columns and data are defined in the same scope as `useReactTable` without a stable reference, will cause infinite loop! - const table = useReactTable({ + //❌ Columns and data are defined in the same scope as `useTable` without a stable reference, will cause infinite loop! + const table = useTable({ columns, data, }); @@ -64,7 +64,7 @@ export default function MyComponent() { ]); // Columns and data are defined in a stable reference, will not cause infinite loop! - const table = useReactTable({ + const table = useTable({ columns, data, }); @@ -89,7 +89,7 @@ export default function MyComponent() { //... }); - const table = useReactTable({ + const table = useTable({ columns, //❌ BAD: This will cause an infinite loop of re-renders because `data` is mutated in place (destroys stable reference) data: data?.filter(d => d.isActive) ?? [], @@ -118,7 +118,7 @@ export default function MyComponent() { //✅ GOOD: This will not cause an infinite loop of re-renders because `filteredData` is memoized const filteredData = useMemo(() => data?.filter(d => d.isActive) ?? [], [data]); - const table = useReactTable({ + const table = useTable({ columns, data: filteredData, // stable reference! }); @@ -156,7 +156,7 @@ React.useEffect(() => { skipPageResetRef.current = false }) -useReactTable({ +useTable({ ... autoResetPageIndex: !skipPageResetRef.current, autoResetExpanded: !skipPageResetRef.current, diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md index 4786d9ab5a..f70d3cc210 100644 --- a/docs/framework/angular/angular-table.md +++ b/docs/framework/angular/angular-table.md @@ -9,17 +9,17 @@ state the "angular signals" way, providing types and the rendering implementatio `@tanstack/angular-table` re-exports all of `@tanstack/table-core`'s APIs and the following: -### `createAngularTable` +### `injectTable` Accepts an options function or a computed value that returns the table options, and returns a table. ```ts -import {createAngularTable} from '@tanstack/angular-table' +import {injectTable} from '@tanstack/angular-table' export class AppComponent { data = signal([]) - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: defaultColumns, getCoreRowModel: getCoreRowModel(), diff --git a/docs/framework/angular/guide/table-state.md b/docs/framework/angular/guide/table-state.md index 062e898431..31a388d994 100644 --- a/docs/framework/angular/guide/table-state.md +++ b/docs/framework/angular/guide/table-state.md @@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```ts -table = createAngularTable(() => ({ +table = injectTable(() => ({ columns: this.columns, data: this.data(), //... @@ -28,7 +28,7 @@ someHandler() { If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -table = createAngularTable(() => ({ +table = injectTable(() => ({ columns: this.columns, data: this.data(), initialState: { @@ -91,7 +91,7 @@ class TableComponent { ) readonly data = toSignal(this.data$); - readonly table = createAngularTable(() => ({ + readonly table = injectTable(() => ({ columns: this.columns, data: this.data(), //... @@ -135,7 +135,7 @@ class TableComponent { readonly state = signal({} as TableState); // create a table instance with default state values - readonly table = createAngularTable(() => ({ + readonly table = injectTable(() => ({ columns: this.columns, data: this.data(), // our fully controlled state overrides the internal state @@ -175,7 +175,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will class TableComponent { sorting = signal([]) - table = createAngularTable(() => ({ + table = injectTable(() => ({ columns: this.columns, data: this.data(), //... @@ -204,7 +204,7 @@ This is why you will see the `updater instanceof Function ? this.state.update(up All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```ts -import {createAngularTable, type SortingState} from '@tanstack/angular-table' +import {injectTable, type SortingState} from '@tanstack/angular-table' class TableComponent { readonly sorting = signal([ diff --git a/docs/framework/qwik/guide/table-state.md b/docs/framework/qwik/guide/table-state.md index fcc42631c2..e8cc58cd60 100644 --- a/docs/framework/qwik/guide/table-state.md +++ b/docs/framework/qwik/guide/table-state.md @@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```jsx -const table = useQwikTable({ +const table = useTable({ columns, data, //... @@ -26,7 +26,7 @@ console.log(table.getState().rowSelection) //access just the row selection state If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -const table = useQwikTable({ +const table = useTable({ columns, data, initialState: { @@ -75,7 +75,7 @@ const tableQuery = useQuery({ //... }) -const table = useQwikTable({ +const table = useTable({ columns: columns.value, data: tableQuery.data, //... @@ -105,7 +105,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState ```jsx //create a table instance with default state values -const table = useQwikTable({ +const table = useTable({ columns, data, //... Note: `state` values are NOT passed in yet @@ -141,7 +141,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will ```jsx const sorting = Qwik.useSignal([]) //... -const table = useQwikTable({ +const table = useTable({ columns, data, //... @@ -167,7 +167,7 @@ This is why you will see the `updater instanceof Function ? updater(state.value) All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```tsx -import { useQwikTable, type SortingState } from '@tanstack/qwik-table' +import { useTable, type SortingState } from '@tanstack/qwik-table' //... const sorting = Qwik.useSignal([ { diff --git a/docs/framework/qwik/qwik-table.md b/docs/framework/qwik/qwik-table.md index d7e1ade8e6..c3addfd452 100644 --- a/docs/framework/qwik/qwik-table.md +++ b/docs/framework/qwik/qwik-table.md @@ -8,14 +8,14 @@ The `@tanstack/qwik-table` adapter is a wrapper around the core table logic. Mos `@tanstack/qwik-table` re-exports all of `@tanstack/table-core`'s APIs and the following: -### `useQwikTable` +### `useTable` Takes an `options` object and returns a table from a Qwik Store with `NoSerialize`. ```ts -import { useQwikTable } from '@tanstack/qwik-table' +import { useTable } from '@tanstack/qwik-table' -const table = useQwikTable(options) +const table = useTable(options) // ...render your table ``` diff --git a/docs/framework/react/guide/table-state.md b/docs/framework/react/guide/table-state.md index c454c9cb23..f2c3cc5f5f 100644 --- a/docs/framework/react/guide/table-state.md +++ b/docs/framework/react/guide/table-state.md @@ -18,7 +18,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -33,7 +33,7 @@ console.log(table.getState().rowSelection) //access just the row selection state If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, initialState: { @@ -82,7 +82,7 @@ const tableQuery = useQuery({ //... }) -const table = useReactTable({ +const table = useTable({ columns, data: tableQuery.data, //... @@ -106,7 +106,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState ```jsx //create a table instance with default state values -const table = useReactTable({ +const table = useTable({ columns, data, //... Note: `state` values are NOT passed in yet @@ -140,7 +140,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will ```jsx const [sorting, setSorting] = React.useState([]) //... -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -161,7 +161,7 @@ What implications does this have? It means that if you want to add in some extra const [sorting, setSorting] = React.useState([]) const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 }) -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -193,7 +193,7 @@ const table = useReactTable({ All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```tsx -import { useReactTable, type SortingState } from '@tanstack/react-table' +import { useTable, type SortingState } from '@tanstack/react-table' //... const [sorting, setSorting] = React.useState([ { diff --git a/docs/framework/react/react-table.md b/docs/framework/react/react-table.md index 2dd6834c83..7cbd507263 100644 --- a/docs/framework/react/react-table.md +++ b/docs/framework/react/react-table.md @@ -4,15 +4,15 @@ title: React Table The `@tanstack/react-table` adapter is a wrapper around the core table logic. Most of its job is related to managing state the "react" way, providing types and the rendering implementation of cell/header/footer templates. -## `useReactTable` +## `useTable` Takes an `options` object and returns a table. ```tsx -import { useReactTable } from '@tanstack/react-table' +import { useTable } from '@tanstack/react-table' function App() { - const table = useReactTable(options) + const table = useTable(options) // ...render your table } diff --git a/docs/framework/solid/guide/table-state.md b/docs/framework/solid/guide/table-state.md index f5d2f1a62c..fa4abf09e4 100644 --- a/docs/framework/solid/guide/table-state.md +++ b/docs/framework/solid/guide/table-state.md @@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```jsx -const table = createSolidTable({ +const table = createTable({ columns, get data() { return data() @@ -28,7 +28,7 @@ console.log(table.getState().rowSelection) //access just the row selection state If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -const table = createSolidTable({ +const table = createTable({ columns, data, initialState: { @@ -77,7 +77,7 @@ const tableQuery = createQuery({ //... }) -const table = createSolidTable({ +const table = createTable({ columns, get data() { return tableQuery.data() @@ -109,7 +109,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState ```jsx //create a table instance with default state values -const table = createSolidTable({ +const table = createTable({ columns, get data() { return data() @@ -147,7 +147,7 @@ Specifying an `on[State]Change` callback tells the table instance that this will ```jsx const [sorting, setSorting] = createSignal([]) //... -const table = createSolidTable({ +const table = createTable({ columns, data, //... @@ -170,7 +170,7 @@ What implications does this have? It means that if you want to add in some extra const [sorting, setSorting] = createSignal([]) const [pagination, setPagination] = createSignal({ pageIndex: 0, pageSize: 10 }) -const table = createSolidTable({ +const table = createTable({ get columns() { return columns() }, @@ -210,7 +210,7 @@ const table = createSolidTable({ All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```tsx -import { createSolidTable, type SortingState } from '@tanstack/solid-table' +import { createTable, type SortingState } from '@tanstack/solid-table' //... const [sorting, setSorting] = createSignal([ { diff --git a/docs/framework/solid/solid-table.md b/docs/framework/solid/solid-table.md index dc5afc392e..9afcd01f6a 100644 --- a/docs/framework/solid/solid-table.md +++ b/docs/framework/solid/solid-table.md @@ -4,15 +4,15 @@ title: Solid Table The `@tanstack/solid-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "solid" way, providing types and the rendering implementation of cell/header/footer templates. -## `createSolidTable` +## `createTable` Takes an `options` object and returns a table. ```tsx -import { createSolidTable } from '@tanstack/solid-table' +import { createTable } from '@tanstack/solid-table' function App() { - const table = createSolidTable(options) + const table = createTable(options) // ...render your table } diff --git a/docs/framework/svelte/guide/table-state.md b/docs/framework/svelte/guide/table-state.md index db8ff045ea..95e995e0aa 100644 --- a/docs/framework/svelte/guide/table-state.md +++ b/docs/framework/svelte/guide/table-state.md @@ -17,7 +17,7 @@ const options = writable({ //... }) -const table = createSvelteTable(options) +const table = createTable(options) console.log(table.getState()) //access the entire internal state console.log(table.getState().rowSelection) //access just the row selection state @@ -47,7 +47,7 @@ const options = writable({ //... }) -const table = createSvelteTable(options) +const table = createTable(options) ``` > **Note**: Only specify each particular state in either `initialState` or `state`, but not both. If you pass in a particular state value to both `initialState` and `state`, the initialized state in `state` will take overwrite any corresponding value in `initialState`. @@ -139,7 +139,7 @@ const options = writable({ onPaginationChange: setPagination, }) -const table = createSvelteTable(options) +const table = createTable(options) //... ``` @@ -156,7 +156,7 @@ const options = writable({ data, //... Note: `state` values are NOT passed in yet }) -const table = createSvelteTable(options) +const table = createTable(options) let state = { ...table.initialState, //populate the initial state with all of the default state values from the table instance @@ -219,7 +219,7 @@ const options = writable({ }, onSortingChange: setSorting, //makes the `state.sorting` controlled }) -const table = createSvelteTable(options) +const table = createTable(options) ``` #### 2. **Updaters can either be raw values or callback functions**. @@ -235,7 +235,7 @@ This is why you see the `if (updater instanceof Function)` check in the `setStat All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```ts -import { createSvelteTable, type SortingState, type Updater } from '@tanstack/svelte-table' +import { createTable, type SortingState, type Updater } from '@tanstack/svelte-table' //... let sorting: SortingState[] = [ { diff --git a/docs/framework/svelte/svelte-table.md b/docs/framework/svelte/svelte-table.md index 412d46ed27..ba1c81f9c0 100644 --- a/docs/framework/svelte/svelte-table.md +++ b/docs/framework/svelte/svelte-table.md @@ -4,16 +4,16 @@ title: Svelte Table The `@tanstack/svelte-table` adapter is a wrapper around the core table logic. Most of it's job is related to managing state the "svelte" way, providing types and the rendering implementation of cell/header/footer templates. -## `createSvelteTable` +## `createTable` Takes an `options` object and returns a table. ```svelte ``` diff --git a/docs/framework/vue/guide/table-state.md b/docs/framework/vue/guide/table-state.md index ad76d8e7b8..c2c6186c24 100644 --- a/docs/framework/vue/guide/table-state.md +++ b/docs/framework/vue/guide/table-state.md @@ -11,7 +11,7 @@ TanStack Table has a simple underlying internal state management system to store You do not need to set up anything special in order for the table state to work. If you pass nothing into either `state`, `initialState`, or any of the `on[State]Change` table options, the table will manage its own state internally. You can access any part of this internal state by using the `table.getState()` table instance API. ```ts -const table = useVueTable({ +const table = useTable({ columns, get data() { return data.value @@ -28,7 +28,7 @@ console.log(table.getState().rowSelection) //access just the row selection state If all you need to do for certain states is customize their initial default values, you still do not need to manage any of the state yourself. You can simply set values in the `initialState` option of the table instance. ```jsx -const table = useVueTable({ +const table = useTable({ columns, data, initialState: { @@ -77,7 +77,7 @@ const tableQuery = useQuery({ //... }) -const table = useVueTable({ +const table = useTable({ columns, data: tableQuery.data, //... @@ -122,7 +122,7 @@ A couple of more tricks may be needed to make this work. If you use the `onState ```jsx //create a table instance with default state values -const table = useVueTable({ +const table = useTable({ get columns() { return columns.value }, @@ -167,7 +167,7 @@ const setSorting = updater => { sorting.value = updater instanceof Function ? updater(sorting.value) : updater } //... -const table = useVueTable({ +const table = useTable({ columns, data, //... @@ -193,7 +193,7 @@ This is why we have the `updater instanceof Function` check in the `setState` fu All complex states in TanStack Table have their own TypeScript types that you can import and use. This can be handy for ensuring that you are using the correct data structures and properties for the state values that you are controlling. ```tsx -import { useVueTable, type SortingState } from '@tanstack/vue-table' +import { useTable, type SortingState } from '@tanstack/vue-table' //... const sorting = ref([ { diff --git a/docs/framework/vue/vue-table.md b/docs/framework/vue/vue-table.md index dc1d3d2a90..4e9ed8ffa1 100644 --- a/docs/framework/vue/vue-table.md +++ b/docs/framework/vue/vue-table.md @@ -8,14 +8,14 @@ The `@tanstack/vue-table` adapter is a wrapper around the core table logic. Most `@tanstack/vue-table` re-exports all of `@tanstack/table-core`'s APIs and the following: -### `useVueTable` +### `useTable` Takes an `options` object and returns a table. ```ts -import { useVueTable } from '@tanstack/vue-table' +import { useTable } from '@tanstack/vue-table' -const table = useVueTable(options) +const table = useTable(options) // ...render your table ``` diff --git a/docs/guide/column-faceting.md b/docs/guide/column-faceting.md index 3931bb9e89..c351b8d318 100644 --- a/docs/guide/column-faceting.md +++ b/docs/guide/column-faceting.md @@ -29,7 +29,7 @@ import { getFacetedUniqueValues, //depends on getFacetedRowModel } //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -68,7 +68,7 @@ const facetingQuery = useQuery( //... ) -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), diff --git a/docs/guide/column-filtering.md b/docs/guide/column-filtering.md index f723aafc71..e32d4e160b 100644 --- a/docs/guide/column-filtering.md +++ b/docs/guide/column-filtering.md @@ -50,7 +50,7 @@ If you have decided that you need to implement server-side filtering instead of No `getFilteredRowModel` table option is needed for manual server-side filtering. Instead, the `data` that you pass to the table should already be filtered. However, if you have passed a `getFilteredRowModel` table option, you can tell the table to skip it by setting the `manualFiltering` option to `true`. ```jsx -const table = useReactTable({ +const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), @@ -66,9 +66,9 @@ const table = useReactTable({ If you are using the built-in client-side filtering features, first you need to pass in a `getFilteredRowModel` function to the table options. This function will be called whenever the table needs to filter the data. You can either import the default `getFilteredRowModel` function from TanStack Table or create your own. ```jsx -import { useReactTable, getFilteredRowModel } from '@tanstack/react-table' +import { useTable, getFilteredRowModel } from '@tanstack/react-table' //... -const table = useReactTable({ +const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), @@ -97,7 +97,7 @@ Since the column filter state is an array of objects, you can have multiple colu You can access the column filter state from the table instance just like any other table state using the `table.getState()` API. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -115,7 +115,7 @@ If you need easy access to the column filter state, you can control/manage the c ```tsx const [columnFilters, setColumnFilters] = useState([]) // can set initial column filter state here //... -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -131,7 +131,7 @@ const table = useReactTable({ If you do not need to control the column filter state in your own state management or scope, but you still want to set an initial column filter state, you can use the `initialState` table option instead of `state`. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -212,7 +212,7 @@ const columns = [ } ] //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -274,7 +274,7 @@ const columns = [ //... ] //... -const table = useReactTable({ +const table = useTable({ columns, data, enableColumnFilters: false, // disable column filtering for all columns @@ -292,7 +292,7 @@ By default, filtering is done from parent rows down, so if a parent row is filte However, if you want to allow sub-rows to be filtered and searched through, regardless of whether the parent row is filtered out, you can set the `filterFromLeafRows` table option to `true`. Setting this option to `true` will cause filtering to be done from leaf rows up, which means parent rows will be included so long as one of their child or grand-child rows is also included. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -309,7 +309,7 @@ By default, filtering is done for all rows in a tree, no matter if they are root Use `maxLeafRowFilterDepth: 0` if you want to preserve a parent row's sub-rows from being filtered out while the parent row is passing the filter. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), diff --git a/docs/guide/column-ordering.md b/docs/guide/column-ordering.md index 42a7441da7..2f574044c1 100644 --- a/docs/guide/column-ordering.md +++ b/docs/guide/column-ordering.md @@ -36,7 +36,7 @@ If you don't provide a `columnOrder` state, TanStack Table will just use the ord If all you need to do is specify the initial column order, you can just specify the `columnOrder` state in the `initialState` table option. ```jsx -const table = useReactTable({ +const table = useTable({ //... initialState: { columnOrder: ['columnId1', 'columnId2', 'columnId3'], @@ -54,7 +54,7 @@ If you need to dynamically change the column order, or set the column order afte ```jsx const [columnOrder, setColumnOrder] = useState(['columnId1', 'columnId2', 'columnId3']); //optionally initialize the column order //... -const table = useReactTable({ +const table = useTable({ //... state: { columnOrder, diff --git a/docs/guide/column-pinning.md b/docs/guide/column-pinning.md index 5a201e741e..2236fc827a 100644 --- a/docs/guide/column-pinning.md +++ b/docs/guide/column-pinning.md @@ -42,7 +42,7 @@ const [columnPinning, setColumnPinning] = useState({ right: [], }); //... -const table = useReactTable({ +const table = useTable({ //... state: { columnPinning, @@ -58,7 +58,7 @@ const table = useReactTable({ A very common use case is to pin some columns by default. You can do this by either initializing the `columnPinning` state with the pinned columnIds, or by using the `initialState` table option ```jsx -const table = useReactTable({ +const table = useTable({ //... initialState: { columnPinning: { diff --git a/docs/guide/column-sizing.md b/docs/guide/column-sizing.md index a4212559da..ddd50a7779 100644 --- a/docs/guide/column-sizing.md +++ b/docs/guide/column-sizing.md @@ -40,7 +40,7 @@ const columns = [ //... ] -const table = useReactTable({ +const table = useTable({ //override default column sizing defaultColumn: { size: 200, //starting column size @@ -94,7 +94,7 @@ In React TanStack Table adapter, where achieving 60 fps column resizing renders If you want to change the column resize mode to `"onChange"` for immediate column resizing renders, you can do so with the `columnResizeMode` table option. ```tsx -const table = useReactTable({ +const table = useTable({ //... columnResizeMode: 'onChange', //change column resize mode to "onChange" }) @@ -105,7 +105,7 @@ const table = useReactTable({ By default, TanStack Table assumes that the table markup is laid out in a left-to-right direction. For right-to-left layouts, you may need to change the column resize direction to `"rtl"`. ```tsx -const table = useReactTable({ +const table = useTable({ //... columnResizeDirection: 'rtl', //change column resize direction to "rtl" for certain locales }) diff --git a/docs/guide/column-visibility.md b/docs/guide/column-visibility.md index ba7e7e744f..d4e3a06ff9 100644 --- a/docs/guide/column-visibility.md +++ b/docs/guide/column-visibility.md @@ -34,7 +34,7 @@ const [columnVisibility, setColumnVisibility] = useState({ columnId3: true, }); -const table = useReactTable({ +const table = useTable({ //... state: { columnVisibility, @@ -49,7 +49,7 @@ Alternatively, if you don't need to manage the column visibility state outside o > **Note**: If `columnVisibility` is provided to both `initialState` and `state`, the `state` initialization will take precedence and `initialState` will be ignored. Do not provide `columnVisibility` to both `initialState` and `state`, only one or the other. ```jsx -const table = useReactTable({ +const table = useTable({ //... initialState: { columnVisibility: { diff --git a/docs/guide/custom-features.md b/docs/guide/custom-features.md index 9242209fdd..5aabcd7b5d 100644 --- a/docs/guide/custom-features.md +++ b/docs/guide/custom-features.md @@ -16,7 +16,7 @@ In this guide, we'll cover how to extend TanStack Table with custom features, an TanStack Table has a core set of features that are built into the library such as sorting, filtering, pagination, etc. We've received a lot of requests and sometimes even some well thought out PRs to add even more features to the library. While we are always open to improving the library, we also want to make sure that TanStack Table remains a lean library that does not include too much bloat and code that is unlikely to be used in most use cases. Not every PR can, or should, be accepted into the core library, even if it does solve a real problem. This can be frustrating to developers where TanStack Table solves 90% of their use case, but they need a little bit more control. -TanStack Table has always been built in a way that allows it to be highly extensible (at least since v7). The `table` instance that is returned from whichever framework adapter that you are using (`useReactTable`, `useVueTable`, etc) is a plain JavaScript object that can have extra properties or APIs added to it. It has always been possible to use composition to add custom logic, state, and APIs to the table instance. Libraries like [Material React Table](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_TableInstance.ts) have simply created custom wrapper hooks around the `useReactTable` hook to extend the table instance with custom functionality. +TanStack Table has always been built in a way that allows it to be highly extensible (at least since v7). The `table` instance that is returned from whichever framework adapter that you are using (`createTable`, `useTable`, etc) is a plain JavaScript object that can have extra properties or APIs added to it. It has always been possible to use composition to add custom logic, state, and APIs to the table instance. Libraries like [Material React Table](https://github.com/KevinVandy/material-react-table/blob/v2/packages/material-react-table/src/hooks/useMRT_TableInstance.ts) have simply created custom wrapper hooks around the `useTable` hook to extend the table instance with custom functionality. However, starting in version 8.14.0, TanStack Table has exposed a new `_features` table option that allows you to more tightly and cleanly integrate custom code into the table instance in exactly the same way that the built-in table features are already integrated. @@ -32,21 +32,21 @@ All of the functionality of a feature object can be described with the `TableFea ```ts export interface TableFeature { - createCell?: ( + _createCell?: ( cell: Cell, column: Column, row: Row, table: Table ) => void - createColumn?: (column: Column, table: Table) => void - createHeader?: (header: Header, table: Table) => void - createRow?: (row: Row, table: Table) => void - createTable?: (table: Table) => void - getDefaultColumnDef?: () => Partial> - getDefaultOptions?: ( + _createColumn?: (column: Column, table: Table) => void + _createHeader?: (header: Header, table: Table) => void + _createRow?: (row: Row, table: Table) => void + _createTable?: (table: Table) => void + _getDefaultColumnDef?: () => Partial> + _getDefaultOptions?: ( table: Table ) => Partial> - getInitialState?: (initialState?: InitialTableState) => Partial + _getInitialState?: (initialState?: InitialTableState) => Partial } ``` @@ -56,53 +56,53 @@ This might be a bit confusing, so let's break down what each of these methods do
-##### getDefaultOptions +##### _getDefaultOptions -The `getDefaultOptions` method in a table feature is responsible for setting the default table options for that feature. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `getDefaultOptions` method sets the default `columnResizeMode` option with a default value of `"onEnd"`. +The `_getDefaultOptions` method in a table feature is responsible for setting the default table options for that feature. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `_getDefaultOptions` method sets the default `columnResizeMode` option with a default value of `"onEnd"`.
-##### getDefaultColumnDef +##### _getDefaultColumnDef -The `getDefaultColumnDef` method in a table feature is responsible for setting the default column options for that feature. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `getDefaultColumnDef` method sets the default `sortUndefined` column option with a default value of `1`. +The `_getDefaultColumnDef` method in a table feature is responsible for setting the default column options for that feature. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `_getDefaultColumnDef` method sets the default `sortUndefined` column option with a default value of `1`.
-##### getInitialState +##### _getInitialState -The `getInitialState` method in a table feature is responsible for setting the default state for that feature. For example, in the [Pagination](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowPagination.ts) feature, the `getInitialState` method sets the default `pageSize` state with a value of `10` and the default `pageIndex` state with a value of `0`. +The `_getInitialState` method in a table feature is responsible for setting the default state for that feature. For example, in the [Pagination](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowPagination.ts) feature, the `_getInitialState` method sets the default `pageSize` state with a value of `10` and the default `pageIndex` state with a value of `0`. #### API Creators
-##### createTable +##### _createTable -The `createTable` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `createTable` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `RowSelection` feature. +The `_createTable` method in a table feature is responsible for adding methods to the `table` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `_createTable` method adds many table instance API methods such as `toggleAllRowsSelected`, `getIsAllRowsSelected`, `getIsSomeRowsSelected`, etc. So then, when you call `table.toggleAllRowsSelected()`, you are calling a method that was added to the table instance by the `RowSelection` feature.
-##### createHeader +##### _createHeader -The `createHeader` method in a table feature is responsible for adding methods to the `header` instance. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `createHeader` method adds many header instance API methods such as `getStart`, and many others. So then, when you call `header.getStart()`, you are calling a method that was added to the header instance by the `ColumnSizing` feature. +The `_createHeader` method in a table feature is responsible for adding methods to the `header` instance. For example, in the [Column Sizing](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnSizing.ts) feature, the `_createHeader` method adds many header instance API methods such as `getStart`, and many others. So then, when you call `header.getStart()`, you are calling a method that was added to the header instance by the `ColumnSizing` feature.
-##### createColumn +##### _createColumn -The `createColumn` method in a table feature is responsible for adding methods to the `column` instance. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `createColumn` method adds many column instance API methods such as `getNextSortingOrder`, `toggleSorting`, etc. So then, when you call `column.toggleSorting()`, you are calling a method that was added to the column instance by the `RowSorting` feature. +The `_createColumn` method in a table feature is responsible for adding methods to the `column` instance. For example, in the [Sorting](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSorting.ts) feature, the `_createColumn` method adds many column instance API methods such as `getNextSortingOrder`, `toggleSorting`, etc. So then, when you call `column.toggleSorting()`, you are calling a method that was added to the column instance by the `RowSorting` feature.
-##### createRow +##### _createRow -The `createRow` method in a table feature is responsible for adding methods to the `row` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `createRow` method adds many row instance API methods such as `toggleSelected`, `getIsSelected`, etc. So then, when you call `row.toggleSelected()`, you are calling a method that was added to the row instance by the `RowSelection` feature. +The `_createRow` method in a table feature is responsible for adding methods to the `row` instance. For example, in the [Row Selection](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/RowSelection.ts) feature, the `_createRow` method adds many row instance API methods such as `toggleSelected`, `getIsSelected`, etc. So then, when you call `row.toggleSelected()`, you are calling a method that was added to the row instance by the `RowSelection` feature.
-##### createCell +##### _createCell -The `createCell` method in a table feature is responsible for adding methods to the `cell` instance. For example, in the [Column Grouping](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnGrouping.ts) feature, the `createCell` method adds many cell instance API methods such as `getIsGrouped`, `getIsAggregated`, etc. So then, when you call `cell.getIsGrouped()`, you are calling a method that was added to the cell instance by the `ColumnGrouping` feature. +The `_createCell` method in a table feature is responsible for adding methods to the `cell` instance. For example, in the [Column Grouping](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/ColumnGrouping.ts) feature, the `_createCell` method adds many cell instance API methods such as `getIsGrouped`, `getIsAggregated`, etc. So then, when you call `cell.getIsGrouped()`, you are calling a method that was added to the cell instance by the `ColumnGrouping` feature. ### Adding a Custom Feature @@ -179,7 +179,7 @@ Use the `TableFeature` type to ensure that you are creating the feature object c ```ts export const DensityFeature: TableFeature = { //Use the TableFeature type!! // define the new feature's initial state - getInitialState: (state): DensityTableState => { + _getInitialState: (state): DensityTableState => { return { density: 'md', ...state, @@ -187,7 +187,7 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! }, // define the new feature's default options - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): DensityOptions => { return { @@ -196,12 +196,12 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! } as DensityOptions }, // if you need to add a default column definition... - // getDefaultColumnDef: (): Partial> => { + // _getDefaultColumnDef: (): Partial> => { // return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround // }, // define the new feature's table instance methods - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setDensity = updater => { const safeUpdater: Updater = old => { let newState = functionalUpdate(updater, old) @@ -218,13 +218,13 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! }, // if you need to add row instance APIs... - // createRow: (row, table): void => {}, + // _createRow: (row, table): void => {}, // if you need to add cell instance APIs... - // createCell: (cell, column, row, table): void => {}, + // _createCell: (cell, column, row, table): void => {}, // if you need to add column instance APIs... - // createColumn: (column, table): void => {}, + // _createColumn: (column, table): void => {}, // if you need to add header instance APIs... - // createHeader: (header, table): void => {}, + // _createHeader: (header, table): void => {}, } ``` @@ -233,7 +233,7 @@ export const DensityFeature: TableFeature = { //Use the TableFeature type!! Now that we have our feature object, we can add it to the table instance by passing it to the `_features` option when we create the table instance. ```ts -const table = useReactTable({ +const table = useTable({ _features: [DensityFeature], //pass the new feature to merge with all of the built-in features under the hood columns, data, @@ -246,7 +246,7 @@ const table = useReactTable({ Now that the feature is added to the table instance, you can use the new instance APIs options, and state in your application. ```tsx -const table = useReactTable({ +const table = useTable({ _features: [DensityFeature], //pass our custom feature to the table to be instantiated upon creation columns, data, diff --git a/docs/guide/data.md b/docs/guide/data.md index e6c5af14c8..a1e31aae44 100644 --- a/docs/guide/data.md +++ b/docs/guide/data.md @@ -202,7 +202,7 @@ export default function MyComponent() { ]); // Columns and data are defined in a stable reference, will not cause infinite loop! - const table = useReactTable({ + const table = useTable({ columns, data ?? fallbackData, //also good to use a fallback array that is defined outside of the component (stable reference) }); @@ -213,7 +213,7 @@ export default function MyComponent() { `React.useState` and `React.useMemo` are not the only ways to give your data a stable reference. You can also define your data outside of the component or use a 3rd party state management library like Redux, Zustand, or TanStack Query. -The main thing to avoid is defining the `data` array inside the same scope as the `useReactTable` call. That will cause the `data` array to be redefined on every render, which will cause an infinite loop of re-renders. +The main thing to avoid is defining the `data` array inside the same scope as the `useTable` call. That will cause the `data` array to be redefined on every render, which will cause an infinite loop of re-renders. ```tsx export default function MyComponent() { @@ -227,8 +227,8 @@ export default function MyComponent() { // ... ]; - //❌ Columns and data are defined in the same scope as `useReactTable` without a stable reference, will cause infinite loop! - const table = useReactTable({ + //❌ Columns and data are defined in the same scope as `useTable` without a stable reference, will cause infinite loop! + const table = useTable({ columns, data ?? [], //❌ Also bad because the fallback array is re-created on every render }); diff --git a/docs/guide/pagination.md b/docs/guide/pagination.md index 8ff1aec367..e5f3497f4b 100644 --- a/docs/guide/pagination.md +++ b/docs/guide/pagination.md @@ -49,9 +49,9 @@ Alternatively, instead of paginating the data, you can render all rows of a larg 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'; +import { useTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -70,9 +70,9 @@ No pagination row model is needed for server-side pagination, but if you have pr 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'; +import { useTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -97,14 +97,14 @@ The `pagination` state is an object that contains the following properties: You can manage the `pagination` state just like any other state in the table instance. ```jsx -import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; +import { useTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'; //... const [pagination, setPagination] = useState({ pageIndex: 0, //initial page index pageSize: 10, //default page size }); -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -120,7 +120,7 @@ const table = useReactTable({ 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({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -145,7 +145,7 @@ Besides the `manualPagination`, `pageCount`, and `rowCount` options which are us By default, `pageIndex` is reset to `0` when page-altering state changes occur, such as when the `data` is updated, filters change, grouping changes, etc. This behavior is automatically disabled when `manualPagination` is true but it can be overridden by explicitly assigning a boolean value to the `autoResetPageIndex` table option. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), diff --git a/docs/guide/row-models.md b/docs/guide/row-models.md index 7d5ec717a0..00d335db28 100644 --- a/docs/guide/row-models.md +++ b/docs/guide/row-models.md @@ -7,10 +7,10 @@ title: Row Models Guide If you take a look at the most basic example of TanStack Table, you'll see a code snippet like this: ```ts -import { getCoreRowModel, useReactTable } from '@tanstack/react-table' +import { getCoreRowModel, useTable } from '@tanstack/react-table' function Component() { - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), //row model @@ -20,7 +20,7 @@ function Component() { What is this `getCoreRowModel` function? And why do you have to import it from TanStack Table only to just pass it back to itself? -Well, the answer is that TanStack Table is a modular library. Not all code for every single feature is included in the createTable functions/hooks by default. You only need to import and include the code that you will need to correctly generate rows based on the features you want to use. +Well, the answer is that TanStack Table is a modular library. Not all code for every single feature is included in the _createTable functions/hooks by default. You only need to import and include the code that you will need to correctly generate rows based on the features you want to use. ### What are Row Models? @@ -44,7 +44,7 @@ import { getSortedRowModel, } //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), diff --git a/docs/guide/row-selection.md b/docs/guide/row-selection.md index c3e7b29651..b9b30b7b41 100644 --- a/docs/guide/row-selection.md +++ b/docs/guide/row-selection.md @@ -45,7 +45,7 @@ Use the `onRowSelectionChange` table option to hoist up the row selection state ```ts const [rowSelection, setRowSelection] = useState({}) //manage your own row selection state -const table = useReactTable({ +const table = useTable({ //... onRowSelectionChange: setRowSelection, //hoist up the row selection state to your own scope state: { @@ -59,7 +59,7 @@ const table = useReactTable({ By default, the row id for each row is simply the `row.index`. If you are using row selection features, you most likely want to use a more useful row identifier, since the row selection state is keyed by row id. You can use the `getRowId` table option to specify a function that returns a unique row id for each row. ```ts -const table = useReactTable({ +const table = useTable({ //... getRowId: row => row.uuid, //use the row's uuid from your database as the row id }) @@ -90,7 +90,7 @@ instead of this: Row selection is enabled by default for all rows. To either enable row selection conditionally for certain rows or disable row selection for all rows, you can use the `enableRowSelection` table option which accepts either a boolean or a function for more granular control. ```ts -const table = useReactTable({ +const table = useTable({ //... enableRowSelection: row => row.original.age > 18, //only enable row selection for adults }) @@ -105,7 +105,7 @@ By default, the table allows multiple rows to be selected at once. If, however, This is useful for making tables that have radio buttons instead of checkboxes. ```ts -const table = useReactTable({ +const table = useTable({ //... enableMultiRowSelection: false, //only allow a single row to be selected at once // enableMultiRowSelection: row => row.original.age > 18, //only allow a single row to be selected at once for adults @@ -117,7 +117,7 @@ const table = useReactTable({ By default, selecting a parent row will select all of its sub-rows. If you want to disable auto sub-row selection, you can set the `enableSubRowSelection` table option to `false` to disable sub-row selection, or pass in a function to disable sub-row selection conditionally for a row's sub-rows. ```ts -const table = useReactTable({ +const table = useTable({ //... enableSubRowSelection: false, //disable sub-row selection // enableSubRowSelection: row => row.original.age > 18, //disable sub-row selection for adults diff --git a/docs/guide/rows.md b/docs/guide/rows.md index d2426453fc..1616e842bb 100644 --- a/docs/guide/rows.md +++ b/docs/guide/rows.md @@ -53,7 +53,7 @@ Every row object contains row data and many APIs to either interact with the tab Every row object has an `id` property that makes it unique within the table instance. By default the `row.id` is the same as the `row.index` that is created in the row model. However, it can be useful to override each row's `id` with a unique identifier from the row's data. You can use the `getRowId` table option to do this. ```js -const table = useReactTable({ +const table = useTable({ columns, data, getRowId: originalRow => originalRow.uuid, //override the row.id with the uuid from the original row's data diff --git a/docs/guide/sorting.md b/docs/guide/sorting.md index eba5c08b99..f000e786ff 100644 --- a/docs/guide/sorting.md +++ b/docs/guide/sorting.md @@ -36,7 +36,7 @@ Since the sorting state is an array, it is possible to sort by multiple columns You can access the sorting state directly from the table instance just like any other state using the `table.getState()` API. ```tsx -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -56,7 +56,7 @@ const [sorting, setSorting] = useState([]) // can set initial sort //... // use sorting state to fetch data from your server or something... //... -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -72,7 +72,7 @@ const table = useReactTable({ If you do not need to control the sorting state in your own state management or scope, but you still want to set an initial sorting state, you can use the `initialState` table option instead of `state`. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, //... @@ -100,7 +100,7 @@ If you plan to just use your own server-side sorting in your back-end logic, you ```jsx const [sorting, setSorting] = useState([]) //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -120,9 +120,9 @@ const table = useReactTable({ To implement client-side sorting, first you have to provide a sorting row model to the table. You can import the `getSortedRowModel` function from TanStack Table, and it will be used to transform your rows into sorted rows. ```jsx -import { useReactTable } from '@tanstack/react-table' +import { useTable } from '@tanstack/react-table' //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -195,7 +195,7 @@ const columns = [ } ] //... -const table = useReactTable({ +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel(), @@ -230,7 +230,7 @@ const columns = [ //... ] //... -const table = useReactTable({ +const table = useTable({ columns, data, enableSorting: false, // disable sorting for the entire table @@ -256,7 +256,7 @@ const columns = [ //... ] //... -const table = useReactTable({ +const table = useTable({ columns, data, sortDescFirst: true, //sort by all columns in descending order first (default is ascending for string columns and descending for number columns) @@ -321,7 +321,7 @@ Once a column is sorted and `enableSortingRemoval` is `false`, toggling the sort > Set `enableSortingRemoval` to `false` if you want to ensure that at least one column is always sorted. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, enableSortingRemoval: false, // disable the ability to remove sorting on columns (always none -> asc -> desc -> asc) @@ -346,7 +346,7 @@ const columns = [ //... ] //... -const table = useReactTable({ +const table = useTable({ columns, data, enableMultiSorting: false, // disable multi-sorting for the entire table @@ -358,7 +358,7 @@ const table = useReactTable({ By default, the `Shift` key is used to trigger multi-sorting. You can change this behavior with the `isMultiSortEvent` table option. You can even specify that all sorting events should trigger multi-sorting by returning `true` from the custom function. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, isMultiSortEvent: (e) => true, // normal click triggers multi-sorting @@ -372,7 +372,7 @@ const table = useReactTable({ By default, there is no limit to the number of columns that can be sorted at once. You can set a limit using the `maxMultiSortColCount` table option. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, maxMultiSortColCount: 3, // only allow 3 columns to be sorted at once @@ -384,7 +384,7 @@ const table = useReactTable({ By default, the ability to remove multi-sorts is enabled. You can disable this behavior using the `enableMultiRemove` table option. ```jsx -const table = useReactTable({ +const table = useTable({ columns, data, enableMultiRemove: false, // disable the ability to remove multi-sorts diff --git a/docs/guide/tables.md b/docs/guide/tables.md index 79c0ec7f62..46850827e2 100644 --- a/docs/guide/tables.md +++ b/docs/guide/tables.md @@ -8,9 +8,9 @@ title: Table Instance Guide ## Table Instance Guide -TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `createTable` function (e.g. `useReactTable`, `useVueTable`, `createSolidTable`, `createSvelteTable`, `createAngularTable`, `useQwikTable`). +TanStack Table is a headless UI library. When we talk about the `table` or "table instance", we're not talking about a literal `
` element. Instead, we're referring to the core table object that contains the table state and APIs. The `table` instance is created by calling your adapter's `_createTable` function (e.g. `useTable`, `useTable`, `createTable`, `createTable`, `injectTable`, `useTable`). -The `table` instance that is returned from the `createTable` function (from the framework adapter) is the main object that you will interact with to read and mutate the table state. It is the one place where everything happens in TanStack Table. When you get to the point where you are rendering your UI, you will use APIs from this `table` instance. +The `table` instance that is returned from the `_createTable` function (from the framework adapter) is the main object that you will interact with to read and mutate the table state. It is the one place where everything happens in TanStack Table. When you get to the point where you are rendering your UI, you will use APIs from this `table` instance. ### Creating a Table Instance @@ -39,7 +39,7 @@ This is explained in much more detail in the [Row Models Guide](../row-models), ```ts import { getCoreRowModel } from '@tanstack/[framework]-table' -const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = _createTable({ columns, data, getCoreRowModel: getCoreRowModel() }) ``` #### Initializing the Table Instance @@ -48,28 +48,28 @@ With our `columns`, `data`, and `getCoreRowModel` defined, we can now create our ```ts //vanilla js -const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = _createTable({ columns, data, getCoreRowModel: getCoreRowModel() }) //angular -this.table = createAngularTable({ columns: this.columns, data: this.data(), getCoreRowModel: getCoreRowModel() }) +this.table = injectTable({ columns: this.columns, data: this.data(), getCoreRowModel: getCoreRowModel() }) //lit const table = this.tableController.table({ columns, data, getCoreRowModel: getCoreRowModel() }) //qwik -const table = useQwikTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel() }) //react -const table = useReactTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel() }) //solid -const table = createSolidTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() }) +const table = createTable({ columns, get data() { return data() }, getCoreRowModel: getCoreRowModel() }) //svelte -const table = createSvelteTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = createTable({ columns, data, getCoreRowModel: getCoreRowModel() }) //vue -const table = useVueTable({ columns, data, getCoreRowModel: getCoreRowModel() }) +const table = useTable({ columns, data, getCoreRowModel: getCoreRowModel() }) ``` So what's in the `table` instance? Let's take a look at what interactions we can have with the table instance. diff --git a/docs/vanilla.md b/docs/vanilla.md index 5f2262e52f..5c923d58c0 100644 --- a/docs/vanilla.md +++ b/docs/vanilla.md @@ -4,12 +4,12 @@ title: Vanilla TS/JS The `@tanstack/table-core` library contains the core logic for TanStack Table. If you are using a non-standard framework or don't have access to a framework, you can use the core library directly via TypeScript or JavaScript. -## `createTable` +## `_createTable` Takes an `options` object and returns a table. ```tsx -import { createTable } from '@tanstack/table-core' +import { _createTable } from '@tanstack/table-core' -const table = createTable(options) +const table = _createTable(options) ``` diff --git a/examples/angular/basic/src/app/app.component.ts b/examples/angular/basic/src/app/app.component.ts index 29d0edb180..4bbe5cf5b3 100644 --- a/examples/angular/basic/src/app/app.component.ts +++ b/examples/angular/basic/src/app/app.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core' import { RouterOutlet } from '@angular/router' import { ColumnDef, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, } from '@tanstack/angular-table' @@ -88,7 +88,7 @@ const defaultColumns: ColumnDef[] = [ export class AppComponent { data = signal(defaultData) - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: defaultColumns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/angular/column-ordering/src/app/app.component.ts b/examples/angular/column-ordering/src/app/app.component.ts index 2f447c6f61..8e45048858 100644 --- a/examples/angular/column-ordering/src/app/app.component.ts +++ b/examples/angular/column-ordering/src/app/app.component.ts @@ -7,7 +7,7 @@ import { import { ColumnDef, type ColumnOrderState, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, type VisibilityState, @@ -79,7 +79,7 @@ export class AppComponent { readonly columnVisibility = signal({}) readonly columnOrder = signal([]) - readonly table = createAngularTable(() => ({ + readonly table = injectTable(() => ({ data: this.data(), columns: defaultColumns, state: { diff --git a/examples/angular/column-pinning-sticky/src/app/app.component.ts b/examples/angular/column-pinning-sticky/src/app/app.component.ts index c9fe3ce9e6..ae1a080d2c 100644 --- a/examples/angular/column-pinning-sticky/src/app/app.component.ts +++ b/examples/angular/column-pinning-sticky/src/app/app.component.ts @@ -9,7 +9,7 @@ import { ColumnDef, type ColumnOrderState, type ColumnPinningState, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, type VisibilityState, @@ -88,7 +88,7 @@ export class AppComponent { readonly columnPinning = signal({}) readonly split = signal(false) - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: this.columns(), getCoreRowModel: getCoreRowModel(), diff --git a/examples/angular/column-pinning/src/app/app.component.ts b/examples/angular/column-pinning/src/app/app.component.ts index 3784a0782c..663b9e021b 100644 --- a/examples/angular/column-pinning/src/app/app.component.ts +++ b/examples/angular/column-pinning/src/app/app.component.ts @@ -8,7 +8,7 @@ import { ColumnDef, type ColumnOrderState, type ColumnPinningState, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, type VisibilityState, @@ -92,7 +92,7 @@ export class AppComponent { readonly columnPinning = signal({}) readonly split = signal(false) - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: defaultColumns, state: { diff --git a/examples/angular/column-visibility/src/app/app.component.ts b/examples/angular/column-visibility/src/app/app.component.ts index c38a366b3c..7630950c78 100644 --- a/examples/angular/column-visibility/src/app/app.component.ts +++ b/examples/angular/column-visibility/src/app/app.component.ts @@ -7,7 +7,7 @@ import { } from '@angular/core' import { ColumnDef, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, type VisibilityState, @@ -112,7 +112,7 @@ export class AppComponent implements OnInit { data = signal([]) readonly columnVisibility = signal({}) - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: defaultColumns, state: { diff --git a/examples/angular/filters/src/app/app.component.ts b/examples/angular/filters/src/app/app.component.ts index 1748a57674..6c6d8291d6 100644 --- a/examples/angular/filters/src/app/app.component.ts +++ b/examples/angular/filters/src/app/app.component.ts @@ -7,7 +7,7 @@ import { import { ColumnDef, type ColumnFiltersState, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, getFacetedMinMaxValues, @@ -74,7 +74,7 @@ export class AppComponent { }, ] - table = createAngularTable(() => ({ + table = injectTable(() => ({ columns: this.columns, data: this.data(), state: { diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.component.ts index 524f3c152f..b39598244f 100644 --- a/examples/angular/grouping/src/app/app.component.ts +++ b/examples/angular/grouping/src/app/app.component.ts @@ -9,7 +9,7 @@ import { FlexRenderDirective, GroupingState, Updater, - createAngularTable, + injectTable, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, @@ -54,7 +54,7 @@ export class AppComponent { debugTable: true, })) - table = createAngularTable(this.tableOptions) + table = injectTable(this.tableOptions) onPageInputChange(event: any): void { const page = event.target.value ? Number(event.target.value) - 1 : 0 diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts index 5e2e103b4a..f2aa54b98a 100644 --- a/examples/angular/row-selection-signal/src/app/app.component.ts +++ b/examples/angular/row-selection-signal/src/app/app.component.ts @@ -8,7 +8,7 @@ import { } from '@angular/core' import { ColumnDef, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, getFilteredRowModel, @@ -95,7 +95,7 @@ export class AppComponent { }, ] - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: this.columns, state: { diff --git a/examples/angular/row-selection/src/app/app.component.ts b/examples/angular/row-selection/src/app/app.component.ts index 8711fd3959..0a039b55bf 100644 --- a/examples/angular/row-selection/src/app/app.component.ts +++ b/examples/angular/row-selection/src/app/app.component.ts @@ -8,7 +8,7 @@ import { } from '@angular/core' import { ColumnDef, - createAngularTable, + injectTable, FlexRenderComponent, FlexRenderDirective, getCoreRowModel, @@ -101,7 +101,7 @@ export class AppComponent { }, ] - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: this.columns, state: { diff --git a/examples/angular/signal-input/src/app/person-table/person-table.component.ts b/examples/angular/signal-input/src/app/person-table/person-table.component.ts index 29a8622ce9..a733daab17 100644 --- a/examples/angular/signal-input/src/app/person-table/person-table.component.ts +++ b/examples/angular/signal-input/src/app/person-table/person-table.component.ts @@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, input, model } from '@angular/core' import type { Person } from '../makeData' import { ColumnDef, - createAngularTable, + injectTable, FlexRenderDirective, getCoreRowModel, getExpandedRowModel, @@ -38,7 +38,7 @@ export class PersonTableComponent { }, ] - table = createAngularTable(() => { + table = injectTable(() => { return { data: this.data(), columns: this.columns, diff --git a/examples/qwik/basic/src/main.tsx b/examples/qwik/basic/src/main.tsx index c25919e845..bc93ab5629 100644 --- a/examples/qwik/basic/src/main.tsx +++ b/examples/qwik/basic/src/main.tsx @@ -7,7 +7,7 @@ import { createColumnHelper, getCoreRowModel, flexRender, - useQwikTable, + useTable, } from '@tanstack/qwik-table' type Person = { @@ -87,7 +87,7 @@ const columns = [ ] const App = component$(() => { - const table = useQwikTable({ + const table = useTable({ columns, data: defaultData, getCoreRowModel: getCoreRowModel(), diff --git a/examples/qwik/filters/src/main.tsx b/examples/qwik/filters/src/main.tsx index 95063efa5f..3217bdab37 100644 --- a/examples/qwik/filters/src/main.tsx +++ b/examples/qwik/filters/src/main.tsx @@ -9,7 +9,7 @@ import { getPaginationRowModel, getSortedRowModel, flexRender, - useQwikTable, + useTable, ColumnFiltersState, SortingFn, FilterFn, @@ -171,7 +171,7 @@ const App = component$(() => { const columnFilters = useSignal([]) const globalFilter = useSignal('') - const table = useQwikTable({ + const table = useTable({ data: defaultData, columns, enableSorting: true, diff --git a/examples/qwik/row-selection/src/main.tsx b/examples/qwik/row-selection/src/main.tsx index 3c24e842a7..ecdb8caf3b 100644 --- a/examples/qwik/row-selection/src/main.tsx +++ b/examples/qwik/row-selection/src/main.tsx @@ -8,7 +8,7 @@ import { getCoreRowModel, getSortedRowModel, flexRender, - useQwikTable, + useTable, getFilteredRowModel, ColumnDef, } from '@tanstack/qwik-table' @@ -127,7 +127,7 @@ const columns: ColumnDef[] = [ const App = component$(() => { const rowSelection = useSignal({}) - const table = useQwikTable({ + const table = useTable({ columns, data: defaultData, getCoreRowModel: getCoreRowModel(), diff --git a/examples/qwik/sorting/src/main.tsx b/examples/qwik/sorting/src/main.tsx index d1a4d4488f..b785aca046 100644 --- a/examples/qwik/sorting/src/main.tsx +++ b/examples/qwik/sorting/src/main.tsx @@ -7,7 +7,7 @@ import { makeData } from './makeData' import { getCoreRowModel, flexRender, - useQwikTable, + useTable, SortingState, ColumnDef, getSortedRowModel, @@ -69,7 +69,7 @@ const App = component$(() => { const sorting = useSignal([]) - const table = useQwikTable({ + const table = useTable({ columns, data: data.value, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx index c1f615525e..fc94f52a7b 100644 --- a/examples/react/basic/src/main.tsx +++ b/examples/react/basic/src/main.tsx @@ -7,7 +7,7 @@ import { createColumnHelper, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' type Person = { @@ -82,7 +82,7 @@ function App() { const [data, _setData] = React.useState(() => [...defaultData]) const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/bootstrap/src/main.tsx b/examples/react/bootstrap/src/main.tsx index f06911f9b4..1ab7c45628 100644 --- a/examples/react/bootstrap/src/main.tsx +++ b/examples/react/bootstrap/src/main.tsx @@ -9,7 +9,7 @@ import { ColumnDef, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -69,7 +69,7 @@ function App() { const [data, setData] = React.useState(makeData(10)) const rerender = () => setData(makeData(10)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/column-dnd/src/main.tsx b/examples/react/column-dnd/src/main.tsx index 9365e35ccb..63c1efb6c9 100644 --- a/examples/react/column-dnd/src/main.tsx +++ b/examples/react/column-dnd/src/main.tsx @@ -9,7 +9,7 @@ import { Header, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -139,7 +139,7 @@ function App() { const rerender = () => setData(() => makeData(20)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/column-groups/src/main.tsx b/examples/react/column-groups/src/main.tsx index d17fbf67e8..124003d8a3 100644 --- a/examples/react/column-groups/src/main.tsx +++ b/examples/react/column-groups/src/main.tsx @@ -7,7 +7,7 @@ import { createColumnHelper, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' type Person = { @@ -99,7 +99,7 @@ function App() { const [data, _setData] = React.useState(() => [...defaultData]) const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/column-ordering/src/main.tsx b/examples/react/column-ordering/src/main.tsx index 470e02d49e..e8a188b2c3 100644 --- a/examples/react/column-ordering/src/main.tsx +++ b/examples/react/column-ordering/src/main.tsx @@ -9,7 +9,7 @@ import { ColumnOrderState, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -74,7 +74,7 @@ function App() { const rerender = () => setData(() => makeData(20)) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/column-pinning-sticky/src/main.tsx b/examples/react/column-pinning-sticky/src/main.tsx index 4a554cf39b..ea2b230b42 100644 --- a/examples/react/column-pinning-sticky/src/main.tsx +++ b/examples/react/column-pinning-sticky/src/main.tsx @@ -8,7 +8,7 @@ import { ColumnDef, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' import { faker } from '@faker-js/faker' @@ -91,7 +91,7 @@ function App() { const rerender = () => setData(() => makeData(30)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/column-pinning/src/main.tsx b/examples/react/column-pinning/src/main.tsx index 6c862dc1b2..c1afaa1212 100644 --- a/examples/react/column-pinning/src/main.tsx +++ b/examples/react/column-pinning/src/main.tsx @@ -9,7 +9,7 @@ import { ColumnOrderState, flexRender, getCoreRowModel, - useReactTable, + useTable, VisibilityState, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -78,7 +78,7 @@ function App() { const [isSplit, setIsSplit] = React.useState(false) const rerender = () => setData(() => makeData(5000)) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/column-resizing-performant/src/main.tsx b/examples/react/column-resizing-performant/src/main.tsx index 089060f209..703c6df942 100644 --- a/examples/react/column-resizing-performant/src/main.tsx +++ b/examples/react/column-resizing-performant/src/main.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - useReactTable, + useTable, getCoreRowModel, ColumnDef, flexRender, @@ -76,7 +76,7 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, defaultColumn: { diff --git a/examples/react/column-sizing/src/main.tsx b/examples/react/column-sizing/src/main.tsx index 086d950775..518b25a730 100644 --- a/examples/react/column-sizing/src/main.tsx +++ b/examples/react/column-sizing/src/main.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - useReactTable, + useTable, ColumnResizeMode, getCoreRowModel, ColumnDef, @@ -114,7 +114,7 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, columnResizeMode, diff --git a/examples/react/column-visibility/src/main.tsx b/examples/react/column-visibility/src/main.tsx index cf35b07f05..f545bce76b 100644 --- a/examples/react/column-visibility/src/main.tsx +++ b/examples/react/column-visibility/src/main.tsx @@ -7,7 +7,7 @@ import { ColumnDef, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' type Person = { @@ -107,7 +107,7 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/custom-features/src/main.tsx b/examples/react/custom-features/src/main.tsx index 5bad334d38..f2cc2b7219 100644 --- a/examples/react/custom-features/src/main.tsx +++ b/examples/react/custom-features/src/main.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - useReactTable, + useTable, makeStateUpdater, getSortedRowModel, getPaginationRowModel, @@ -70,7 +70,7 @@ declare module '@tanstack/react-table' { // Here is all of the actual javascript code for our new feature export const DensityFeature: TableFeature = { // define the new feature's initial state - getInitialState: (state): DensityTableState => { + _getInitialState: (state): DensityTableState => { return { density: 'md', ...state, @@ -78,7 +78,7 @@ export const DensityFeature: TableFeature = { }, // define the new feature's default options - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): DensityOptions => { return { @@ -87,12 +87,12 @@ export const DensityFeature: TableFeature = { } as DensityOptions }, // if you need to add a default column definition... - // getDefaultColumnDef: (): Partial> => { + // _getDefaultColumnDef: (): Partial> => { // return { meta: {} } //use meta instead of directly adding to the columnDef to avoid typescript stuff that's hard to workaround // }, // define the new feature's table instance methods - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setDensity = updater => { const safeUpdater: Updater = old => { let newState = functionalUpdate(updater, old) @@ -109,13 +109,13 @@ export const DensityFeature: TableFeature = { }, // if you need to add row instance APIs... - // createRow: (row, table): void => {}, + // _createRow: (row, table): void => {}, // if you need to add cell instance APIs... - // createCell: (cell, column, row, table): void => {}, + // _createCell: (cell, column, row, table): void => {}, // if you need to add column instance APIs... - // createColumn: (column, table): void => {}, + // _createColumn: (column, table): void => {}, // if you need to add header instance APIs... - // createHeader: (header, table): void => {}, + // _createHeader: (header, table): void => {}, } //end of custom feature code @@ -162,7 +162,7 @@ function App() { const [data, _setData] = React.useState(() => makeData(1000)) const [density, setDensity] = React.useState('md') - const table = useReactTable({ + const table = useTable({ _features: [DensityFeature], //pass our custom feature to the table to be instantiated upon creation columns, data, diff --git a/examples/react/editable-data/src/main.tsx b/examples/react/editable-data/src/main.tsx index 71f98371b8..a3b8eeb65f 100644 --- a/examples/react/editable-data/src/main.tsx +++ b/examples/react/editable-data/src/main.tsx @@ -9,7 +9,7 @@ import { Column, Table, ColumnDef, - useReactTable, + useTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, @@ -128,7 +128,7 @@ function App() { const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper() - const table = useReactTable({ + const table = useTable({ data, columns, defaultColumn, diff --git a/examples/react/expanding/src/main.tsx b/examples/react/expanding/src/main.tsx index 6c5701ccce..42f4e74eed 100644 --- a/examples/react/expanding/src/main.tsx +++ b/examples/react/expanding/src/main.tsx @@ -7,7 +7,7 @@ import { Column, Table, ExpandedState, - useReactTable, + useTable, getCoreRowModel, getPaginationRowModel, getFilteredRowModel, @@ -115,7 +115,7 @@ function App() { const [expanded, setExpanded] = React.useState({}) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/filters-faceted/src/main.tsx b/examples/react/filters-faceted/src/main.tsx index 76ae112325..29bdc8e4e6 100644 --- a/examples/react/filters-faceted/src/main.tsx +++ b/examples/react/filters-faceted/src/main.tsx @@ -16,7 +16,7 @@ import { getFilteredRowModel, getPaginationRowModel, getSortedRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -82,7 +82,7 @@ function App() { const [data, setData] = React.useState(() => makeData(5_000)) const refreshData = () => setData(_old => makeData(100_000)) //stress test - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/filters-fuzzy/src/main.tsx b/examples/react/filters-fuzzy/src/main.tsx index 5c207bc51a..226bfe1f45 100644 --- a/examples/react/filters-fuzzy/src/main.tsx +++ b/examples/react/filters-fuzzy/src/main.tsx @@ -15,7 +15,7 @@ import { getPaginationRowModel, getSortedRowModel, sortingFns, - useReactTable, + useTable, } from '@tanstack/react-table' // A TanStack fork of Kent C. Dodds' match-sorter library that provides ranking information @@ -109,7 +109,7 @@ function App() { const [data, setData] = React.useState(() => makeData(5_000)) const refreshData = () => setData(_old => makeData(50_000)) //stress test - const table = useReactTable({ + const table = useTable({ data, columns, filterFns: { diff --git a/examples/react/filters/src/main.tsx b/examples/react/filters/src/main.tsx index 43a4c1370f..5b8b80f06b 100644 --- a/examples/react/filters/src/main.tsx +++ b/examples/react/filters/src/main.tsx @@ -13,7 +13,7 @@ import { getFilteredRowModel, getPaginationRowModel, getSortedRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -85,7 +85,7 @@ function App() { const [data, setData] = React.useState(() => makeData(5_000)) const refreshData = () => setData(_old => makeData(50_000)) //stress test - const table = useReactTable({ + const table = useTable({ data, columns, filterFns: {}, diff --git a/examples/react/full-width-resizable-table/src/main.tsx b/examples/react/full-width-resizable-table/src/main.tsx index 7ac6e8dd6f..7c98b5637b 100644 --- a/examples/react/full-width-resizable-table/src/main.tsx +++ b/examples/react/full-width-resizable-table/src/main.tsx @@ -6,7 +6,7 @@ import { getCoreRowModel, ColumnDef, flexRender, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -65,7 +65,7 @@ const columns: ColumnDef[] = [ function App() { const data = React.useMemo(() => makeData(20), []) - const table = useReactTable({ + const table = useTable({ data, columns, enableColumnResizing: true, diff --git a/examples/react/full-width-table/src/main.tsx b/examples/react/full-width-table/src/main.tsx index 7d3bbb225e..e24028d034 100644 --- a/examples/react/full-width-table/src/main.tsx +++ b/examples/react/full-width-table/src/main.tsx @@ -4,7 +4,7 @@ import './index.css' import { PaginationState, - useReactTable, + useTable, getCoreRowModel, getPaginationRowModel, ColumnDef, @@ -73,7 +73,7 @@ function App() { pageSize: 10, }) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/fully-controlled/src/main.tsx b/examples/react/fully-controlled/src/main.tsx index eb929844d9..5d6e3fe726 100644 --- a/examples/react/fully-controlled/src/main.tsx +++ b/examples/react/fully-controlled/src/main.tsx @@ -8,7 +8,7 @@ import { flexRender, getCoreRowModel, getPaginationRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData } from './makeData' @@ -82,7 +82,7 @@ function App() { const rerender = React.useReducer(() => ({}), {})[1] // Create the table and pass your options - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/grouping/src/main.tsx b/examples/react/grouping/src/main.tsx index dea75f2aff..b2c0722364 100644 --- a/examples/react/grouping/src/main.tsx +++ b/examples/react/grouping/src/main.tsx @@ -5,7 +5,7 @@ import './index.css' import { GroupingState, - useReactTable, + useTable, getPaginationRowModel, getFilteredRowModel, getCoreRowModel, @@ -87,7 +87,7 @@ function App() { const [grouping, setGrouping] = React.useState([]) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/kitchen-sink/src/App.tsx b/examples/react/kitchen-sink/src/App.tsx index d97988b521..adac57d069 100644 --- a/examples/react/kitchen-sink/src/App.tsx +++ b/examples/react/kitchen-sink/src/App.tsx @@ -9,7 +9,7 @@ import { getPaginationRowModel, getSortedRowModel, GroupingState, - useReactTable, + useTable, } from '@tanstack/react-table' import React from 'react' import { makeData } from './makeData' @@ -87,7 +87,7 @@ export const App = () => { const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper() - const table = useReactTable({ + const table = useTable({ data, columns, defaultColumn, diff --git a/examples/react/material-ui-pagination/src/main.tsx b/examples/react/material-ui-pagination/src/main.tsx index beddb100aa..1170371f1f 100644 --- a/examples/react/material-ui-pagination/src/main.tsx +++ b/examples/react/material-ui-pagination/src/main.tsx @@ -16,7 +16,7 @@ import Paper from '@mui/material/Paper' import { Column, Table as ReactTable, - useReactTable, + useTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, @@ -109,7 +109,7 @@ function LocalTable({ data: Person[] columns: ColumnDef[] }) { - const table = useReactTable({ + const table = useTable({ data, columns, // Pipeline diff --git a/examples/react/pagination-controlled/src/main.tsx b/examples/react/pagination-controlled/src/main.tsx index e0699e415e..757fdab90e 100644 --- a/examples/react/pagination-controlled/src/main.tsx +++ b/examples/react/pagination-controlled/src/main.tsx @@ -12,7 +12,7 @@ import './index.css' import { PaginationState, - useReactTable, + useTable, getCoreRowModel, ColumnDef, flexRender, @@ -95,7 +95,7 @@ function App() { const defaultData = React.useMemo(() => [], []) - const table = useReactTable({ + const table = useTable({ data: dataQuery.data?.rows ?? defaultData, columns, // 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) diff --git a/examples/react/pagination/src/main.tsx b/examples/react/pagination/src/main.tsx index 0da85368f4..7ea089f29c 100644 --- a/examples/react/pagination/src/main.tsx +++ b/examples/react/pagination/src/main.tsx @@ -13,7 +13,7 @@ import { getFilteredRowModel, getPaginationRowModel, getSortedRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -93,7 +93,7 @@ function MyTable({ pageSize: 10, }) - const table = useReactTable({ + const table = useTable({ columns, data, debugTable: true, diff --git a/examples/react/row-dnd/src/main.tsx b/examples/react/row-dnd/src/main.tsx index c8f3e23b00..5b4d7d8c26 100644 --- a/examples/react/row-dnd/src/main.tsx +++ b/examples/react/row-dnd/src/main.tsx @@ -8,7 +8,7 @@ import { Row, flexRender, getCoreRowModel, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -122,7 +122,7 @@ function App() { const rerender = () => setData(() => makeData(20)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/row-pinning/src/main.tsx b/examples/react/row-pinning/src/main.tsx index 8f44edf2ae..7feb809c93 100644 --- a/examples/react/row-pinning/src/main.tsx +++ b/examples/react/row-pinning/src/main.tsx @@ -17,7 +17,7 @@ import { Row, RowPinningState, Table, - useReactTable, + useTable, } from '@tanstack/react-table' function App() { @@ -142,7 +142,7 @@ function App() { const [data, setData] = React.useState(() => makeData(1000, 2, 2)) const refreshData = () => setData(() => makeData(1000, 2, 2)) - const table = useReactTable({ + const table = useTable({ data, columns, initialState: { pagination: { pageSize: 20, pageIndex: 0 } }, diff --git a/examples/react/row-selection/src/main.tsx b/examples/react/row-selection/src/main.tsx index 05a22ca29e..b8808b7ba7 100644 --- a/examples/react/row-selection/src/main.tsx +++ b/examples/react/row-selection/src/main.tsx @@ -13,7 +13,7 @@ import { getFilteredRowModel, getPaginationRowModel, Table, - useReactTable, + useTable, } from '@tanstack/react-table' function App() { @@ -104,7 +104,7 @@ function App() { const [data, setData] = React.useState(() => makeData(100000)) const refreshData = () => setData(() => makeData(100000)) - const table = useReactTable({ + const table = useTable({ data, columns, state: { diff --git a/examples/react/sorting/src/main.tsx b/examples/react/sorting/src/main.tsx index 3a5ba39de4..9a67ba0c18 100644 --- a/examples/react/sorting/src/main.tsx +++ b/examples/react/sorting/src/main.tsx @@ -10,7 +10,7 @@ import { getSortedRowModel, SortingFn, SortingState, - useReactTable, + useTable, } from '@tanstack/react-table' import { makeData, Person } from './makeData' @@ -79,7 +79,7 @@ function App() { const [data, setData] = React.useState(() => makeData(1_000)) const refreshData = () => setData(() => makeData(100_000)) //stress test with 100k rows - const table = useReactTable({ + const table = useTable({ columns, data, debugTable: true, diff --git a/examples/react/sub-components/src/main.tsx b/examples/react/sub-components/src/main.tsx index 4890d12c5d..33c2e16053 100644 --- a/examples/react/sub-components/src/main.tsx +++ b/examples/react/sub-components/src/main.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client' import './index.css' import { - useReactTable, + useTable, getCoreRowModel, getExpandedRowModel, ColumnDef, @@ -109,7 +109,7 @@ function Table({ renderSubComponent, getRowCanExpand, }: TableProps): JSX.Element { - const table = useReactTable({ + const table = useTable({ data, columns, getRowCanExpand, diff --git a/examples/react/virtualized-columns/src/main.tsx b/examples/react/virtualized-columns/src/main.tsx index 982b6447db..caba6ea5bc 100644 --- a/examples/react/virtualized-columns/src/main.tsx +++ b/examples/react/virtualized-columns/src/main.tsx @@ -9,7 +9,7 @@ import { getCoreRowModel, getSortedRowModel, Row, - useReactTable, + useTable, } from '@tanstack/react-table' import { useVirtualizer } from '@tanstack/react-virtual' @@ -24,7 +24,7 @@ function App() { const [data, _setData] = React.useState(() => makeData(1_000, columns)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/react/virtualized-infinite-scrolling/src/main.tsx b/examples/react/virtualized-infinite-scrolling/src/main.tsx index 34d0025d00..e5b66b1632 100644 --- a/examples/react/virtualized-infinite-scrolling/src/main.tsx +++ b/examples/react/virtualized-infinite-scrolling/src/main.tsx @@ -12,7 +12,7 @@ import { OnChangeFn, Row, SortingState, - useReactTable, + useTable, } from '@tanstack/react-table' import { keepPreviousData, @@ -127,7 +127,7 @@ function App() { fetchMoreOnBottomReached(tableContainerRef.current) }, [fetchMoreOnBottomReached]) - const table = useReactTable({ + const table = useTable({ data: flatData, columns, state: { diff --git a/examples/react/virtualized-rows/src/main.tsx b/examples/react/virtualized-rows/src/main.tsx index 630f3775de..df8cd7355f 100644 --- a/examples/react/virtualized-rows/src/main.tsx +++ b/examples/react/virtualized-rows/src/main.tsx @@ -9,7 +9,7 @@ import { getCoreRowModel, getSortedRowModel, Row, - useReactTable, + useTable, } from '@tanstack/react-table' import { useVirtualizer } from '@tanstack/react-virtual' @@ -67,7 +67,7 @@ function App() { const [data, _setData] = React.useState(() => makeData(50_000)) - const table = useReactTable({ + const table = useTable({ data, columns, getCoreRowModel: getCoreRowModel(), diff --git a/examples/solid/basic/src/App.tsx b/examples/solid/basic/src/App.tsx index 8a988dcfc0..33e04a2ee6 100644 --- a/examples/solid/basic/src/App.tsx +++ b/examples/solid/basic/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' @@ -81,7 +81,7 @@ function App() { const [data, setData] = createSignal(defaultData) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/bootstrap/src/App.tsx b/examples/solid/bootstrap/src/App.tsx index 781adc6daa..4e9e32a785 100644 --- a/examples/solid/bootstrap/src/App.tsx +++ b/examples/solid/bootstrap/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' import { makeData, Person } from './makeData' @@ -66,7 +66,7 @@ function App() { const [data, setData] = createSignal(makeData(10)) const rerender = () => setData(makeData(10)) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/column-groups/src/App.tsx b/examples/solid/column-groups/src/App.tsx index 27e9526967..84ef2e016c 100644 --- a/examples/solid/column-groups/src/App.tsx +++ b/examples/solid/column-groups/src/App.tsx @@ -2,7 +2,7 @@ import { flexRender, getCoreRowModel, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { createSignal, For } from 'solid-js' @@ -98,7 +98,7 @@ function App() { const [data, setData] = createSignal(defaultData) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/column-ordering/src/App.tsx b/examples/solid/column-ordering/src/App.tsx index f09d5a9ee0..e2cd56d4f6 100644 --- a/examples/solid/column-ordering/src/App.tsx +++ b/examples/solid/column-ordering/src/App.tsx @@ -7,7 +7,7 @@ import { ColumnOrderState, VisibilityState, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' const defaultColumns: ColumnDef[] = [ @@ -70,7 +70,7 @@ function App() { ) const rerender = () => setData(() => makeData(20)) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/column-visibility/src/App.tsx b/examples/solid/column-visibility/src/App.tsx index d972aabdd4..4fab41842a 100644 --- a/examples/solid/column-visibility/src/App.tsx +++ b/examples/solid/column-visibility/src/App.tsx @@ -3,7 +3,7 @@ import { getCoreRowModel, VisibilityState, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { createSignal, For, Show } from 'solid-js' @@ -102,7 +102,7 @@ function App() { ) const rerender = () => setData(defaultData) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/filters/src/App.tsx b/examples/solid/filters/src/App.tsx index c9c8989657..2f4cb3d591 100644 --- a/examples/solid/filters/src/App.tsx +++ b/examples/solid/filters/src/App.tsx @@ -7,7 +7,7 @@ import { getFacetedMinMaxValues, ColumnDef, ColumnFiltersState, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { debounce } from '@solid-primitives/scheduled' import { makeData, Person } from './makeData' @@ -76,7 +76,7 @@ function App() { ) const refreshData = () => setData(makeData(50000)) - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/solid/sorting/src/App.tsx b/examples/solid/sorting/src/App.tsx index 8b73cc3ad8..ae543390e8 100644 --- a/examples/solid/sorting/src/App.tsx +++ b/examples/solid/sorting/src/App.tsx @@ -4,7 +4,7 @@ import { getSortedRowModel, SortingState, ColumnDef, - createSolidTable, + createTable, } from '@tanstack/solid-table' import { makeData, Person } from './makeData' import { createSignal, For, Show } from 'solid-js' @@ -66,7 +66,7 @@ function App() { }, ] - const table = createSolidTable({ + const table = createTable({ get data() { return data() }, diff --git a/examples/svelte/basic/src/App.svelte b/examples/svelte/basic/src/App.svelte index fb9217f274..f25537f032 100644 --- a/examples/svelte/basic/src/App.svelte +++ b/examples/svelte/basic/src/App.svelte @@ -1,7 +1,7 @@
diff --git a/examples/svelte/column-groups/src/App.svelte b/examples/svelte/column-groups/src/App.svelte index 79a0b5903e..f3f4cf78f4 100644 --- a/examples/svelte/column-groups/src/App.svelte +++ b/examples/svelte/column-groups/src/App.svelte @@ -1,7 +1,7 @@
diff --git a/examples/svelte/column-ordering/src/App.svelte b/examples/svelte/column-ordering/src/App.svelte index 18b41eaefc..43143522a0 100644 --- a/examples/svelte/column-ordering/src/App.svelte +++ b/examples/svelte/column-ordering/src/App.svelte @@ -9,7 +9,7 @@ } from '@tanstack/svelte-table' import { FlexRender, - createSvelteTable, + createTable, getCoreRowModel, getSortedRowModel, } from '@tanstack/svelte-table' @@ -101,7 +101,7 @@ ) } - const table = createSvelteTable(options) + const table = createTable(options)
diff --git a/examples/svelte/column-pinning/src/App.svelte b/examples/svelte/column-pinning/src/App.svelte index 052ad3536f..112bcc0640 100644 --- a/examples/svelte/column-pinning/src/App.svelte +++ b/examples/svelte/column-pinning/src/App.svelte @@ -9,7 +9,7 @@ } from '@tanstack/svelte-table' import { FlexRender, - createSvelteTable, + createTable, getCoreRowModel, getSortedRowModel, } from '@tanstack/svelte-table' @@ -108,7 +108,7 @@ ) } - const table = createSvelteTable(options) + const table = createTable(options)
diff --git a/examples/svelte/column-visibility/src/App.svelte b/examples/svelte/column-visibility/src/App.svelte index 2de2fa3091..3b593766a9 100644 --- a/examples/svelte/column-visibility/src/App.svelte +++ b/examples/svelte/column-visibility/src/App.svelte @@ -7,7 +7,7 @@ } from '@tanstack/svelte-table' import { FlexRender, - createSvelteTable, + createTable, getCoreRowModel, getSortedRowModel, } from '@tanstack/svelte-table' @@ -123,7 +123,7 @@ debugTable: true, } - const table = createSvelteTable(options) + const table = createTable(options)
diff --git a/examples/svelte/filtering/src/App.svelte b/examples/svelte/filtering/src/App.svelte index ea111c81e5..d033fa06af 100644 --- a/examples/svelte/filtering/src/App.svelte +++ b/examples/svelte/filtering/src/App.svelte @@ -7,7 +7,7 @@ } from '@tanstack/svelte-table' import { FlexRender, - createSvelteTable, + createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, @@ -65,7 +65,7 @@ enableMultiRowSelection: true, } - const table = createSvelteTable(options) + const table = createTable(options) $effect(() => { table.setGlobalFilter(globalFilter) diff --git a/examples/svelte/sorting/src/App.svelte b/examples/svelte/sorting/src/App.svelte index 21ed3079af..11afa5b1b4 100644 --- a/examples/svelte/sorting/src/App.svelte +++ b/examples/svelte/sorting/src/App.svelte @@ -7,7 +7,7 @@ } from '@tanstack/svelte-table' import { FlexRender, - createSvelteTable, + createTable, getCoreRowModel, getSortedRowModel, renderComponent, @@ -105,7 +105,7 @@ data = makeData(100_000) } - const table = createSvelteTable(options) + const table = createTable(options)
diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue index 37bec1c34c..8522f9c384 100644 --- a/examples/vue/basic/src/App.vue +++ b/examples/vue/basic/src/App.vue @@ -2,7 +2,7 @@ import { FlexRender, getCoreRowModel, - useVueTable, + useTable, createColumnHelper, } from '@tanstack/vue-table' import { ref } from 'vue' @@ -97,7 +97,7 @@ const rerender = () => { data.value = defaultData } -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/examples/vue/column-ordering/src/App.vue b/examples/vue/column-ordering/src/App.vue index 7cd177465f..b7bbd54c06 100644 --- a/examples/vue/column-ordering/src/App.vue +++ b/examples/vue/column-ordering/src/App.vue @@ -3,7 +3,7 @@ import { type ColumnOrderState, FlexRender, getCoreRowModel, - useVueTable, + useTable, type Column, createColumnHelper, } from '@tanstack/vue-table' @@ -66,7 +66,7 @@ const columnOrder = ref([]) const rerender = () => (data.value = makeData(20)) -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/examples/vue/column-pinning/src/App.vue b/examples/vue/column-pinning/src/App.vue index cb2c4d8420..66ccf452fa 100644 --- a/examples/vue/column-pinning/src/App.vue +++ b/examples/vue/column-pinning/src/App.vue @@ -3,7 +3,7 @@ import { createColumnHelper, FlexRender, getCoreRowModel, - useVueTable, + useTable, } from '@tanstack/vue-table' import type { Column, @@ -74,7 +74,7 @@ const isSplit = ref(false) const rerender = () => (data.value = makeData(5000)) -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/examples/vue/pagination-controlled/src/App.vue b/examples/vue/pagination-controlled/src/App.vue index 7dabf4cdb0..d9cb51fa5a 100644 --- a/examples/vue/pagination-controlled/src/App.vue +++ b/examples/vue/pagination-controlled/src/App.vue @@ -4,7 +4,7 @@ import { ref } from 'vue' import { FlexRender, getCoreRowModel, - useVueTable, + useTable, createColumnHelper, PaginationState, } from '@tanstack/vue-table' @@ -39,7 +39,7 @@ const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1) const { data, isLoading, pageCount } = useService(pagination) -const table = useVueTable({ +const table = useTable({ get data() { return data.value ?? [] }, diff --git a/examples/vue/pagination/src/App.vue b/examples/vue/pagination/src/App.vue index 8e92ffc60a..7e20146bc2 100644 --- a/examples/vue/pagination/src/App.vue +++ b/examples/vue/pagination/src/App.vue @@ -3,7 +3,7 @@ import { FlexRender, getCoreRowModel, getPaginationRowModel, - useVueTable, + useTable, createColumnHelper, } from '@tanstack/vue-table' import { ref } from 'vue' @@ -63,7 +63,7 @@ const columns = [ }), ] -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/examples/vue/row-selection/src/App.vue b/examples/vue/row-selection/src/App.vue index af1200acb4..5e4dd26d9a 100644 --- a/examples/vue/row-selection/src/App.vue +++ b/examples/vue/row-selection/src/App.vue @@ -2,7 +2,7 @@ import { FlexRender, getCoreRowModel, - useVueTable, + useTable, createColumnHelper, RowSelectionState, } from '@tanstack/vue-table' @@ -89,7 +89,7 @@ const rerender = () => { data.value = makeData(10) } -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/examples/vue/sorting/src/App.vue b/examples/vue/sorting/src/App.vue index 0ca4cd0dfe..b1968fdee6 100644 --- a/examples/vue/sorting/src/App.vue +++ b/examples/vue/sorting/src/App.vue @@ -2,7 +2,7 @@ import { FlexRender, getCoreRowModel, - useVueTable, + useTable, SortingState, createColumnHelper, getSortedRowModel, @@ -76,7 +76,7 @@ const rerender = () => { const sorting = ref([]) -const table = useVueTable({ +const table = useTable({ get data() { return data.value }, diff --git a/nx.json b/nx.json index ec962921bd..dc4a0d45cb 100644 --- a/nx.json +++ b/nx.json @@ -1,7 +1,6 @@ { "$schema": "./node_modules/nx/schemas/nx-schema.json", "defaultBase": "main", - "nxCloudAccessToken": "OWExNzViODMtZjU4Ny00MTRmLTk3ZDYtMGY5YzlkOTRhZDQ2fHJlYWQtb25seQ==", "useInferencePlugins": false, "parallel": 5, "namedInputs": { diff --git a/packages/angular-table/src/__tests__/createAngularTable.test.ts b/packages/angular-table/src/__tests__/createAngularTable.test.ts index 38191f9b8a..a1cf4514df 100644 --- a/packages/angular-table/src/__tests__/createAngularTable.test.ts +++ b/packages/angular-table/src/__tests__/createAngularTable.test.ts @@ -1,7 +1,7 @@ import { describe, test } from 'vitest' import { type ColumnDef, - createAngularTable, + injectTable, getCoreRowModel, type Table, } from '../index' @@ -9,7 +9,7 @@ import { Component, input, isSignal, signal, untracked } from '@angular/core' import { TestBed } from '@angular/core/testing' import { setSignalInputs } from './test-utils' -describe('createAngularTable', () => { +describe('injectTable', () => { test('should render with required signal inputs', () => { @Component({ selector: 'app-fake', @@ -19,7 +19,7 @@ describe('createAngularTable', () => { class FakeComponent { data = input.required() - table = createAngularTable(() => ({ + table = injectTable(() => ({ data: this.data(), columns: [], getCoreRowModel: getCoreRowModel(), @@ -41,7 +41,7 @@ describe('createAngularTable', () => { { id: 'id', header: 'Id', cell: context => context.getValue() }, { id: 'title', header: 'Title', cell: context => context.getValue() }, ] - const table = createAngularTable(() => ({ + const table = injectTable(() => ({ data: data(), columns: columns, getCoreRowModel: getCoreRowModel(), diff --git a/packages/angular-table/src/index.ts b/packages/angular-table/src/index.ts index 086671e0aa..72473caac2 100644 --- a/packages/angular-table/src/index.ts +++ b/packages/angular-table/src/index.ts @@ -4,7 +4,7 @@ import { TableOptions, TableOptionsResolved, TableState, - createTable, + _createTable, type Table, } from '@tanstack/table-core' import { lazyInit } from './lazy-signal-initializer' @@ -19,7 +19,7 @@ export { injectFlexRenderContext, } from './flex-render' -export function createAngularTable( +export function injectTable( options: () => TableOptions ): Table & Signal> { return lazyInit(() => { @@ -30,7 +30,7 @@ export function createAngularTable( ...options(), } - const table = createTable(resolvedOptions) + const table = _createTable(resolvedOptions) // By default, manage table state here using the table's initial state const state = signal(table.initialState) diff --git a/packages/lit-table/src/index.ts b/packages/lit-table/src/index.ts index 1237d6553b..7641bd9c49 100755 --- a/packages/lit-table/src/index.ts +++ b/packages/lit-table/src/index.ts @@ -1,5 +1,5 @@ import { - createTable, + _createTable, RowData, Table, TableOptions, @@ -45,7 +45,7 @@ export class TableController ...options, } - this.tableInstance = createTable(resolvedOptions) + this.tableInstance = _createTable(resolvedOptions) this._tableState = { ...this.tableInstance.initialState, ...options.state, diff --git a/packages/qwik-table/src/index.tsx b/packages/qwik-table/src/index.tsx index 4f7630e965..2a82a50eb7 100644 --- a/packages/qwik-table/src/index.tsx +++ b/packages/qwik-table/src/index.tsx @@ -5,7 +5,7 @@ import { TableOptions, TableOptionsResolved, RowData, - createTable, + _createTable, type Table, } from '@tanstack/table-core' @@ -30,9 +30,7 @@ export function flexRender( ) } -export function useQwikTable( - options: TableOptions -) { +export function useTable(options: TableOptions) { // Compose in the generic options to the user options const resolvedOptions: TableOptionsResolved = { state: {}, @@ -45,7 +43,7 @@ export function useQwikTable( const table = Qwik.useStore<{ instance: Qwik.NoSerialize> }>({ - instance: Qwik.noSerialize(createTable(resolvedOptions)), + instance: Qwik.noSerialize(_createTable(resolvedOptions)), }) // By default, manage table state here using the table's initial state diff --git a/packages/react-table/__tests__/core/core.test.tsx b/packages/react-table/__tests__/core/core.test.tsx index 042fcb6b7b..8eb21fa04c 100644 --- a/packages/react-table/__tests__/core/core.test.tsx +++ b/packages/react-table/__tests__/core/core.test.tsx @@ -2,12 +2,7 @@ import * as React from 'react' import { act, renderHook } from '@testing-library/react-hooks' import * as RTL from '@testing-library/react' -import { - useReactTable, - getCoreRowModel, - ColumnDef, - flexRender, -} from '../../src' +import { useTable, getCoreRowModel, ColumnDef, flexRender } from '../../src' type Person = { firstName: string @@ -108,7 +103,7 @@ describe('core', () => { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, onColumnVisibilityChange: setColumnVisibility, @@ -218,7 +213,7 @@ describe('core', () => { const { result } = renderHook(() => { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data: defaultData, columns: defaultColumns, getCoreRowModel: getCoreRowModel(), @@ -245,7 +240,7 @@ describe('core', () => { const { result } = renderHook(() => { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data: defaultData, columns: defaultColumns, getCoreRowModel: getCoreRowModel(), diff --git a/packages/react-table/__tests__/features/RowSelection.test.tsx b/packages/react-table/__tests__/features/RowSelection.test.tsx index 25be29b130..245e98cad6 100644 --- a/packages/react-table/__tests__/features/RowSelection.test.tsx +++ b/packages/react-table/__tests__/features/RowSelection.test.tsx @@ -3,7 +3,7 @@ import { flexRender, getCoreRowModel, TableOptions, - useReactTable, + useTable, } from '../../src' import { fireEvent, render, screen } from '@testing-library/react' import React, { FC } from 'react' @@ -102,7 +102,7 @@ const defaultPaginatedColumns: ColumnDef[] = [ const TableComponent: FC<{ options?: Partial> }> = ({ options = {}, }) => { - const table = useReactTable({ + const table = useTable({ data: defaultData, columns: defaultColumns, getCoreRowModel: getCoreRowModel(), diff --git a/packages/react-table/__tests__/features/Visibility.test.tsx b/packages/react-table/__tests__/features/Visibility.test.tsx index e121a94988..c0a2fba721 100644 --- a/packages/react-table/__tests__/features/Visibility.test.tsx +++ b/packages/react-table/__tests__/features/Visibility.test.tsx @@ -3,12 +3,7 @@ import * as React from 'react' // import { renderHook } from '@testing-library/react-hooks' import * as RTL from '@testing-library/react' import '@testing-library/jest-dom' -import { - useReactTable, - getCoreRowModel, - ColumnDef, - flexRender, -} from '../../src' +import { useTable, getCoreRowModel, ColumnDef, flexRender } from '../../src' type Person = { firstName: string @@ -98,7 +93,7 @@ const defaultColumns: ColumnDef[] = [ }, ] -describe('useReactTable', () => { +describe('useTable', () => { it('can toggle column visibility', () => { const Table = () => { const [data] = React.useState(() => [...defaultData]) @@ -109,7 +104,7 @@ describe('useReactTable', () => { const rerender = React.useReducer(() => ({}), {})[1] - const table = useReactTable({ + const table = useTable({ data, columns, onColumnVisibilityChange: setColumnVisibility, diff --git a/packages/react-table/__tests__/features/__snapshots__/Visibility.test.tsx.snap b/packages/react-table/__tests__/features/__snapshots__/Visibility.test.tsx.snap index 04b21dd0c0..57ee1d5938 100644 --- a/packages/react-table/__tests__/features/__snapshots__/Visibility.test.tsx.snap +++ b/packages/react-table/__tests__/features/__snapshots__/Visibility.test.tsx.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`useReactTable > can toggle column visibility > 0 - after toggling all off 1`] = ` +exports[`useTable > can toggle column visibility > 0 - after toggling all off 1`] = ` { "footers": [ [], @@ -16,7 +16,7 @@ exports[`useReactTable > can toggle column visibility > 0 - after toggling all o } `; -exports[`useReactTable > can toggle column visibility > 1 - after toggling all on 1`] = ` +exports[`useTable > can toggle column visibility > 1 - after toggling all on 1`] = ` { "footers": [ [ @@ -159,7 +159,7 @@ exports[`useReactTable > can toggle column visibility > 1 - after toggling all o } `; -exports[`useReactTable > can toggle column visibility > 2 - after toggling firstName off 1`] = ` +exports[`useTable > can toggle column visibility > 2 - after toggling firstName off 1`] = ` { "footers": [ [ @@ -283,7 +283,7 @@ exports[`useReactTable > can toggle column visibility > 2 - after toggling first } `; -exports[`useReactTable > can toggle column visibility > 3 - after toggling More Info off 1`] = ` +exports[`useTable > can toggle column visibility > 3 - after toggling More Info off 1`] = ` { "footers": [ [ diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 614cd65b5b..100c90d6aa 100755 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -5,7 +5,7 @@ import { TableOptions, TableOptionsResolved, RowData, - createTable, + _createTable, } from '@tanstack/table-core' export type Renderable = React.ReactNode | React.ComponentType @@ -54,9 +54,7 @@ function isExoticComponent(component: any) { ) } -export function useReactTable( - options: TableOptions -) { +export function useTable(options: TableOptions) { // Compose in the generic options to the user options const resolvedOptions: TableOptionsResolved = { state: {}, // Dummy state @@ -67,7 +65,7 @@ export function useReactTable( // Create a new table and store it in state const [tableRef] = React.useState(() => ({ - current: createTable(resolvedOptions), + current: _createTable(resolvedOptions), })) // By default, manage table state here using the table's initial state diff --git a/packages/solid-table/src/index.tsx b/packages/solid-table/src/index.tsx index a1a0244668..0030836156 100755 --- a/packages/solid-table/src/index.tsx +++ b/packages/solid-table/src/index.tsx @@ -1,7 +1,7 @@ // /** @jsxImportSource solid-js */ import { TableOptions, - createTable, + _createTable, TableOptionsResolved, RowData, } from '@tanstack/table-core' @@ -24,7 +24,7 @@ export function flexRender( return Comp } -export function createSolidTable( +export function createTable( options: TableOptions ) { const resolvedOptions: TableOptionsResolved = mergeProps( @@ -42,7 +42,7 @@ export function createSolidTable( options ) - const table = createTable(resolvedOptions) + const table = _createTable(resolvedOptions) const [state, setState] = createStore(table.initialState) createComputed(() => { diff --git a/packages/svelte-table/src/index.ts b/packages/svelte-table/src/index.ts index 3881252fda..2e02723923 100644 --- a/packages/svelte-table/src/index.ts +++ b/packages/svelte-table/src/index.ts @@ -1,4 +1,4 @@ export * from '@tanstack/table-core' export { default as FlexRender } from './flex-render.svelte' export { renderComponent } from './render-component' -export { createSvelteTable } from './table.svelte' +export { createTable } from './table.svelte' diff --git a/packages/svelte-table/src/table.svelte.ts b/packages/svelte-table/src/table.svelte.ts index 3825dadd28..00633611bd 100644 --- a/packages/svelte-table/src/table.svelte.ts +++ b/packages/svelte-table/src/table.svelte.ts @@ -1,5 +1,5 @@ import { - createTable, + _createTable, type RowData, type TableOptions, type TableOptionsResolved, @@ -13,7 +13,7 @@ import { * @example * ```svelte * * *
@@ -32,7 +32,7 @@ import { *
* ``` */ -export function createSvelteTable( +export function createTable( options: TableOptions ) { const resolvedOptions: TableOptionsResolved = mergeObjects( @@ -50,7 +50,7 @@ export function createSvelteTable( options ) - const table = createTable(resolvedOptions) + const table = _createTable(resolvedOptions) let state = $state>(table.initialState) function updateOptions() { diff --git a/packages/table-core/__tests__/RowPinning.test.ts b/packages/table-core/__tests__/RowPinning.test.ts index dfe4ffda9f..75b06d6a81 100644 --- a/packages/table-core/__tests__/RowPinning.test.ts +++ b/packages/table-core/__tests__/RowPinning.test.ts @@ -1,7 +1,7 @@ import { ColumnDef, createColumnHelper, - createTable, + _createTable, getCoreRowModel, getPaginationRowModel, } from '../src' @@ -21,13 +21,13 @@ function generateColumns(people: Person[]): PersonColumn[] { } describe('RowPinning', () => { - describe('createTable', () => { + describe('_createTable', () => { describe('_getPinnedRows', () => { it('should return pinned rows when keepPinnedRows is true rows are visible', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: true, onStateChange() {}, @@ -57,7 +57,7 @@ describe('RowPinning', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: true, onStateChange() {}, @@ -87,7 +87,7 @@ describe('RowPinning', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: false, onStateChange() {}, @@ -117,7 +117,7 @@ describe('RowPinning', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: false, onStateChange() {}, @@ -147,7 +147,7 @@ describe('RowPinning', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: true, onStateChange() {}, @@ -179,7 +179,7 @@ describe('RowPinning', () => { const data = makeData(10) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: true, onStateChange() {}, @@ -211,7 +211,7 @@ describe('RowPinning', () => { const data = makeData(6) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowPinning: true, keepPinnedRows: true, onStateChange() {}, diff --git a/packages/table-core/__tests__/RowSelection.test.ts b/packages/table-core/__tests__/RowSelection.test.ts index f8d2fc9279..6564be5d1a 100644 --- a/packages/table-core/__tests__/RowSelection.test.ts +++ b/packages/table-core/__tests__/RowSelection.test.ts @@ -1,7 +1,7 @@ import { ColumnDef, createColumnHelper, - createTable, + _createTable, getCoreRowModel, } from '../src' import * as RowSelection from '../src/features/RowSelection' @@ -25,7 +25,7 @@ describe('RowSelection', () => { const data = makeData(5) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -54,7 +54,7 @@ describe('RowSelection', () => { const data = makeData(3, 2) // assuming 3 parent rows with 2 sub-rows each const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -83,7 +83,7 @@ describe('RowSelection', () => { const data = makeData(5) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -151,7 +151,7 @@ describe('RowSelection', () => { const data = makeData(3) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -176,7 +176,7 @@ describe('RowSelection', () => { const data = makeData(3, 2) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -204,7 +204,7 @@ describe('RowSelection', () => { const data = makeData(3, 2) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -234,7 +234,7 @@ describe('RowSelection', () => { const data = makeData(3, 2) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', @@ -264,7 +264,7 @@ describe('RowSelection', () => { const data = makeData(3, 2) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: row => row.index === 0, // only first row is selectable (of 2 sub-rows) onStateChange() {}, renderFallbackValue: '', @@ -293,7 +293,7 @@ describe('RowSelection', () => { const data = makeData(3, 2, 2) const columns = generateColumns(data) - const table = createTable({ + const table = _createTable({ enableRowSelection: true, onStateChange() {}, renderFallbackValue: '', diff --git a/packages/table-core/__tests__/getGroupedRowModel.test.ts b/packages/table-core/__tests__/getGroupedRowModel.test.ts index 5f81d94a6a..785a35aa66 100644 --- a/packages/table-core/__tests__/getGroupedRowModel.test.ts +++ b/packages/table-core/__tests__/getGroupedRowModel.test.ts @@ -1,6 +1,6 @@ import { ColumnDef, getCoreRowModel } from '../src' import { createColumnHelper } from '../src/columnHelper' -import { createTable } from '../src/core/table' +import { _createTable } from '../src/core/table' import { getGroupedRowModel } from '../src/utils/getGroupedRowModel' import { makeData, Person } from './makeTestData' @@ -27,7 +27,7 @@ describe('#getGroupedRowModel', () => { data.forEach(p => (p.lastName = 'Name')) data.forEach(p => (p.age = 123)) - const table = createTable({ + const table = _createTable({ onStateChange() {}, renderFallbackValue: '', data, diff --git a/packages/table-core/src/core/cell.ts b/packages/table-core/src/core/cell.ts index bacd6622e4..5e131368c5 100644 --- a/packages/table-core/src/core/cell.ts +++ b/packages/table-core/src/core/cell.ts @@ -49,7 +49,7 @@ export interface CoreCell { row: Row } -export function createCell( +export function _createCell( table: Table, row: Row, column: Column, @@ -79,7 +79,7 @@ export function createCell( } table._features.forEach(feature => { - feature.createCell?.( + feature._createCell?.( cell as Cell, column, row as Row, diff --git a/packages/table-core/src/core/column.ts b/packages/table-core/src/core/column.ts index b725db57db..aabd7a3599 100644 --- a/packages/table-core/src/core/column.ts +++ b/packages/table-core/src/core/column.ts @@ -62,7 +62,7 @@ export interface CoreColumn { parent?: Column } -export function createColumn( +export function _createColumn( table: Table, columnDef: ColumnDef, depth: number, @@ -157,7 +157,7 @@ export function createColumn( } for (const feature of table._features) { - feature.createColumn?.(column as Column, table) + feature._createColumn?.(column as Column, table) } // Yes, we have to convert table to unknown, because we know more than the compiler here. diff --git a/packages/table-core/src/core/headers.ts b/packages/table-core/src/core/headers.ts index 263da8d29d..082ce27450 100644 --- a/packages/table-core/src/core/headers.ts +++ b/packages/table-core/src/core/headers.ts @@ -210,7 +210,7 @@ export interface HeadersInstance { // -function createHeader( +function _createHeader( table: Table, column: Column, options: { @@ -256,14 +256,14 @@ function createHeader( } table._features.forEach(feature => { - feature.createHeader?.(header as Header, table) + feature._createHeader?.(header as Header, table) }) return header as Header } export const Headers: TableFeature = { - createTable: (table: Table): void => { + _createTable: (table: Table): void => { // Header Groups table.getHeaderGroups = memo( @@ -553,7 +553,7 @@ export function buildHeaderGroups( latestPendingParentHeader.subHeaders.push(headerToGroup) } else { // This is a new header. Let's create it - const header = createHeader(table, column, { + const header = _createHeader(table, column, { id: [headerFamily, depth, column.id, headerToGroup?.id] .filter(Boolean) .join('_'), @@ -584,7 +584,7 @@ export function buildHeaderGroups( } const bottomHeaders = columnsToGroup.map((column, index) => - createHeader(table, column, { + _createHeader(table, column, { depth: maxDepth, index, }) diff --git a/packages/table-core/src/core/row.ts b/packages/table-core/src/core/row.ts index 0af28aa94c..e2b20cff99 100644 --- a/packages/table-core/src/core/row.ts +++ b/packages/table-core/src/core/row.ts @@ -1,6 +1,6 @@ import { RowData, Cell, Row, Table } from '../types' import { flattenBy, getMemoOptions, memo } from '../utils' -import { createCell } from './cell' +import { _createCell } from './cell' export interface CoreRow { _getAllCellsByColumnId: () => Record> @@ -92,7 +92,7 @@ export interface CoreRow { subRows: Row[] } -export const createRow = ( +export const _createRow = ( table: Table, id: string, original: TData, @@ -171,7 +171,7 @@ export const createRow = ( () => [table.getAllLeafColumns()], leafColumns => { return leafColumns.map(column => { - return createCell(table, row as Row, column, column.id) + return _createCell(table, row as Row, column, column.id) }) }, getMemoOptions(table.options, 'debugRows', 'getAllCells') @@ -194,7 +194,7 @@ export const createRow = ( for (let i = 0; i < table._features.length; i++) { const feature = table._features[i] - feature?.createRow?.(row as Row, table) + feature?._createRow?.(row as Row, table) } return row as Row diff --git a/packages/table-core/src/core/table.ts b/packages/table-core/src/core/table.ts index 00d62da98f..6e2876e172 100644 --- a/packages/table-core/src/core/table.ts +++ b/packages/table-core/src/core/table.ts @@ -19,7 +19,7 @@ import { } from '../types' // -import { createColumn } from './column' +import { _createColumn } from './column' import { Headers } from './headers' // @@ -192,6 +192,42 @@ export interface CoreOptions { state: Partial } +export function tableOptions( + options: Omit, 'columns'> +): Omit, 'columns'> + +export function tableOptions( + options: Omit, 'data'> +): Omit, 'data'> + +export function tableOptions( + options: Omit, 'getCoreRowModel'> +): Omit, 'getCoreRowModel'> + +export function tableOptions( + options: Omit, 'data' | 'columns'> +): Omit, 'data' | 'columns'> + +export function tableOptions( + options: Omit, 'getCoreRowModel' | 'columns'> +): Omit, 'getCoreRowModel' | 'columns'> + +export function tableOptions( + options: Omit, 'data' | 'getCoreRowModel'> +): Omit, 'data' | 'getCoreRowModel'> + +export function tableOptions( + options: Omit, 'data' | 'columns' | 'getCoreRowModel'> +): Omit, 'data' | 'columns' | 'getCoreRowModel'> + +export function tableOptions( + options: TableOptions +): TableOptions + +export function tableOptions(options: unknown) { + return options +} + export interface CoreInstance { _features: readonly TableFeature[] _getAllFlatColumnsById: () => Record> @@ -280,7 +316,7 @@ export interface CoreInstance { setState: (updater: Updater) => void } -export function createTable( +export function _createTable( options: TableOptionsResolved ): Table { if ( @@ -295,7 +331,7 @@ export function createTable( let table = { _features } as unknown as Table const defaultOptions = table._features.reduce((obj, feature) => { - return Object.assign(obj, feature.getDefaultOptions?.(table)) + return Object.assign(obj, feature._getDefaultOptions?.(table)) }, {}) as TableOptionsResolved const mergeOptions = (options: TableOptionsResolved) => { @@ -317,7 +353,7 @@ export function createTable( } as TableState table._features.forEach(feature => { - initialState = (feature.getInitialState?.(initialState) ?? + initialState = (feature._getInitialState?.(initialState) ?? initialState) as TableState }) @@ -433,7 +469,7 @@ export function createTable( // footer: props => props.header.column.id, cell: props => props.renderValue()?.toString?.() ?? null, ...table._features.reduce((obj, feature) => { - return Object.assign(obj, feature.getDefaultColumnDef?.()) + return Object.assign(obj, feature._getDefaultColumnDef?.()) }, {}), ...defaultColumn, } as Partial> @@ -452,7 +488,7 @@ export function createTable( depth = 0 ): Column[] => { return columnDefs.map(columnDef => { - const column = createColumn(table, columnDef, depth, parent) + const column = _createColumn(table, columnDef, depth, parent) const groupingColumnDef = columnDef as GroupColumnDef< TData, @@ -520,7 +556,7 @@ export function createTable( for (let index = 0; index < table._features.length; index++) { const feature = table._features[index] - feature?.createTable?.(table) + feature?._createTable?.(table) } return table diff --git a/packages/table-core/src/features/ColumnFaceting.ts b/packages/table-core/src/features/ColumnFaceting.ts index 1997d0c9ad..9ff2d5e7de 100644 --- a/packages/table-core/src/features/ColumnFaceting.ts +++ b/packages/table-core/src/features/ColumnFaceting.ts @@ -46,7 +46,7 @@ export interface FacetedOptions { // export const ColumnFaceting: TableFeature = { - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { diff --git a/packages/table-core/src/features/ColumnFiltering.ts b/packages/table-core/src/features/ColumnFiltering.ts index 24ebaedaf6..50bf718b93 100644 --- a/packages/table-core/src/features/ColumnFiltering.ts +++ b/packages/table-core/src/features/ColumnFiltering.ts @@ -241,7 +241,7 @@ export interface ColumnFiltersInstance { // export const ColumnFiltering: TableFeature = { - getDefaultColumnDef: < + _getDefaultColumnDef: < TData extends RowData, >(): ColumnFiltersColumnDef => { return { @@ -249,14 +249,14 @@ export const ColumnFiltering: TableFeature = { } }, - getInitialState: (state): ColumnFiltersTableState => { + _getInitialState: (state): ColumnFiltersTableState => { return { columnFilters: [], ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): ColumnFiltersOptions => { return { @@ -266,7 +266,7 @@ export const ColumnFiltering: TableFeature = { } as ColumnFiltersOptions }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -362,7 +362,7 @@ export const ColumnFiltering: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, _table: Table ): void => { @@ -370,7 +370,7 @@ export const ColumnFiltering: TableFeature = { row.columnFiltersMeta = {} }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setColumnFilters = (updater: Updater) => { const leafColumns = table.getAllLeafColumns() diff --git a/packages/table-core/src/features/ColumnGrouping.ts b/packages/table-core/src/features/ColumnGrouping.ts index 21e8781cc2..136b069b37 100644 --- a/packages/table-core/src/features/ColumnGrouping.ts +++ b/packages/table-core/src/features/ColumnGrouping.ts @@ -240,7 +240,7 @@ export interface GroupingInstance { // export const ColumnGrouping: TableFeature = { - getDefaultColumnDef: (): GroupingColumnDef< + _getDefaultColumnDef: (): GroupingColumnDef< TData, unknown > => { @@ -250,14 +250,14 @@ export const ColumnGrouping: TableFeature = { } }, - getInitialState: (state): GroupingTableState => { + _getInitialState: (state): GroupingTableState => { return { grouping: [], ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): GroupingOptions => { return { @@ -266,7 +266,7 @@ export const ColumnGrouping: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -334,7 +334,7 @@ export const ColumnGrouping: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setGrouping = updater => table.options.onGroupingChange?.(updater) table.resetGrouping = defaultState => { @@ -355,7 +355,7 @@ export const ColumnGrouping: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { @@ -380,7 +380,7 @@ export const ColumnGrouping: TableFeature = { row._groupingValuesCache = {} }, - createCell: ( + _createCell: ( cell: Cell, column: Column, row: Row, diff --git a/packages/table-core/src/features/ColumnOrdering.ts b/packages/table-core/src/features/ColumnOrdering.ts index c64370ef15..8743c9a14b 100644 --- a/packages/table-core/src/features/ColumnOrdering.ts +++ b/packages/table-core/src/features/ColumnOrdering.ts @@ -73,14 +73,14 @@ export interface ColumnOrderInstance { // export const ColumnOrdering: TableFeature = { - getInitialState: (state): ColumnOrderTableState => { + _getInitialState: (state): ColumnOrderTableState => { return { columnOrder: [], ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): ColumnOrderDefaultOptions => { return { @@ -88,7 +88,7 @@ export const ColumnOrdering: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -107,7 +107,7 @@ export const ColumnOrdering: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setColumnOrder = updater => table.options.onColumnOrderChange?.(updater) table.resetColumnOrder = defaultState => { diff --git a/packages/table-core/src/features/ColumnPinning.ts b/packages/table-core/src/features/ColumnPinning.ts index 1c0ef70799..46a80a5056 100644 --- a/packages/table-core/src/features/ColumnPinning.ts +++ b/packages/table-core/src/features/ColumnPinning.ts @@ -151,14 +151,14 @@ const getDefaultColumnPinningState = (): ColumnPinningState => ({ }) export const ColumnPinning: TableFeature = { - getInitialState: (state): ColumnPinningTableState => { + _getInitialState: (state): ColumnPinningTableState => { return { columnPinning: getDefaultColumnPinningState(), ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): ColumnPinningDefaultOptions => { return { @@ -166,7 +166,7 @@ export const ColumnPinning: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -236,7 +236,7 @@ export const ColumnPinning: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { @@ -279,7 +279,7 @@ export const ColumnPinning: TableFeature = { ) }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setColumnPinning = updater => table.options.onColumnPinningChange?.(updater) diff --git a/packages/table-core/src/features/ColumnSizing.ts b/packages/table-core/src/features/ColumnSizing.ts index 3cce2ddcb2..039c2ebfc9 100644 --- a/packages/table-core/src/features/ColumnSizing.ts +++ b/packages/table-core/src/features/ColumnSizing.ts @@ -232,10 +232,10 @@ const getDefaultColumnSizingInfoState = (): ColumnSizingInfoState => ({ }) export const ColumnSizing: TableFeature = { - getDefaultColumnDef: (): ColumnSizingColumnDef => { + _getDefaultColumnDef: (): ColumnSizingColumnDef => { return defaultColumnSizing }, - getInitialState: (state): ColumnSizingTableState => { + _getInitialState: (state): ColumnSizingTableState => { return { columnSizing: {}, columnSizingInfo: getDefaultColumnSizingInfoState(), @@ -243,7 +243,7 @@ export const ColumnSizing: TableFeature = { } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): ColumnSizingDefaultOptions => { return { @@ -254,7 +254,7 @@ export const ColumnSizing: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -312,7 +312,7 @@ export const ColumnSizing: TableFeature = { } }, - createHeader: ( + _createHeader: ( header: Header, table: Table ): void => { @@ -513,7 +513,7 @@ export const ColumnSizing: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setColumnSizing = updater => table.options.onColumnSizingChange?.(updater) table.setColumnSizingInfo = updater => diff --git a/packages/table-core/src/features/ColumnVisibility.ts b/packages/table-core/src/features/ColumnVisibility.ts index f37e57be8e..5586dbd059 100644 --- a/packages/table-core/src/features/ColumnVisibility.ts +++ b/packages/table-core/src/features/ColumnVisibility.ts @@ -150,14 +150,14 @@ export interface VisibilityColumn { // export const ColumnVisibility: TableFeature = { - getInitialState: (state): VisibilityTableState => { + _getInitialState: (state): VisibilityTableState => { return { columnVisibility: {}, ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): VisibilityDefaultOptions => { return { @@ -165,7 +165,7 @@ export const ColumnVisibility: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -201,7 +201,7 @@ export const ColumnVisibility: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { @@ -223,7 +223,7 @@ export const ColumnVisibility: TableFeature = { ) }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { const makeVisibleColumnsMethod = ( key: string, getColumns: () => Column[] diff --git a/packages/table-core/src/features/GlobalFaceting.ts b/packages/table-core/src/features/GlobalFaceting.ts index 020b410f9f..84ee6d974f 100644 --- a/packages/table-core/src/features/GlobalFaceting.ts +++ b/packages/table-core/src/features/GlobalFaceting.ts @@ -28,7 +28,7 @@ export interface GlobalFacetingInstance { // export const GlobalFaceting: TableFeature = { - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table._getGlobalFacetedRowModel = table.options.getFacetedRowModel && table.options.getFacetedRowModel(table, '__global__') diff --git a/packages/table-core/src/features/GlobalFiltering.ts b/packages/table-core/src/features/GlobalFiltering.ts index ada28f1eab..986e7f6323 100644 --- a/packages/table-core/src/features/GlobalFiltering.ts +++ b/packages/table-core/src/features/GlobalFiltering.ts @@ -94,14 +94,14 @@ export interface GlobalFilterInstance { // export const GlobalFiltering: TableFeature = { - getInitialState: (state): GlobalFilterTableState => { + _getInitialState: (state): GlobalFilterTableState => { return { globalFilter: undefined, ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): GlobalFilterOptions => { return { @@ -118,7 +118,7 @@ export const GlobalFiltering: TableFeature = { } as GlobalFilterOptions }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -133,7 +133,7 @@ export const GlobalFiltering: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.getGlobalAutoFilterFn = () => { return filterFns.includesString } diff --git a/packages/table-core/src/features/RowExpanding.ts b/packages/table-core/src/features/RowExpanding.ts index 15da45e0ea..4f6faedbdf 100644 --- a/packages/table-core/src/features/RowExpanding.ts +++ b/packages/table-core/src/features/RowExpanding.ts @@ -167,14 +167,14 @@ export interface ExpandedInstance { // export const RowExpanding: TableFeature = { - getInitialState: (state): ExpandedTableState => { + _getInitialState: (state): ExpandedTableState => { return { expanded: {}, ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): ExpandedOptions => { return { @@ -183,7 +183,7 @@ export const RowExpanding: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { let registered = false let queued = false @@ -283,7 +283,7 @@ export const RowExpanding: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { diff --git a/packages/table-core/src/features/RowPagination.ts b/packages/table-core/src/features/RowPagination.ts index 836470673b..ce6ac4a811 100644 --- a/packages/table-core/src/features/RowPagination.ts +++ b/packages/table-core/src/features/RowPagination.ts @@ -193,7 +193,7 @@ const getDefaultPaginationState = (): PaginationState => ({ }) export const RowPagination: TableFeature = { - getInitialState: (state): PaginationTableState => { + _getInitialState: (state): PaginationTableState => { return { ...state, pagination: { @@ -203,7 +203,7 @@ export const RowPagination: TableFeature = { } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): PaginationDefaultOptions => { return { @@ -211,7 +211,7 @@ export const RowPagination: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { let registered = false let queued = false diff --git a/packages/table-core/src/features/RowPinning.ts b/packages/table-core/src/features/RowPinning.ts index 3525111de0..b7d92f2663 100644 --- a/packages/table-core/src/features/RowPinning.ts +++ b/packages/table-core/src/features/RowPinning.ts @@ -123,14 +123,14 @@ const getDefaultRowPinningState = (): RowPinningState => ({ }) export const RowPinning: TableFeature = { - getInitialState: (state): RowPinningTableState => { + _getInitialState: (state): RowPinningTableState => { return { rowPinning: getDefaultRowPinningState(), ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): RowPinningDefaultOptions => { return { @@ -138,7 +138,7 @@ export const RowPinning: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { @@ -207,7 +207,7 @@ export const RowPinning: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setRowPinning = updater => table.options.onRowPinningChange?.(updater) table.resetRowPinning = defaultState => diff --git a/packages/table-core/src/features/RowSelection.ts b/packages/table-core/src/features/RowSelection.ts index 90166823aa..396d6b113f 100644 --- a/packages/table-core/src/features/RowSelection.ts +++ b/packages/table-core/src/features/RowSelection.ts @@ -197,14 +197,14 @@ export interface RowSelectionInstance { // export const RowSelection: TableFeature = { - getInitialState: (state): RowSelectionTableState => { + _getInitialState: (state): RowSelectionTableState => { return { rowSelection: {}, ...state, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): RowSelectionOptions => { return { @@ -218,7 +218,7 @@ export const RowSelection: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setRowSelection = updater => table.options.onRowSelectionChange?.(updater) table.resetRowSelection = defaultState => @@ -466,7 +466,7 @@ export const RowSelection: TableFeature = { } }, - createRow: ( + _createRow: ( row: Row, table: Table ): void => { diff --git a/packages/table-core/src/features/RowSorting.ts b/packages/table-core/src/features/RowSorting.ts index c2e7c32d53..63079b8a1e 100644 --- a/packages/table-core/src/features/RowSorting.ts +++ b/packages/table-core/src/features/RowSorting.ts @@ -276,21 +276,21 @@ export interface SortingInstance { // export const RowSorting: TableFeature = { - getInitialState: (state): SortingTableState => { + _getInitialState: (state): SortingTableState => { return { sorting: [], ...state, } }, - getDefaultColumnDef: (): SortingColumnDef => { + _getDefaultColumnDef: (): SortingColumnDef => { return { sortingFn: 'auto', sortUndefined: 1, } }, - getDefaultOptions: ( + _getDefaultOptions: ( table: Table ): SortingOptions => { return { @@ -301,7 +301,7 @@ export const RowSorting: TableFeature = { } }, - createColumn: ( + _createColumn: ( column: Column, table: Table ): void => { @@ -521,7 +521,7 @@ export const RowSorting: TableFeature = { } }, - createTable: (table: Table): void => { + _createTable: (table: Table): void => { table.setSorting = updater => table.options.onSortingChange?.(updater) table.resetSorting = defaultState => { table.setSorting(defaultState ? [] : table.initialState?.sorting ?? []) diff --git a/packages/table-core/src/types.ts b/packages/table-core/src/types.ts index 26bf47939e..1899c8bb14 100644 --- a/packages/table-core/src/types.ts +++ b/packages/table-core/src/types.ts @@ -98,21 +98,21 @@ import { CellContext, CoreCell } from './core/cell' import { CoreColumn } from './core/column' export interface TableFeature { - createCell?: ( + _createCell?: ( cell: Cell, column: Column, row: Row, table: Table ) => void - createColumn?: (column: Column, table: Table) => void - createHeader?: (header: Header, table: Table) => void - createRow?: (row: Row, table: Table) => void - createTable?: (table: Table) => void - getDefaultColumnDef?: () => Partial> - getDefaultOptions?: ( + _createColumn?: (column: Column, table: Table) => void + _createHeader?: (header: Header, table: Table) => void + _createRow?: (row: Row, table: Table) => void + _createTable?: (table: Table) => void + _getDefaultColumnDef?: () => Partial> + _getDefaultOptions?: ( table: Table ) => Partial> - getInitialState?: (initialState?: InitialTableState) => Partial + _getInitialState?: (initialState?: InitialTableState) => Partial } export interface TableMeta {} diff --git a/packages/table-core/src/utils/filterRowsUtils.ts b/packages/table-core/src/utils/filterRowsUtils.ts index a27258f145..df7b66edc6 100644 --- a/packages/table-core/src/utils/filterRowsUtils.ts +++ b/packages/table-core/src/utils/filterRowsUtils.ts @@ -1,4 +1,4 @@ -import { createRow } from '../core/row' +import { _createRow } from '../core/row' import { Row, RowModel, Table, RowData } from '../types' export function filterRows( @@ -29,7 +29,7 @@ function filterRowModelFromLeafs( for (let i = 0; i < rowsToFilter.length; i++) { let row = rowsToFilter[i]! - const newRow = createRow( + const newRow = _createRow( table, row.id, row.original, @@ -100,7 +100,7 @@ function filterRowModelFromRoot( if (pass) { if (row.subRows?.length && depth < maxDepth) { - const newRow = createRow( + const newRow = _createRow( table, row.id, row.original, diff --git a/packages/table-core/src/utils/getCoreRowModel.ts b/packages/table-core/src/utils/getCoreRowModel.ts index e6f7349a27..97edaee218 100644 --- a/packages/table-core/src/utils/getCoreRowModel.ts +++ b/packages/table-core/src/utils/getCoreRowModel.ts @@ -1,4 +1,4 @@ -import { createRow } from '../core/row' +import { _createRow } from '../core/row' import { Table, Row, RowModel, RowData } from '../types' import { getMemoOptions, memo } from '../utils' @@ -37,7 +37,7 @@ export function getCoreRowModel(): ( // } // Make the row - const row = createRow( + const row = _createRow( table, table._getRowId(originalRows[i]!, i, parentRow), originalRows[i]!, diff --git a/packages/table-core/src/utils/getGroupedRowModel.ts b/packages/table-core/src/utils/getGroupedRowModel.ts index b92befaf95..0cccec5e0a 100644 --- a/packages/table-core/src/utils/getGroupedRowModel.ts +++ b/packages/table-core/src/utils/getGroupedRowModel.ts @@ -1,4 +1,4 @@ -import { createRow } from '../core/row' +import { _createRow } from '../core/row' import { Table, Row, RowModel, RowData } from '../types' import { flattenBy, getMemoOptions, memo } from '../utils' @@ -67,7 +67,7 @@ export function getGroupedRowModel(): ( ? flattenBy(groupedRows, row => row.subRows) : groupedRows - const row = createRow( + const row = _createRow( table, id, leafRows[0]!.original, diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts index 5b342de11b..b4b804e177 100755 --- a/packages/vue-table/src/index.ts +++ b/packages/vue-table/src/index.ts @@ -1,6 +1,6 @@ import { TableOptions, - createTable, + _createTable, TableOptionsResolved, RowData, } from '@tanstack/table-core' @@ -25,9 +25,7 @@ export const FlexRender = defineComponent({ }, }) -export function useVueTable( - options: TableOptions -) { +export function useTable(options: TableOptions) { const resolvedOptions: TableOptionsResolved = mergeProxy( { state: {}, // Dummy state @@ -43,7 +41,7 @@ export function useVueTable( options ) - const table = createTable(resolvedOptions) + const table = _createTable(resolvedOptions) // can't use `reactive` because update needs to be immutable const state = ref(table.initialState)