@tanstack/svelte-table 9.0.0-alpha.9 → 9.0.0-beta.2

package/src/merge-objects.ts

@@ -0,0 +1,79 @@
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ * */
+export function mergeObjects<T>(source: T): T
+export function mergeObjects<T, U>(source: T, source1: U): T & U
+export function mergeObjects<T, U, V>(
+  source: T,
+  source1: U,
+  source2: V,
+): T & U & V
+export function mergeObjects<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W
+export function mergeObjects(...sources: any): any {
+  const target = {}
+  for (let source of sources) {
+    if (typeof source === 'function') source = source()
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source)
+      for (const key in descriptors) {
+        if (key in target) continue
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              let v,
+                s = sources[i]
+              if (typeof s === 'function') s = s()
+              // eslint-disable-next-line prefer-const
+              v = (s || {})[key]
+              if (v !== undefined) return v
+            }
+          },
+        })
+      }
+    }
+  }
+  return target
+}
+
+/**
+ * Merges objects together by eagerly resolving all values into a flat object.
+ *
+ * Unlike `mergeObjects`, this does NOT preserve getters — values are read once
+ * and stored as plain data properties. This prevents the getter-chain
+ * accumulation that causes O(N) lookups when the result is repeatedly passed
+ * back as a source in subsequent merges (e.g., inside `$effect.pre` loops).
+ *
+ * Later sources take precedence; `undefined` values do not override.
+ *
+ * @see https://github.com/TanStack/table/issues/6235
+ */
+export function flatMerge<T>(source: T): T
+export function flatMerge<T, U>(source: T, source1: U): T & U
+export function flatMerge<T, U, V>(source: T, source1: U, source2: V): T & U & V
+export function flatMerge<T, U, V, W>(
+  source: T,
+  source1: U,
+  source2: V,
+  source3: W,
+): T & U & V & W
+export function flatMerge(...sources: any): any {
+  const result: Record<PropertyKey, unknown> = {}
+  for (let source of sources) {
+    if (typeof source === 'function') source = source()
+    if (!source) continue
+    for (const key of Reflect.ownKeys(source)) {
+      const value = (source as Record<PropertyKey, unknown>)[key]
+      if (value !== undefined) {
+        result[key as string] = value
+      }
+    }
+  }
+  return result
+}

package/src/reactivity.svelte.ts

