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

package/dist/createTableHook.svelte.js

@@ -0,0 +1,170 @@
+import { getContext, setContext } from 'svelte';
+import { createColumnHelper as coreCreateColumnHelper } from '@tanstack/table-core';
+import { createTable } from './createTable.svelte';
+import { mergeObjects } from './merge-objects';
+import { cellContextKey, headerContextKey, tableContextKey, } from './context-keys.js';
+import AppTableSvelte from './AppTable.svelte';
+import AppCellSvelte from './AppCell.svelte';
+import AppHeaderSvelte from './AppHeader.svelte';
+import FlexRenderSvelte from './FlexRender.svelte';
+// =============================================================================
+// createTableHook Factory
+// =============================================================================
+/**
+ * Creates a custom table hook with pre-bound components for composition.
+ *
+ * This is the table equivalent of TanStack Form's `createFormHook`. It allows you to:
+ * - Define features, row models, and default options once, shared across all tables
+ * - Register reusable table, cell, and header components
+ * - Access table/cell/header instances via context in those components
+ * - Get a `createAppTable` hook that returns an extended table with App wrapper components
+ * - Get a `createAppColumnHelper` function pre-bound to your features
+ *
+ * @example
+ * ```ts
+ * // hooks/table.ts
+ * export const {
+ *   createAppTable,
+ *   createAppColumnHelper,
+ *   useTableContext,
+ *   useCellContext,
+ *   useHeaderContext,
+ * } = createTableHook({
+ *   _features: tableFeatures({
+ *     rowPaginationFeature,
+ *     rowSortingFeature,
+ *     columnFilteringFeature,
+ *   }),
+ *   _rowModels: {
+ *     paginatedRowModel: createPaginatedRowModel(),
+ *     sortedRowModel: createSortedRowModel(sortFns),
+ *     filteredRowModel: createFilteredRowModel(filterFns),
+ *   },
+ *   tableComponents: { PaginationControls, RowCount },
+ *   cellComponents: { TextCell, NumberCell },
+ *   headerComponents: { SortIndicator, ColumnFilter },
+ * })
+ * ```
+ */
+export function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
+    /**
+     * Create a column helper pre-bound to the features and components configured in this table hook.
+     * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
+     */
+    function createAppColumnHelper() {
+        return coreCreateColumnHelper();
+    }
+    /**
+     * Access the table instance from within an `AppTable` wrapper.
+     * Use this in custom `tableComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useTableContext() {
+        const table = getContext(tableContextKey);
+        if (!table) {
+            throw new Error('`useTableContext` must be used within an `AppTable` component. ' +
+                'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.');
+        }
+        return table;
+    }
+    /**
+     * Access the cell instance from within an `AppCell` wrapper.
+     * Use this in custom `cellComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useCellContext() {
+        const cell = getContext(cellContextKey);
+        if (!cell) {
+            throw new Error('`useCellContext` must be used within an `AppCell` component. ' +
+                'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.');
+        }
+        return cell;
+    }
+    /**
+     * Access the header instance from within an `AppHeader` or `AppFooter` wrapper.
+     * Use this in custom `headerComponents` passed to `createTableHook`.
+     * TFeatures is already known from the createTableHook call.
+     */
+    function useHeaderContext() {
+        const header = getContext(headerContextKey);
+        if (!header) {
+            throw new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');
+        }
+        return header;
+    }
+    /**
+     * Enhanced createTable hook that returns a table with App wrapper components
+     * and pre-bound tableComponents attached directly to the table object.
+     *
+     * Default options from createTableHook are automatically merged with
+     * the options passed here. Options passed here take precedence.
+     *
+     * TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
+     */
+    function createAppTable(tableOptions, selector) {
+        // Merge default options with provided options (provided takes precedence)
+        const mergedTableOptions = mergeObjects(defaultTableOptions, tableOptions);
+        const table = createTable(mergedTableOptions, selector);
+        // Build cellComponents with FlexRender included
+        const cellComponentsWithFlexRender = {
+            FlexRender: FlexRenderSvelte,
+            ...(cellComponents ?? {}),
+        };
+        // Build headerComponents with FlexRender included
+        const headerComponentsWithFlexRender = {
+            FlexRender: FlexRenderSvelte,
+            ...(headerComponents ?? {}),
+        };
+        // Create wrapper components using the svelte-form (internal, props) => pattern.
+        // setContext is called in the closure — this runs during component
+        // initialization, so Svelte's context API works correctly.
+        // With keyed {#each} blocks, components are recreated on reorder,
+        // so context is always fresh.
+        const AppTable = ((internal, props) => {
+            setContext(tableContextKey, table);
+            return AppTableSvelte(internal, { ...props });
+        });
+        const AppCell = ((internal, { children, cell, ...rest }) => {
+            setContext(cellContextKey, cell);
+            return AppCellSvelte(internal, {
+                cell,
+                cellComponents: cellComponentsWithFlexRender,
+                children,
+            });
+        });
+        const AppHeader = ((internal, { children, header, ...rest }) => {
+            setContext(headerContextKey, header);
+            return AppHeaderSvelte(internal, {
+                header,
+                headerComponents: headerComponentsWithFlexRender,
+                children,
+            });
+        });
+        // AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)
+        const AppFooter = ((internal, { children, header, ...rest }) => {
+            setContext(headerContextKey, header);
+            return AppHeaderSvelte(internal, {
+                header,
+                headerComponents: headerComponentsWithFlexRender,
+                children,
+            });
+        });
+        // Combine everything into the extended table API
+        return Object.assign(table, {
+            AppTable,
+            AppCell,
+            AppHeader,
+            AppFooter,
+            FlexRender: FlexRenderSvelte,
+            ...(tableComponents ?? {}),
+        });
+    }
+    return {
+        appFeatures: defaultTableOptions._features,
+        createAppColumnHelper,
+        createAppTable,
+        useTableContext,
+        useCellContext,
+        useHeaderContext,
+    };
+}

