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

package/dist/render-component.js

@@ -1,20 +1,51 @@
 /**
- * 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 {
-    constructor(component, props = {}) {
+    constructor(component, props) {
         this.component = component;
         this.props = props;
     }
 }
+/**
+ * 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 {
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
 /**
  * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * 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.
@@ -33,3 +64,28 @@ export class RenderComponentConfig {
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
 export const renderComponent = (component, props) => new RenderComponentConfig(component, props);
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * *The snippet must only take one parameter.*
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns
+ * @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 = (snippet, params) => new RenderSnippetConfig(snippet, params);

package/dist/static-functions.d.ts

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

package/dist/static-functions.js

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

package/dist/subscribe.d.ts

@@ -0,0 +1,9 @@
+import type { RowData, Table, TableFeatures, TableState } from '@tanstack/table-core';
+/**
+ * Fine-grained subscription to `table.store` using `useSelector` with shallow
+ * comparison. Call from `<script>` so the selector is contextually typed
+ * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ */
+export declare function subscribeTable<TFeatures extends TableFeatures, TData extends RowData, TSelected>(table: Table<TFeatures, TData>, selector: (state: TableState<TFeatures>) => TSelected): {
+    readonly current: TSelected;
+};

package/dist/subscribe.js

@@ -0,0 +1,9 @@
+import { shallow, useSelector } from '@tanstack/svelte-store';
+/**
+ * Fine-grained subscription to `table.store` using `useSelector` with shallow
+ * comparison. Call from `<script>` so the selector is contextually typed
+ * (same inference model as React’s `Subscribe` / `table.Subscribe`).
+ */
+export function subscribeTable(table, selector) {
+    return useSelector(table.store, selector, { compare: shallow });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.41",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -30,26 +30,44 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
+    "./static-functions": {
+      "types": "./dist/static-functions.d.ts",
+      "svelte": "./dist/static-functions.js",
+      "import": "./dist/static-functions.js"
+    },
+    "./flex-render": {
+      "types": "./dist/flex-render.d.ts",
+      "svelte": "./dist/flex-render.js",
+      "import": "./dist/flex-render.js"
+    },
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=16"
   },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@tanstack/table-core": "9.0.0-alpha.4"
+    "@tanstack/svelte-store": "^0.12.0",
+    "@tanstack/table-core": "9.0.0-alpha.41"
   },
   "devDependencies": {
-    "@sveltejs/package": "^2.3.1",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next",
-    "svelte": "^5.0.0-next",
-    "svelte-check": "^3.7.0"
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "eslint-plugin-svelte": "^3.17.1",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.7"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next"
+    "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/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,133 @@
+import {
+  constructReactivityFeature,
+  constructTable,
+} from '@tanstack/table-core'
+import { shallow, useSelector } from '@tanstack/svelte-store'
+import { untrack } from 'svelte'
+import { mergeObjects } from './merge-objects'
+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. 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 useSelector
+  const allState = useSelector(table.store, (state) => state)
+  const allOptions = useSelector(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. State selector
+  const stateStore = useSelector(table.store, selector)
+
+  Object.defineProperty(table, 'state', {
+    get() {
+      return stateStore.current
+    },
+    configurable: true,
+    enumerable: true,
+  })
+
+  return table
+}