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

package/README.md

@@ -0,0 +1,117 @@
+<div align="center">
+  <img src="./media/header_table.png" alt="TanStack Table">
+</div>
+
+<br />
+
+<div align="center">
+<a href="https://npmjs.com/package/@tanstack/react-table" target="\_parent">
+  <img alt="npm downloads" src="https://img.shields.io/npm/dm/@tanstack/react-table.svg" />
+</a>
+<a href="https://github.com/tanstack/table" target="\_parent">
+  <img alt="github stars" src="https://img.shields.io/github/stars/tanstack/react-table.svg?style=social&label=Star" />
+</a>
+<a href="https://bundlephobia.com/result?p=@tanstack/react-table@latest" target="\_parent">
+  <img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-table@latest" />
+</a>
+</div>
+
+<div align="center">
+<a href="#badge">
+  <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
+</a>
+<a href="https://bestofjs.org/projects/tanstack-table"><img alt="Best of JS" src="https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=TanStack%2Ftable%26since=daily" /></a>
+  <a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
+</div>
+
+### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)
+
+</div>
+
+# TanStack Table
+
+> [!NOTE]
+> You may know TanStack Table by the adapter names:
+>
+> - [Angular Table](https://tanstack.com/table/alpha/docs/framework/angular/angular-table)
+> - [Lit Table](https://tanstack.com/table/alpha/docs/framework/lit/lit-table)
+> - [React Table](https://tanstack.com/table/alpha/docs/framework/react/react-table)
+> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
+> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
+> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
+
+A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
+
+- Framework‑agnostic core with bindings for React, Vue & Solid
+- 100% customizable — bring your own UI, components, and styles
+- Sorting, filtering, grouping, aggregation & row selection
+- Lightweight, virtualizable & server‑side friendly
+
+### <a href="https://tanstack.com/table">Read the Docs →</a>
+
+## Get Involved
+
+- We welcome issues and pull requests!
+- Participate in [GitHub discussions](https://github.com/TanStack/table/discussions)
+- Chat with the community on [Discord](https://discord.com/invite/WrRKjPJ)
+- See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions
+
+## Partners
+
+<table align="center">
+  <tr>
+    <td>
+        <a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS">
+			<picture>
+			  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
+			  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
+			  <img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
+			</picture>        
+		</a>
+    </td>
+    <td padding="20">
+      <a href="https://www.cloudflare.com?utm_source=tanstack">
+         <picture>
+		  <source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
+		  <source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
+		  <img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
+		</picture>
+      </a>
+    </td>
+    <td>
+     <a href="https://ag-grid.com/react-data-grid/?utm_source=reacttable&utm_campaign=githubreacttable" style="display: flex; align-items: center; border: none;">
+       <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="./media/ag-grid-dark.svg" height="40" />
+        <source media="(prefers-color-scheme: light)" srcset="./media/ag-grid-light.svg" height="40" />
+        <img src="https://raw.githubusercontent.com/tannerlinsley/files/master/partners/ag-grid.svg" height="60" alt="AG Grid" />
+      </picture>
+      </a>
+    </td>
+  </tr>
+</table>
+
+<div align="center">
+<img src="./media/partner_logo.svg" alt="Table & you?" height="65">
+<p>
+We're looking for TanStack Table Partners to join our mission! Partner with us to push the boundaries of TanStack Table and build amazing things together.
+</p>
+<a href="mailto:partners@tanstack.com?subject=TanStack Table Partnership"><b>LET'S CHAT</b></a>
+</div>
+
+## Explore the TanStack Ecosystem
+
+- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
+- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
+- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
+- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
+- <a href="https://github.com/tanstack/pacer"><b>TanStack Pacer</b></a> – Debouncing, throttling, batching <br/>
+- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
+- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
+- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
+- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
+- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
+- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering
+
+… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>
+
+<!-- USE THE FORCE LUKE -->

package/dist/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/dist/AppCell.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    cell: any;
+    cellComponents: any;
+    children: Snippet<[any]>;
+}
+declare const AppCell: import("svelte").Component<Props, {}, "">;
+type AppCell = ReturnType<typeof AppCell>;
+export default AppCell;

package/dist/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/dist/AppHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    header: any;
+    headerComponents: any;
+    children: Snippet<[any]>;
+}
+declare const AppHeader: import("svelte").Component<Props, {}, "">;
+type AppHeader = ReturnType<typeof AppHeader>;
+export default AppHeader;

package/dist/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/dist/AppTable.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+}
+declare const AppTable: import("svelte").Component<Props, {}, "">;
+type AppTable = ReturnType<typeof AppTable>;
+export default AppTable;

package/dist/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/dist/FlexRender.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Cell, CellContext, CellData, ColumnDefTemplate, Header, HeaderContext, RowData, TableFeatures } from '@tanstack/table-core';
+declare function $$render<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>(): {
+    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;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> {
+    props(): ReturnType<typeof $$render<TFeatures, TData, TValue>>['props'];
+    events(): ReturnType<typeof $$render<TFeatures, TData, TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TFeatures, TData, TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData, TValue>['props']>, ReturnType<__sveltets_Render<TFeatures, TData, TValue>['events']>, ReturnType<__sveltets_Render<TFeatures, TData, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeatures, TData, TValue>['exports']>;
+    <TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData, TValue>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> = InstanceType<typeof FlexRender<TFeatures, TData, TValue>>;
+export default FlexRender;

package/dist/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/dist/Subscribe.svelte.d.ts

@@ -0,0 +1,44 @@
+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>;
+};
+declare function $$render<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(): {
+    props: Props<TFeatures, TData, TSelected>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown> {
+    props(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['props'];
+    events(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['events'];
+    slots(): ReturnType<typeof $$render<TFeatures, TData, TSelected>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']>, ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['events']>, ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['exports']>;
+    <TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['props']> & {}): ReturnType<__sveltets_Render<TFeatures, TData, TSelected>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Subscribe: $$IsomorphicComponent;
+type Subscribe<TFeatures extends TableFeatures, TData extends RowData, TSelected = unknown> = InstanceType<typeof Subscribe<TFeatures, TData, TSelected>>;
+export default Subscribe;

package/dist/context-keys.d.ts

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

package/dist/context-keys.js

@@ -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/dist/createTable.svelte.d.ts

@@ -0,0 +1,32 @@
+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 declare function createTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): SvelteTable<TFeatures, TData, TSelected>;

package/dist/createTable.svelte.js

@@ -0,0 +1,82 @@
+import { constructReactivityFeature, constructTable, } from '@tanstack/table-core';
+import { useStore } from '@tanstack/svelte-store';
+import { untrack } from 'svelte';
+import { mergeObjects } from './merge-objects';
+export function createTable(tableOptions, selector = () => ({})) {
+    // 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({
+        stateNotifier: () => notifierValue,
+        optionsNotifier: () => notifierValue,
+    });
+    // 3. Merge reactivity feature into options using mergeObjects (preserves getters)
+    const mergedOptions = mergeObjects(tableOptions, {
+        _features: mergeObjects(tableOptions._features, {
+            svelteReactivityFeature,
+        }),
+    });
+    // 4. Set up resolved options with mergeOptions handler
+    const resolvedOptions = mergeObjects({
+        mergeOptions: (defaultOptions, newOptions) => {
+            return mergeObjects(defaultOptions, newOptions);
+        },
+    }, mergedOptions);
+    // 5. Construct table
+    const table = constructTable(resolvedOptions);
+    // 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);
+            });
+        });
+    });
+    // 9. Subscribe component
+    table.Subscribe = function Subscribe(props) {
+        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;
+}