@tanstack/svelte-table 9.0.0-alpha.4 → 9.0.0-alpha.42

package/src/FlexRender.svelte

@@ -0,0 +1,103 @@
+<script
+  lang="ts"
+  generics="TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData"
+>
+  import { isFunction } from '@tanstack/table-core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    CellData,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+    TableFeatures,
+  } from '@tanstack/table-core'
+
+  type Props =
+    | {
+        /** The cell or header field of the current cell's column definition. */
+        content?: ColumnDefTemplate<
+          | HeaderContext<TFeatures, TData, TValue>
+          | CellContext<TFeatures, TData, TValue>
+        >
+        /** The result of the `getContext()` function of the header or cell */
+        context:
+          | HeaderContext<TFeatures, TData, TValue>
+          | CellContext<TFeatures, TData, TValue>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TFeatures, TData, TValue>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TFeatures, TData, TValue>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TFeatures, TData, TValue>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  // Resolve content and context from either the new cell/header/footer props
+  // or the legacy content/context props.
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  // Compute the render result reactively
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}

package/src/context-keys.ts

@@ -0,0 +1,3 @@
+export const tableContextKey = '__tanstack_table_context_key'
+export const cellContextKey = '__tanstack_cell_context_key'
+export const headerContextKey = '__tanstack_header_context_key'

package/src/createTable.svelte.ts

@@ -0,0 +1,103 @@
+import { constructTable } from '@tanstack/table-core'
+import { useSelector } from '@tanstack/svelte-store'
+import { untrack } from 'svelte'
+import { 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 = {},
+> = 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>
+}
+
+export function createTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+>(
+  tableOptions: TableOptions<TFeatures, TData>,
+  selector: (state: TableState<TFeatures>) => TSelected = () =>
+    ({}) as 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 mergeObjects(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 mergeObjects(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
+}