@tanstack/svelte-table 9.0.0-alpha.2 → 9.0.0-alpha.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.27",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -33,23 +33,31 @@
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.0"
+    "@tanstack/svelte-store": "^0.10.3",
+    "@tanstack/table-core": "9.0.0-alpha.27"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.3.1"
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "eslint-plugin-svelte": "^3.17.0",
+    "svelte": "^5.55.2",
+    "svelte-check": "^4.4.6"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "svelte-check": "^3.6.8",
-    "svelte-eslint-parser": "^0.33.1"
+    "svelte": "^5.0.0"
   },
-  "scripts": {}
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:types": "svelte-check --tsconfig ./tsconfig.json",
+    "test:build": "publint --strict",
+    "build": "svelte-package --input ./src --output ./dist"
+  }
 }

package/src/AppCell.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    cell: any
+    cellComponents: any
+    children: Snippet<[any]>
+  }
+
+  let { children, cell, cellComponents }: Props = $props()
+</script>
+
+{@render children?.(Object.assign(cell, cellComponents))}

package/src/AppHeader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    header: any
+    headerComponents: any
+    children: Snippet<[any]>
+  }
+
+  let { children, header, headerComponents }: Props = $props()
+</script>
+
+{@render children?.(Object.assign(header, headerComponents))}

package/src/AppTable.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+  }
+
+  let { children }: Props = $props()
+</script>
+
+{@render children?.()}

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/Subscribe.svelte

@@ -0,0 +1,45 @@
+<script
+  lang="ts"
+  generics="TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown"
+>
+  import type {
+    NoInfer,
+    RowData,
+    TableFeatures,
+    TableState,
+  } from '@tanstack/table-core'
+  import type { Snippet } from 'svelte'
+  import type { SvelteTable } from './createTable.svelte'
+
+  type Props<
+    TFeatures extends TableFeatures,
+    TData extends RowData,
+    TSelected,
+  > = {
+    /**
+     * A function that selects a portion of the table state to subscribe to.
+     * @param state - The full table state
+     * @returns The selected portion of state
+     */
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
+    /**
+     * A Svelte snippet that receives the selected state and renders content.
+     * The snippet will be called with the selected state whenever it changes.
+     */
+    children: Snippet<[state: Readonly<TSelected>]>
+    /**
+     * The table instance to subscribe to
+     */
+    table: SvelteTable<TFeatures, TData, unknown>
+  }
+
+  let { table, selector, children }: Props<TFeatures, TData, TSelected> =
+    $props()
+</script>
+
+<!--
+  Access table.store.state in the template (a reactive context).
+  The constructReactivityFeature interceptor makes this trigger
+  the $state-based notifier, so Svelte tracks it automatically.
+-->
+{@render children(selector(table.store.state as TableState<TFeatures>))}

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,165 @@
+import {
+  constructReactivityFeature,
+  constructTable,
+} from '@tanstack/table-core'
+import { useStore } from '@tanstack/svelte-store'
+import { untrack } from 'svelte'
+import { mergeObjects } from './merge-objects'
+import type {
+  NoInfer,
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
+import type { Snippet } from 'svelte'
+
+export type SvelteTable<
+  TFeatures extends TableFeatures,
+  TData extends RowData,
+  TSelected = {},
+> = Table<TFeatures, TData> & {
+  /**
+   * A Svelte component that allows you to subscribe to the table state.
+   *
+   * This is useful for opting into state subscriptions for specific parts of the table state.
+   *
+   * @example
+   * <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
+   *   {(state) => (
+   *     <tr>
+   *       // render the row
+   *     </tr>
+   *   )}
+   * </table.Subscribe>
+   */
+  Subscribe: <TSelected>(props: {
+    selector: (state: NoInfer<TableState<TFeatures>>) => TSelected
+    children: ((state: Readonly<TSelected>) => Snippet) | Snippet
+  }) => any
+  /**
+   * 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. Create $state-based notifier for reactivity feature
+  let notifierValue = $state(0)
+
+  // 2. Construct reactivity feature (same pattern as solid/vue/angular)
+  const svelteReactivityFeature = constructReactivityFeature<TFeatures, TData>({
+    stateNotifier: () => notifierValue,
+    optionsNotifier: () => notifierValue,
+  })
+
+  // 3. Merge reactivity feature into options using mergeObjects (preserves getters)
+  const mergedOptions = mergeObjects(tableOptions, {
+    _features: mergeObjects(tableOptions._features, {
+      svelteReactivityFeature,
+    }),
+  }) as any
+
+  // 4. 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>
+
+  // 5. Construct table
+  const table = constructTable(resolvedOptions) as SvelteTable<
+    TFeatures,
+    TData,
+    TSelected
+  >
+
+  // 6. Subscribe to all state and options via useStore
+  const allState = useStore(table.store, (state) => state)
+  const allOptions = useStore(table.optionsStore, (options) => options)
+
+  // 7. Sync store changes -> notifier.
+  // Use $effect.pre so this runs before DOM updates (like Solid's createComputed).
+  // Use untrack for the write so the effect only depends on allState/allOptions,
+  // not on notifierValue itself (which would cause an infinite loop).
+  $effect.pre(() => {
+    allState.current
+    allOptions.current
+    untrack(() => {
+      notifierValue++
+    })
+  })
+
+  // 8. 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 to
+  // prevent tracking notifierValue (read via store.state's stateNotifier
+  // interceptor inside setOptions), which would cause an infinite loop.
+  $effect.pre(() => {
+    // Read reactive getters to create $effect dependencies on external state
+    const state = mergedOptions.state
+    if (state) {
+      for (const key in state) {
+        void state[key]
+      }
+    }
+    void mergedOptions.data
+
+    untrack(() => {
+      table.setOptions((prev) => {
+        return mergeObjects(prev, mergedOptions) as TableOptions<
+          TFeatures,
+          TData
+        >
+      })
+    })
+  })
+
+  // 9. Subscribe component
+  table.Subscribe = function Subscribe<TSel>(props: {
+    selector: (state: TableState<TFeatures>) => TSel
+    children: ((state: Readonly<TSel>) => Snippet) | Snippet
+  }): any {
+    const selected = useStore(table.store, props.selector)
+    if (typeof props.children === 'function') {
+      return props.children(selected.current)
+    }
+    return props.children
+  }
+
+  // 10. State selector
+  const stateStore = useStore(table.store, selector)
+
+  Object.defineProperty(table, 'state', {
+    get() {
+      return stateStore.current
+    },
+    configurable: true,
+    enumerable: true,
+  })
+
+  return table
+}