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

package/README.md

@@ -0,0 +1,127 @@
+<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>
+
+## Using an AI Coding Agent?
+
+TanStack Table ships [TanStack Intent](https://github.com/TanStack/intent) skills inside each adapter package. After installing the library, run:
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+to add skill-loading guidance for your agent (Claude Code, Cursor, Copilot, etc.). The same CLI also exposes `intent list` to browse available skills and `intent load <skill>` to print one for inspection. Skills version with the library — your agent gets guidance that matches the version of `@tanstack/<framework>-table` you installed. Only available for v9 and above.
+
+## 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/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,48 @@
+import type { RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
+export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>> = Omit<Table<TFeatures, TData>, 'store'> & {
+    /**
+     * @deprecated Prefer `table.state` for render reads,
+     * `table.atoms.<slice>.get()` for slice snapshots, or
+     * `useSelector(table.store, selector)` for explicit subscriptions.
+     * `table.store.state` is a current-value snapshot and is easy to misuse in
+     * render code.
+     */
+    readonly store: Table<TFeatures, TData>['store'];
+    /**
+     * The selected state of the table. This state may not match the structure of
+     * the full table 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>;
+};
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       features,
+ *       rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
+export declare function createTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: TableOptions<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): SvelteTable<TFeatures, TData, TSelected>;

package/dist/createTable.svelte.js

@@ -0,0 +1,79 @@
+import { constructTable } from '@tanstack/table-core';
+import { useSelector } from '@tanstack/svelte-store';
+import { untrack } from 'svelte';
+import { flatMerge, mergeObjects } from './merge-objects';
+import { svelteReactivity } from './reactivity.svelte';
+/**
+ * Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
+ *
+ * The optional selector projects from `table.store`; the selected value is
+ * exposed on `table.state`. The adapter syncs options in `$effect.pre`, so
+ * reactive option getters and external `$state` values are applied before DOM
+ * updates read table APIs such as `getRowModel()`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   const table = createTable(
+ *     {
+ *       features,
+ *       rowModels: {},
+ *       columns,
+ *       data,
+ *     },
+ *     (state) => ({ pagination: state.pagination }),
+ *   )
+ * </script>
+ *
+ * {table.state.pagination.pageIndex}
+ * ```
+ */
+export function createTable(tableOptions, selector) {
+    // 1. Merge reactivity into options using mergeObjects (preserves getters)
+    const mergedOptions = mergeObjects(tableOptions, {
+        features: {
+            coreReativityFeature: svelteReactivity(),
+            ...tableOptions.features,
+        },
+    });
+    // 2. Set up resolved options with mergeOptions handler
+    const resolvedOptions = mergeObjects({
+        mergeOptions: (defaultOptions, newOptions) => {
+            return flatMerge(defaultOptions, newOptions);
+        },
+    }, mergedOptions);
+    // 3. Construct table
+    const table = constructTable(resolvedOptions);
+    // 4. 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 so
+    // option writes do not subscribe this effect to table internals.
+    $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 flatMerge(prev, mergedOptions);
+            });
+        });
+    });
+    // 5. State selector
+    const stateStore = useSelector(table.store, selector);
+    Object.defineProperty(table, 'state', {
+        get() {
+            return stateStore.current;
+        },
+        configurable: true,
+        enumerable: true,
+    });
+    return table;
+}