@tanstack/svelte-table 9.0.0-alpha.5 → 9.0.0-alpha.50

package/src/createTable.svelte.ts

@@ -0,0 +1,127 @@
+import { constructTable } from '@tanstack/table-core'
+import { useSelector } from '@tanstack/svelte-store'
+import { untrack } from 'svelte'
+import { flatMerge, mergeObjects } from './merge-objects'
+import { svelteReactivity } from './reactivity.svelte'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+
+export type SvelteTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = TableState<TFeatures>,
+> = Table<TFeatures, TData> & {
+  /**
+   * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `createTable`.
+   *
+   * @example
+   * const table = createTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
+   *
+   * console.log(table.state.globalFilter)
+   */
+  readonly state: Readonly<TSelected>
+}
+
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       _features,
+ *       _rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
+export function createTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = TableState<TFeatures>,
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+  selector?: (state: TableState<TFeatures>) => TSelected,
+): SvelteTable<TFeatures, TData, TSelected> {
+  // 1. Merge reactivity into options using mergeObjects (preserves getters)
+  const mergedOptions = mergeObjects(tableOptions, {
+    _features: {
+      coreReativityFeature: svelteReactivity(),
+      ...tableOptions._features,
+    },
+  }) as TableOptions<TFeatures, TData>
+
+  // 2. Set up resolved options with mergeOptions handler
+  const resolvedOptions = mergeObjects(
+    {
+      mergeOptions: (
+        defaultOptions: TableOptions<TFeatures, TData>,
+        newOptions: Partial<TableOptions<TFeatures, TData>>,
+      ) => {
+        return flatMerge(defaultOptions, newOptions)
+      },
+    },
+    mergedOptions,
+  ) as TableOptions<TFeatures, TData>
+
+  // 3. Construct table
+  const table = constructTable(resolvedOptions) as SvelteTable<
+    TFeatures,
+    TData,
+    TSelected
+  >
+
+  // 4. Sync options reactively. When controlled state changes (e.g., $state
+  // inside createTableState), the effect re-runs and calls setOptions.
+  // Use $effect.pre so the table sees updated options BEFORE the DOM renders,
+  // ensuring getRowModel() returns current data (not stale, one-frame-behind data).
+  // The reactive reads (state getters, data getter) happen OUTSIDE untrack
+  // so they become dependencies. The setOptions call is INSIDE untrack so
+  // option writes do not subscribe this effect to table internals.
+  $effect.pre(() => {
+    // Read reactive getters to create $effect dependencies on external state
+    const state: Record<string, unknown> | undefined = mergedOptions.state
+    if (state) {
+      for (const key in state) {
+        void state[key]
+      }
+    }
+    void mergedOptions.data
+
+    untrack(() => {
+      table.setOptions((prev) => {
+        return flatMerge(prev, mergedOptions)
+      })
+    })
+  })
+
+  // 5. State selector
+  const stateStore = useSelector(table.store, selector)
+
+  Object.defineProperty(table, 'state', {
+    get() {
+      return stateStore.current
+    },
+    configurable: true,
+    enumerable: true,
+  })
+
+  return table
+}