@@ -0,0 +1,118 @@
+import { untrack } from 'svelte'
+import { batch, createAtom } from '@tanstack/svelte-store'
+import type {
+  TableAtomOptions,
+  TableReactivityBindings,
+} from '@tanstack/table-core/reactivity'
+import type { Atom, Observer, ReadonlyAtom } from '@tanstack/svelte-store'
+
+const optionsStoreDebugName = 'table/optionsStore'
+
+function observerToCallback<T>(
+  observerOrNext: Observer<T> | ((value: T) => void),
+): (value: T) => void {
+  return typeof observerOrNext === 'function'
+    ? observerOrNext
+    : (value) => observerOrNext.next?.(value)
+}
+
+function subscribeToRune<T>(
+  getValue: () => T,
+  observerOrNext: Observer<T> | ((value: T) => void),
+) {
+  const callback = observerToCallback(observerOrNext)
+  const unsubscribe = $effect.root(() => {
+    $effect(() => {
+      const value = getValue()
+      untrack(() => callback(value))
+    })
+  })
+
+  return { unsubscribe }
+}
+
+function createRuneWritableAtom<T>(initialValue: T): Atom<T> {
+  let value = $state(initialValue)
+
+  return {
+    set: (updater: T | ((prevVal: T) => T)) => {
+      value =
+        typeof updater === 'function'
+          ? (updater as (prevVal: T) => T)(value)
+          : updater
+    },
+    get: () => value,
+    subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+      return subscribeToRune(() => value, observerOrNext)
+    }) as Atom<T>['subscribe'],
+  }
+}
+
+/**
+ * Creates the table-core reactivity bindings used by the Svelte adapter.
+ *
+ * Table state atoms are backed by TanStack Store atoms. The options store stays
+ * framework-native because row-model APIs read `table.options` directly during
+ * render. Readonly table atoms bridge Store dependency tracking into `$derived.by`.
+ */
+export function svelteReactivity(): TableReactivityBindings {
+  return {
+    createOptionsStore: true,
+    wrapExternalAtoms: false,
+    addSubscription: () => {
+      throw new Error(
+        'Feature not supported in current reactivity implementation',
+      )
+    },
+    unmount: () => {
+      throw new Error(
+        'Feature not supported in current reactivity implementation',
+      )
+    },
+    schedule: (fn) => queueMicrotask(() => fn()),
+    createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {
+      const storeAtom = createAtom(() => fn(), {
+        compare: _options?.compare,
+      })
+      let version = $state(0)
+
+      $effect(() => {
+        const subscription = storeAtom.subscribe(() => {
+          version += 1
+        })
+
+        return () => subscription.unsubscribe()
+      })
+
+      const value = $derived.by(() => {
+        version
+        return storeAtom.get()
+      })
+
+      return {
+        get: () => {
+          const currentValue = storeAtom.get()
+          value
+          return currentValue
+        },
+        subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {
+          return subscribeToRune(() => value, observerOrNext)
+        }) as ReadonlyAtom<T>['subscribe'],
+      }
+    },
+    createWritableAtom: <T>(
+      initialValue: T,
+      _options?: TableAtomOptions<T>,
+    ): Atom<T> => {
+      if (_options?.debugName === optionsStoreDebugName) {
+        return createRuneWritableAtom(initialValue)
+      }
+
+      return createAtom(initialValue, {
+        compare: _options?.compare,
+      })
+    },
+    untrack: untrack,
+    batch,
+  }
+}

package/src/render-component.ts

@@ -1,23 +1,56 @@
-import type { Component, ComponentProps } from 'svelte'
+import type { Component, ComponentProps, Snippet } from 'svelte'
 
 /**
- * A helper class to make it easy to identify Svelte components in `columnDef.cell` and `columnDef.header` properties.
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
  * @example
  * ```svelte
- * {#if cell.column.columnDef.cell(cell.getContext()) instanceof RenderComponentConfig}
- *   <svelte:component this={columnDef.cell.component} {...columnDef.cell.props} />
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
  * {/if}
  * ```
  * */
