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

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/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,13 @@
+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 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,54 @@
+import { constructTable } from '@tanstack/table-core';
+import { useSelector } from '@tanstack/svelte-store';
+import { untrack } from 'svelte';
+import { mergeObjects } from './merge-objects';
+import { svelteReactivity } from './reactivity.svelte';
+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 mergeObjects(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 mergeObjects(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;
+}

package/dist/createTableHook.svelte.d.ts

@@ -0,0 +1,235 @@
+import FlexRenderSvelte from './FlexRender.svelte';
+import type { SvelteTable } from './createTable.svelte';
+import type { Component, Snippet } from 'svelte';
+import type { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions, TableState } from '@tanstack/table-core';
+export type ComponentType<T extends Record<string, any>> = Component<T>;
+/**
+ * Enhanced CellContext with pre-bound cell components.
+ * The `cell` property includes the registered cellComponents.
+ */
+export type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
+    cell: Cell<TFeatures, TData, TValue> & TCellComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    column: Column<TFeatures, TData, TValue>;
+    getValue: CellContext<TFeatures, TData, TValue>['getValue'];
+    renderValue: CellContext<TFeatures, TData, TValue>['renderValue'];
+    row: Row<TFeatures, TData>;
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Enhanced HeaderContext with pre-bound header components.
+ * The `header` property includes the registered headerComponents.
+ */
+export type AppHeaderContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    column: Column<TFeatures, TData, TValue>;
+    header: Header<TFeatures, TData, TValue> & THeaderComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    table: Table<TFeatures, TData>;
+};
+/**
+ * Template type for column definitions that can be a string or a function.
+ */
+export type AppColumnDefTemplate<TProps extends object> = string | ((props: TProps) => any);
+/**
+ * Enhanced column definition base with pre-bound components in cell/header/footer contexts.
+ */
+export type AppColumnDefBase<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<IdentifiedColumnDef<TFeatures, TData, TValue>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, TValue, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, TValue, THeaderComponents>>;
+};
+/**
+ * Enhanced display column definition with pre-bound components.
+ */
+export type AppDisplayColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<DisplayColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+};
+/**
+ * Enhanced group column definition with pre-bound components.
+ */
+export type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<GroupColumnDef<TFeatures, TData, unknown>, 'cell' | 'header' | 'footer' | 'columns'> & {
+    cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
+    header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
+    columns?: Array<ColumnDef<TFeatures, TData, unknown>>;
+};
+/**
+ * Enhanced column helper with pre-bound components in cell/header/footer contexts.
+ * This enables TypeScript to know about the registered components when defining columns.
+ */
+export type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowData, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = {
+    /**
+     * Creates a data column definition with an accessor key or function.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
+        id: string;
+    } : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
+    /**
+     * Wraps an array of column definitions to preserve each column's individual TValue type.
+     */
+    columns: <TColumns extends ReadonlyArray<ColumnDef<TFeatures, TData, any>>>(columns: [...TColumns]) => Array<ColumnDef<TFeatures, TData, any>> & [...TColumns];
+    /**
+     * Creates a display column definition for non-data columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    display: (column: AppDisplayColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => DisplayColumnDef<TFeatures, TData, unknown>;
+    /**
+     * Creates a group column definition with nested child columns.
+     * The cell, header, and footer contexts include pre-bound components.
+     */
+    group: (column: AppGroupColumnDef<TFeatures, TData, TCellComponents, THeaderComponents>) => GroupColumnDef<TFeatures, TData, unknown>;
+};
+/**
+ * Options for creating a table hook with pre-bound components and default table options.
+ * Extends all TableOptions except 'columns' | 'data' | 'store' | 'state' | 'initialState'.
+ */
+export type CreateTableHookOptions<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = Omit<TableOptions<TFeatures, any>, 'columns' | 'data' | 'store' | 'state' | 'initialState'> & {
+    /**
+     * Table-level components that need access to the table instance.
+     * These are available directly on the table object returned by createAppTable.
+     * Use `useTableContext()` inside these components.
+     * @example { PaginationControls, GlobalFilter, RowCount }
+     */
+    tableComponents?: TTableComponents;
+    /**
+     * Cell-level components that need access to the cell instance.
+     * These are available on the cell object passed to AppCell's children.
+     * Use `useCellContext()` inside these components.
+     * @example { TextCell, NumberCell, DateCell, CurrencyCell }
+     */
+    cellComponents?: TCellComponents;
+    /**
+     * Header-level components that need access to the header instance.
+     * These are available on the header object passed to AppHeader/AppFooter's children.
+     * Use `useHeaderContext()` inside these components.
+     * @example { SortIndicator, ColumnFilter, ResizeHandle }
+     */
+    headerComponents?: THeaderComponents;
+};
+/**
+ * Extended table API returned by createAppTable with all App wrapper components.
+ */
+export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowData, TSelected, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = SvelteTable<TFeatures, TData, TSelected> & NoInfer<TTableComponents> & {
+    /**
+     * Root wrapper component that provides table context.
+     * @example
+     * ```svelte
+     * <table.AppTable>
+     *   <table>...</table>
+     * </table.AppTable>
+     * ```
+     */
+    AppTable: Component<{
+        children: Snippet;
+    }>;
+    /**
+     * Wraps a cell and provides cell context with pre-bound cellComponents.
+     * @example
+     * ```svelte
+     * <table.AppCell cell={cell}>
+     *   {#snippet children(c)}
+     *     <td><c.TextCell /></td>
+     *   {/snippet}
+     * </table.AppCell>
+     * ```
+     */
+    AppCell: Component<{
+        cell: Cell<TFeatures, TData, any>;
+        children: Snippet<[
+            Cell<TFeatures, TData, any> & NoInfer<TCellComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Wraps a header and provides header context with pre-bound headerComponents.
+     * @example
+     * ```svelte
+     * <table.AppHeader header={header}>
+     *   {#snippet children(h)}
+     *     <th><h.SortIndicator /></th>
+     *   {/snippet}
+     * </table.AppHeader>
+     * ```
+     */
+    AppHeader: Component<{
+        header: Header<TFeatures, TData, any>;
+        children: Snippet<[
+            Header<TFeatures, TData, any> & NoInfer<THeaderComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Wraps a footer and provides header context with pre-bound headerComponents.
+     * @example
+     * ```svelte
+     * <table.AppFooter header={footer}>
+     *   {#snippet children(f)}
+     *     <td><f.FlexRender /></td>
+     *   {/snippet}
+     * </table.AppFooter>
+     * ```
+     */
+    AppFooter: Component<{
+        header: Header<TFeatures, TData, any>;
+        children: Snippet<[
+            Header<TFeatures, TData, any> & NoInfer<THeaderComponents> & {
+                FlexRender: typeof FlexRenderSvelte;
+            }
+        ]>;
+    }>;
+    /**
+     * Convenience FlexRender component attached to the table instance.
+     */
+    FlexRender: typeof FlexRenderSvelte;
+};
+/**
+ * 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 declare function createTableHook<TFeatures extends TableFeatures, const TTableComponents extends Record<string, ComponentType<any>>, const TCellComponents extends Record<string, ComponentType<any>>, const THeaderComponents extends Record<string, ComponentType<any>>>({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): {
+    appFeatures: TFeatures;
+    createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+    createAppTable: <TData extends RowData, TSelected = {}>(tableOptions: Omit<TableOptions<TFeatures, TData>, "_features" | "_rowModels">, selector?: (state: TableState<TFeatures>) => TSelected) => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    useTableContext: <TData extends RowData = RowData>() => SvelteTable<TFeatures, TData>;
+    useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
+    useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
+};