diff --git a/.changeset/beige-singers-admire.md b/.changeset/beige-singers-admire.md new file mode 100644 index 0000000000..70814a8610 --- /dev/null +++ b/.changeset/beige-singers-admire.md @@ -0,0 +1,5 @@ +--- +'@tanstack/react-table': patch +--- + +feat: add existingTable param to useReactTable diff --git a/packages/angular-table/src/index.ts b/packages/angular-table/src/index.ts index 278239217c..a22473c627 100644 --- a/packages/angular-table/src/index.ts +++ b/packages/angular-table/src/index.ts @@ -26,7 +26,8 @@ export { } from './flex-render/flex-render-component' export function createAngularTable( - options: () => TableOptions + options: () => TableOptions, + existingTable?: Table ): Table & Signal> { return lazyInit(() => { const resolvedOptions = { @@ -36,7 +37,7 @@ export function createAngularTable( ...options(), } - const table = createTable(resolvedOptions) + const table = existingTable ?? 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 622e3940ac..c3388deaca 100755 --- a/packages/lit-table/src/index.ts +++ b/packages/lit-table/src/index.ts @@ -36,7 +36,7 @@ export class TableController ;(this.host = host).addController(this) } - public table(options: TableOptions) { + public table(options: TableOptions, existingTable?: Table) { if (!this.tableInstance) { const resolvedOptions: TableOptionsResolved = { state: {}, @@ -45,7 +45,7 @@ export class TableController ...options, } - this.tableInstance = createTable(resolvedOptions) + this.tableInstance = existingTable ?? 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..c5445d3bde 100644 --- a/packages/qwik-table/src/index.tsx +++ b/packages/qwik-table/src/index.tsx @@ -31,7 +31,8 @@ export function flexRender( } export function useQwikTable( - options: TableOptions + options: TableOptions, + existingTable?: Table ) { // Compose in the generic options to the user options const resolvedOptions: TableOptionsResolved = { @@ -41,32 +42,38 @@ export function useQwikTable( ...options, } - // Create a new table instance and store it in a Qwik store - const table = Qwik.useStore<{ - instance: Qwik.NoSerialize> + // Create or reuse the table instance and store it. + const tableStore = Qwik.useStore<{ + instance: Qwik.NoSerialize> | null }>({ - instance: Qwik.noSerialize(createTable(resolvedOptions)), + instance: null, }) + if (!tableStore.instance) { + tableStore.instance = Qwik.noSerialize( + existingTable ?? createTable(resolvedOptions) + ) + } + + const table = tableStore.instance! + // By default, manage table state here using the table's initial state - const state = Qwik.useSignal(table.instance!.initialState) + const state = Qwik.useSignal(table.initialState) // Compose the default state above with any user state. This will allow the user // to only control a subset of the state if desired. - table.instance!.setOptions(prev => ({ + table.setOptions(prev => ({ ...prev, ...options, state: { ...state.value, ...options.state, }, - // Similarly, we'll maintain both our internal state and any user-provided - // state. onStateChange: updater => { state.value = updater instanceof Function ? updater(state.value) : updater options.onStateChange?.(updater) }, })) - return table.instance! + return table } diff --git a/packages/react-table/src/index.tsx b/packages/react-table/src/index.tsx index 132ea49083..a86fa40924 100755 --- a/packages/react-table/src/index.tsx +++ b/packages/react-table/src/index.tsx @@ -6,6 +6,7 @@ import { TableOptionsResolved, RowData, createTable, + Table, } from '@tanstack/table-core' export type Renderable = React.ReactNode | React.ComponentType @@ -55,7 +56,8 @@ function isExoticComponent(component: any) { } export function useReactTable( - options: TableOptions + options: TableOptions, + existingTable?: Table ) { // Compose in the generic options to the user options const resolvedOptions: TableOptionsResolved = { @@ -65,9 +67,9 @@ export function useReactTable( ...options, } - // Create a new table and store it in state + // Create or use the provided table instance and store it in state const [tableRef] = React.useState(() => ({ - current: createTable(resolvedOptions), + current: existingTable ?? 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..371db58c26 100755 --- a/packages/solid-table/src/index.tsx +++ b/packages/solid-table/src/index.tsx @@ -25,7 +25,8 @@ export function flexRender( } export function createSolidTable( - options: TableOptions + options: TableOptions, + existingTable?: import('@tanstack/table-core').Table ) { const resolvedOptions: TableOptionsResolved = mergeProps( { @@ -42,7 +43,7 @@ export function createSolidTable( options ) - const table = createTable(resolvedOptions) + const table = existingTable ?? 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 0a7dd157cf..7e676ce1ab 100755 --- a/packages/svelte-table/src/index.ts +++ b/packages/svelte-table/src/index.ts @@ -69,7 +69,8 @@ export function flexRender(component: any, props: any): ComponentType | null { type ReadableOrVal = T | Readable export function createSvelteTable( - options: ReadableOrVal> + options: ReadableOrVal>, + existingTable?: import('@tanstack/table-core').Table ) { let optionsStore: Readable> @@ -86,7 +87,7 @@ export function createSvelteTable( ...get(optionsStore), } - let table = createTable(resolvedOptions) + let table = existingTable ?? createTable(resolvedOptions) let stateStore = writable(/** @type {number} */ table.initialState) // combine stores diff --git a/packages/vue-table/src/index.ts b/packages/vue-table/src/index.ts index 1cd3823fe9..fe353f03ce 100755 --- a/packages/vue-table/src/index.ts +++ b/packages/vue-table/src/index.ts @@ -51,7 +51,8 @@ function getOptionsWithReactiveData( } export function useVueTable( - initialOptions: TableOptionsWithReactiveData + initialOptions: TableOptionsWithReactiveData, + existingTable?: import('@tanstack/table-core').Table ) { const IS_REACTIVE = isRef(initialOptions.data) @@ -75,9 +76,9 @@ export function useVueTable( IS_REACTIVE ? getOptionsWithReactiveData(initialOptions) : initialOptions ) - const table = createTable( - resolvedOptions as TableOptionsResolved - ) + const table = + existingTable ?? + createTable(resolvedOptions as TableOptionsResolved) // Add reactivity support if (IS_REACTIVE) {