package/dist/createTableState.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { Updater } from '@tanstack/table-core';
+export declare function createTableState<TState>(initialValue: TState): [() => TState, (updater: Updater<TState>) => void];

package/dist/createTableState.svelte.js

@@ -0,0 +1,12 @@
+export function createTableState(initialValue) {
+    let value = $state(initialValue);
+    return [
+        () => value,
+        (updater) => {
+            if (updater instanceof Function)
+                value = updater(value);
+            else
+                value = updater;
+        },
+    ];
+}

package/dist/flex-render.d.ts

@@ -0,0 +1 @@
+export { default as FlexRender } from './FlexRender.svelte';

package/dist/flex-render.js

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+export { default as FlexRender } from './FlexRender.svelte';

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 export * from '@tanstack/table-core';
-export { default as FlexRender } from './flex-render.svelte';
-export { renderComponent } from './render-component';
-export { createSvelteTable } from './table.svelte';
+export { createTable } from './createTable.svelte';
+export type { SvelteTable } from './createTable.svelte';
+export { createTableHook } from './createTableHook.svelte';
+export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, } from './createTableHook.svelte';
+export { createTableState } from './createTableState.svelte';
+export { default as FlexRender } from './FlexRender.svelte';
+export { subscribeTable } from './subscribe';
+export { renderComponent, renderSnippet } from './render-component';

package/dist/index.js

@@ -1,4 +1,7 @@
 export * from '@tanstack/table-core';
-export { default as FlexRender } from './flex-render.svelte';
-export { renderComponent } from './render-component';
-export { createSvelteTable } from './table.svelte';
+export { createTable } from './createTable.svelte';
+export { createTableHook } from './createTableHook.svelte';
+export { createTableState } from './createTableState.svelte';
+export { default as FlexRender } from './FlexRender.svelte';
+export { subscribeTable } from './subscribe';
+export { renderComponent, renderSnippet } from './render-component';

package/dist/merge-objects.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare function mergeObjects<T>(source: T): T;
+export declare function mergeObjects<T, U>(source: T, source1: U): T & U;
+export declare function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
+export declare function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;

package/dist/merge-objects.js

@@ -0,0 +1,29 @@
+export function mergeObjects(...sources) {
+    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;
+}

package/dist/reactivity.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { TableReactivityBindings } from '@tanstack/table-core/reactivity';
+export declare function svelteReactivity(): TableReactivityBindings;

package/dist/reactivity.svelte.js

@@ -0,0 +1,45 @@
+import { flushSync, untrack } from 'svelte';
+function observerToCallback(observerOrNext) {
+    return typeof observerOrNext === 'function'
+        ? observerOrNext
+        : (value) => observerOrNext.next?.(value);
+}
+function subscribeToRune(getValue, observerOrNext) {
+    const callback = observerToCallback(observerOrNext);
+    const unsubscribe = $effect.root(() => {
+        $effect(() => {
+            callback(getValue());
+        });
+    });
+    return { unsubscribe };
+}
+export function svelteReactivity() {
+    return {
+        createReadonlyAtom: (fn, _options) => {
+            const value = $derived.by(fn);
+            return {
+                get: () => value,
+                subscribe: ((observerOrNext) => {
+                    return subscribeToRune(() => value, observerOrNext);
+                }),
+            };
+        },
+        createWritableAtom: (initialValue, _options) => {
+            let value = $state(initialValue);
+            return {
+                set: (updater) => {
+                    value =
+                        typeof updater === 'function'
+                            ? updater(value)
+                            : updater;
+                },
+                get: () => value,
+                subscribe: ((observerOrNext) => {
+                    return subscribeToRune(() => value, observerOrNext);
+                }),
+            };
+        },
+        untrack: untrack,
+        batch: (fn) => flushSync(fn),
+    };
+}

package/dist/render-component.d.ts

@@ -1,20 +1,50 @@
-import type { SvelteComponent, ComponentType, 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 declare class RenderComponentConfig<TComponent extends SvelteComponent> {
-    component: ComponentType<TComponent>;
-    props: ComponentProps<TComponent> | Record<string, never>;
-    constructor(component: ComponentType<TComponent>, props?: ComponentProps<TComponent> | Record<string, never>);
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props?: (ComponentProps<TComponent> | Record<string, never>) | undefined;
+    constructor(component: TComponent, props?: (ComponentProps<TComponent> | Record<string, never>) | undefined);
+}
+/**
+ * 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 declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params?: TProps | undefined;
+    constructor(snippet: Snippet<[TProps]>, params?: TProps | undefined);
 }
 /**
  * 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.
@@ -32,4 +62,29 @@ export declare class RenderComponentConfig<TComponent extends SvelteComponent> {
  * ```
  * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
  */
-export declare const renderComponent: <TComponent extends SvelteComponent<any, any, any>>(component: ComponentType<TComponent>, props: ComponentProps<TComponent>) => RenderComponentConfig<TComponent>;
+export declare const renderComponent: <TComponent extends Component<any>, TProps extends ComponentProps<TComponent>>(component: TComponent, props?: TProps) => RenderComponentConfig<TComponent>;
+/**
+ * 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 declare const renderSnippet: <TProps>(snippet: Snippet<[TProps]>, params?: TProps) => RenderSnippetConfig<TProps>;

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.42",
   "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.42"
   },
   "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?.()}