-export class RenderComponentConfig<TComponent extends Component<any>> {
+export class RenderComponentConfig<TComponent extends Component> {
   constructor(
     public component: TComponent,
-    public props: ComponentProps<TComponent>
+    public props?: ComponentProps<TComponent> | Record<string, never>,
   ) {}
 }
 
 /**
- * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ * */
+export class RenderSnippetConfig<TProps> {
+  constructor(
+    public snippet: Snippet<[TProps]>,
+    public params?: TProps,
+  ) {}
+}
+
+/**
+ * Wraps a Svelte component so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
  * @param component A Svelte component
  * @param props The props to pass to `component`
  * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
@@ -35,7 +68,40 @@ export class RenderComponentConfig<TComponent extends Component<any>> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export const renderComponent = <TComponent extends Component<any>>(
+export const renderComponent = <
+  TComponent extends Component<any>,
+  TProps extends ComponentProps<TComponent>,
+>(
   component: TComponent,
-  props: ComponentProps<TComponent>
+  props?: TProps,
 ) => new RenderComponentConfig(component, props)
+
+/**
+ * Wraps a Svelte snippet so it can be returned from a column definition
+ * renderer such as `cell`, `header`, or `footer`.
+ *
+ * *The snippet must only take one parameter.*
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet The snippet to render.
+ * @param params The single parameter object passed to the snippet.
+ * @returns A `RenderSnippetConfig` consumed by the Svelte `FlexRender` component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export const renderSnippet = <TProps>(
+  snippet: Snippet<[TProps]>,
+  params?: TProps,
+) => new RenderSnippetConfig(snippet, params)

package/src/static-functions.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/static-functions'

package/src/subscribe.ts

@@ -0,0 +1,46 @@
+import { shallow, useSelector } from '@tanstack/svelte-store'
+import type {
+  Atom,
+  ReadonlyAtom,
+  ReadonlyStore,
+  Store,
+} from '@tanstack/svelte-store'
+
+export type SubscribeSource<TValue> =
+  | Atom<TValue>
+  | ReadonlyAtom<TValue>
+  | Store<TValue>
+  | ReadonlyStore<TValue>
+
+/**
+ * Creates a fine-grained Svelte subscription to a TanStack Store source.
+ *
+ * Pass a table atom or store and optionally project it with a selector. The
+ * returned selector store exposes `.current`, making it useful for reading
+ * focused table state outside the broad `createTable` selector.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const selected = subscribeTable(
+ *     table.atoms.rowSelection,
+ *     (rowSelection) => rowSelection[row.id],
+ *   )
+ * </script>
+ *
+ * <input type="checkbox" checked={!!selected.current} />
+ * ```
+ */
+export function subscribeTable<TSourceValue>(
+  source: SubscribeSource<TSourceValue>,
+): ReturnType<typeof useSelector<TSourceValue>>
+export function subscribeTable<TSourceValue, TSelected>(
+  source: SubscribeSource<TSourceValue>,
+  selector: (state: TSourceValue) => TSelected,
+): ReturnType<typeof useSelector<TSourceValue, TSelected>>
+export function subscribeTable<TSourceValue, TSelected>(
+  source: SubscribeSource<TSourceValue>,
+  selector?: (state: TSourceValue) => TSelected,
+) {
+  return useSelector(source, selector, { compare: shallow })
+}

package/dist/flex-render.svelte

@@ -1,35 +0,0 @@
-<script
-  lang="ts"
-  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-  import type {
-    CellContext,
-    ColumnDefTemplate,
-    HeaderContext,
-  } from '@tanstack/table-core'
-  import { RenderComponentConfig } from './render-component'
-
-  type Props = {
-    /** The cell or header field of the current cell's column definition. */
-    content?: TContext extends HeaderContext<TData, TValue>
-      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
-      : TContext extends CellContext<TData, TValue>
-        ? ColumnDefTemplate<CellContext<TData, TValue>>
-        : never
-    /** The result of the `getContext()` function of the header or cell */
-    context: TContext
-  }
-
-  let { content, context }: Props = $props()
-</script>
-
-{#if typeof content === 'string'}
-  {content}
-{:else if content instanceof Function}
-  {@const result = content(context as any)}
-  {#if result instanceof RenderComponentConfig}
-    <svelte:component this={result.component} {...result.props} />
-  {:else}
-    {result}
-  {/if}
-{/if}

package/dist/flex-render.svelte.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="svelte" />
-import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
-declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
-    props(): {
-        /** The cell or header field of the current cell's column definition. */
-        content?: (TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never) | undefined;
-        /** The result of the `getContext()` function of the header or cell */
-        context: TContext;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
-    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>;
-    }): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const FlexRender: $$IsomorphicComponent;
-type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
-export default FlexRender;

package/dist/table.svelte.d.ts

@@ -1,28 +0,0 @@
-import { type RowData, type TableOptions } from '@tanstack/table-core';
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export declare function createTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;

package/dist/table.svelte.js

@@ -1,87 +0,0 @@
-import { _createTable, } from '@tanstack/table-core';
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createTable(options) {
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, options);
-    const table = _createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        table.setOptions(prev => {
-            return mergeObjects(prev, options, {
-                state: mergeObjects(state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                },
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    return table;
-}
-function mergeObjects(...sources) {
-    const target = {};
-    for (let i = 0; i < sources.length; i++) {
-        let source = sources[i];
-        if (typeof source === 'function')
-            source = source();
-        if (source) {
-            const descriptors = Object.getOwnPropertyDescriptors(source);
-            for (const key in descriptors) {
-                if (key in target)
-                    continue;
-                Object.defineProperty(target, key, {
-                    enumerable: true,
-                    get() {
-                        for (let i = sources.length - 1; i >= 0; i--) {
-                            let v, s = sources[i];
-                            if (typeof s === 'function')
-                                s = s();
-                            v = (s || {})[key];
-                            if (v !== undefined)
-                                return v;
-                        }
-                    },
-                });
-            }
-        }
-    }
-    return target;
-}

package/src/flex-render.svelte

@@ -1,35 +0,0 @@
-<script
-  lang="ts"
-  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
->
-  import type {
-    CellContext,
-    ColumnDefTemplate,
-    HeaderContext,
-  } from '@tanstack/table-core'
-  import { RenderComponentConfig } from './render-component'
-
-  type Props = {
-    /** The cell or header field of the current cell's column definition. */
-    content?: TContext extends HeaderContext<TData, TValue>
-      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
-      : TContext extends CellContext<TData, TValue>
-        ? ColumnDefTemplate<CellContext<TData, TValue>>
-        : never
-    /** The result of the `getContext()` function of the header or cell */
-    context: TContext
-  }
-
-  let { content, context }: Props = $props()
-</script>
-
-{#if typeof content === 'string'}
-  {content}
-{:else if content instanceof Function}
-  {@const result = content(context as any)}
-  {#if result instanceof RenderComponentConfig}
-    <svelte:component this={result.component} {...result.props} />
-  {:else}
-    {result}
-  {/if}
-{/if}

package/src/table.svelte.ts

@@ -1,117 +0,0 @@
-import {
-  _createTable,
-  type RowData,
-  type TableOptions,
-  type TableOptionsResolved,
-  type TableState,
-} from '@tanstack/table-core'
-
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createTable<TData extends RowData>(
-  options: TableOptions<TData>
-) {
-  const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
-    {
-      state: {},
-      onStateChange() {},
-      renderFallbackValue: null,
-      mergeOptions: (
-        defaultOptions: TableOptions<TData>,
-        options: Partial<TableOptions<TData>>
-      ) => {
-        return mergeObjects(defaultOptions, options)
-      },
-    },
-    options
-  )
-
-  const table = _createTable(resolvedOptions)
-  let state = $state<Partial<TableState>>(table.initialState)
-
-  function updateOptions() {
-    table.setOptions(prev => {
-      return mergeObjects(prev, options, {
-        state: mergeObjects(state, options.state || {}),
-        onStateChange: (updater: any) => {
-          if (updater instanceof Function) state = updater(state)
-          else state = mergeObjects(state, updater)
-
-          options.onStateChange?.(updater)
-        },
-      })
-    })
-  }
-
-  updateOptions()
-
-  $effect.pre(() => {
-    updateOptions()
-  })
-
-  return table
-}
-
-/**
- * Merges objects together while keeping their getters alive.
- * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
- * */
-function mergeObjects<T>(source: T): T
-function mergeObjects<T, U>(source: T, source1: U): T & U
-function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V
-function mergeObjects<T, U, V, W>(
-  source: T,
-  source1: U,
-  source2: V,
-  source3: W
-): T & U & V & W
-function mergeObjects(...sources: any): any {
-  const target = {}
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i]
-    if (typeof source === 'function') source = source()
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source)
-      for (const key in descriptors) {
-        if (key in target) continue
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              let v,
-                s = sources[i]
-              if (typeof s === 'function') s = s()
-              v = (s || {})[key]
-              if (v !== undefined) return v
-            }
-          },
-        })
-      }
-    }
-  }
-  return target
-}