feat: add existingTable param to other frameworks

this enables framework agnostic table adapters to create a table outside of the framework context, but then use the existing packages to interact with it as a regular table

Author: derekperkins

packages/angular-table/src/index.ts

@@ -26,7 +26,8 @@ export {
 } from './flex-render/flex-render-component'
 
 export function createAngularTable<TData extends RowData>(
-  options: () => TableOptions<TData>
+  options: () => TableOptions<TData>,
+  existingTable?: Table<TData>
 ): Table<TData> & Signal<Table<TData>> {
   return lazyInit(() => {
     const resolvedOptions = {
@@ -36,7 +37,7 @@ export function createAngularTable<TData extends RowData>(
       ...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<TableState>(table.initialState)

packages/lit-table/src/index.ts

@@ -36,7 +36,7 @@ export class TableController<TData extends RowData>
     ;(this.host = host).addController(this)
   }
 
-  public table(options: TableOptions<TData>) {
+  public table(options: TableOptions<TData>, existingTable?: Table<TData>) {
     if (!this.tableInstance) {
       const resolvedOptions: TableOptionsResolved<TData> = {
         state: {},
@@ -45,7 +45,7 @@ export class TableController<TData extends RowData>
         ...options,
       }
 
-      this.tableInstance = createTable(resolvedOptions)
+      this.tableInstance = existingTable ?? createTable(resolvedOptions)
       this._tableState = {
         ...this.tableInstance.initialState,
         ...options.state,

packages/qwik-table/src/index.tsx

@@ -31,7 +31,8 @@ export function flexRender<TProps extends object>(
 }
 
 export function useQwikTable<TData extends RowData>(
-  options: TableOptions<TData>
+  options: TableOptions<TData>,
+  existingTable?: Table<TData>
 ) {
   // Compose in the generic options to the user options
   const resolvedOptions: TableOptionsResolved<TData> = {
@@ -41,32 +42,38 @@ export function useQwikTable<TData extends RowData>(
     ...options,
   }
 
-  // Create a new table instance and store it in a Qwik store
-  const table = Qwik.useStore<{
-    instance: Qwik.NoSerialize<Table<TData>>
+  // Create or reuse the table instance and store it.
+  const tableStore = Qwik.useStore<{
+    instance: Qwik.NoSerialize<Table<TData>> | 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
 }

packages/solid-table/src/index.tsx

@@ -25,7 +25,8 @@ export function flexRender<TProps>(
 }
 
 export function createSolidTable<TData extends RowData>(
-  options: TableOptions<TData>
+  options: TableOptions<TData>,
+  existingTable?: import('@tanstack/table-core').Table<TData>
 ) {
   const resolvedOptions: TableOptionsResolved<TData> = mergeProps(
     {
@@ -42,7 +43,7 @@ export function createSolidTable<TData extends RowData>(
     options
   )
 
-  const table = createTable<TData>(resolvedOptions)
+  const table = existingTable ?? createTable<TData>(resolvedOptions)
   const [state, setState] = createStore(table.initialState)
 
   createComputed(() => {

packages/svelte-table/src/index.ts

@@ -69,7 +69,8 @@ export function flexRender(component: any, props: any): ComponentType | null {
 type ReadableOrVal<T> = T | Readable<T>
 
 export function createSvelteTable<TData extends RowData>(
-  options: ReadableOrVal<TableOptions<TData>>
+  options: ReadableOrVal<TableOptions<TData>>,
+  existingTable?: import('@tanstack/table-core').Table<TData>
 ) {
   let optionsStore: Readable<TableOptions<TData>>
 
@@ -86,7 +87,7 @@ export function createSvelteTable<TData extends RowData>(
     ...get(optionsStore),
   }
 
-  let table = createTable(resolvedOptions)
+  let table = existingTable ?? createTable(resolvedOptions)
 
   let stateStore = writable(/** @type {number} */ table.initialState)
   // combine stores

packages/vue-table/src/index.ts

@@ -51,7 +51,8 @@ function getOptionsWithReactiveData<TData extends RowData>(
 }
 
 export function useVueTable<TData extends RowData>(
-  initialOptions: TableOptionsWithReactiveData<TData>
+  initialOptions: TableOptionsWithReactiveData<TData>,
+  existingTable?: import('@tanstack/table-core').Table<TData>
 ) {
   const IS_REACTIVE = isRef(initialOptions.data)
 
@@ -75,9 +76,9 @@ export function useVueTable<TData extends RowData>(
     IS_REACTIVE ? getOptionsWithReactiveData(initialOptions) : initialOptions
   )
 
-  const table = createTable<TData>(
-    resolvedOptions as TableOptionsResolved<TData>
-  )
+  const table =
+    existingTable ??
+    createTable<TData>(resolvedOptions as TableOptionsResolved<TData>)
 
   // Add reactivity support
   if (IS_REACTIVE) {