@tanstack/svelte-table 9.0.0-beta.5 → 9.0.0-beta.50

package/README.md

@@ -39,6 +39,8 @@
 > - [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)
+> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
+> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
 
 A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
 

package/dist/createTable.svelte.d.ts

@@ -34,7 +34,6 @@ export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData,
  *   const table = createTable(
  *     {
  *       features,
- *       rowModels: {},
  *       columns,
  *       data,
  *     },

package/dist/createTable.svelte.js

@@ -17,7 +17,6 @@ import { svelteReactivity } from './reactivity.svelte';
  *   const table = createTable(
  *     {
  *       features,
- *       rowModels: {},
  *       columns,
  *       data,
  *     },
@@ -32,7 +31,7 @@ export function createTable(tableOptions, selector) {
     // 1. Merge reactivity into options using mergeObjects (preserves getters)
     const mergedOptions = mergeObjects(tableOptions, {
         features: {
-            coreReativityFeature: svelteReactivity(),
+            coreReactivityFeature: svelteReactivity(),
             ...tableOptions.features,
         },
     });

package/dist/createTableHook.svelte.d.ts

@@ -189,6 +189,47 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
      */
     FlexRender: typeof FlexRenderSvelte;
 };
+export interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
+    /** The features object that was passed to `createTableHook`. */
+    appFeatures: TFeatures;
+    /**
+     * A column helper pre-bound to `TFeatures` and the registered components, so
+     * the cell/header/footer render props expose the bound components.
+     */
+    createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
+    /**
+     * Creates a table with the `App*` wrapper components and registered
+     * `tableComponents` attached. `TData` is inferred from the `data` option.
+     */
+    createAppTable: <TData extends RowData, TSelected = TableState<TFeatures>>(tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>, selector?: (state: TableState<TFeatures>) => TSelected) => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    /**
+     * Reads the table provided by the nearest `<table.AppTable>`. This is the same
+     * extended instance `createAppTable` returns, so the `App*` components and your
+     * `tableComponents` are available on it.
+     *
+     * Pass `TSelected` to match the selector you gave `createAppTable`, so
+     * `table.state` is typed as the selected slice. It cannot be inferred
+     * automatically (context does not carry the provider's generics), so it
+     * defaults to the full table state, which is correct for the common case of
+     * `createAppTable` without a selector.
+     */
+    useTableContext: <TData extends RowData = RowData, TSelected = TableState<TFeatures>>() => AppSvelteTable<TFeatures, TData, TSelected, TTableComponents, TCellComponents, THeaderComponents>;
+    /**
+     * Reads the cell provided by the nearest `<table.AppCell>`, extended with your
+     * `cellComponents` and a context-bound `FlexRender`.
+     */
+    useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+    /**
+     * Reads the header provided by the nearest `<table.AppHeader>` /
+     * `<table.AppFooter>`, extended with your `headerComponents` and a
+     * context-bound `FlexRender`.
+     */
+    useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
+        FlexRender: typeof FlexRenderSvelte;
+    };
+}
 /**
  * Creates a custom table hook with pre-bound components for composition.
  *
@@ -213,23 +254,16 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
  *     rowPaginationFeature,
  *     rowSortingFeature,
  *     columnFilteringFeature,
- *   }),
- *   rowModels: {
  *     paginatedRowModel: createPaginatedRowModel(),
- *     sortedRowModel: createSortedRowModel(sortFns),
- *     filteredRowModel: createFilteredRowModel(filterFns),
- *   },
+ *     sortedRowModel: createSortedRowModel(),
+ *     filteredRowModel: createFilteredRowModel(),
+ *     sortFns,
+ *     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 = TableState<TFeatures>>(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>;
-};
+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>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;

package/dist/createTableHook.svelte.js

@@ -34,12 +34,12 @@ import FlexRenderSvelte from './FlexRender.svelte';
  *     rowPaginationFeature,
  *     rowSortingFeature,
  *     columnFilteringFeature,
- *   }),
- *   rowModels: {
  *     paginatedRowModel: createPaginatedRowModel(),
- *     sortedRowModel: createSortedRowModel(sortFns),
- *     filteredRowModel: createFilteredRowModel(filterFns),
- *   },
+ *     sortedRowModel: createSortedRowModel(),
+ *     filteredRowModel: createFilteredRowModel(),
+ *     sortFns,
+ *     filterFns,
+ *   }),
  *   tableComponents: { PaginationControls, RowCount },
  *   cellComponents: { TextCell, NumberCell },
  *   headerComponents: { SortIndicator, ColumnFilter },
@@ -65,6 +65,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             throw new Error('`useTableContext` must be used within an `AppTable` component. ' +
                 'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.');
         }
+        // `<table.AppTable>` provides the extended table (the App* wrapper
+        // components and `tableComponents` are Object.assign-ed onto the same
+        // instance `createAppTable` returns), so this asserts the runtime shape.
         return table;
     }
     /**
@@ -78,6 +81,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             throw new Error('`useCellContext` must be used within an `AppCell` component. ' +
                 'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.');
         }
+        // `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
+        // the same cell instance it puts in context, so this asserts the runtime
+        // shape.
         return cell;
     }
     /**
@@ -90,6 +96,8 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
         if (!header) {
             throw new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');
         }
+        // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
+        // and `FlexRender` onto the same header instance they put in context.
         return header;
     }
     /**
@@ -124,7 +132,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             setContext(tableContextKey, table);
             return AppTableSvelte(internal, { ...props });
         });
-        const AppCell = ((internal, { children, cell, ...rest }) => {
+        const AppCell = ((internal, { children, cell }) => {
             setContext(cellContextKey, cell);
             return AppCellSvelte(internal, {
                 cell,
@@ -132,7 +140,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
                 children,
             });
         });
-        const AppHeader = ((internal, { children, header, ...rest }) => {
+        const AppHeader = ((internal, { children, header }) => {
             setContext(headerContextKey, header);
             return AppHeaderSvelte(internal, {
                 header,
@@ -141,7 +149,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
             });
         });
         // AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)
-        const AppFooter = ((internal, { children, header, ...rest }) => {
+        const AppFooter = ((internal, { children, header }) => {
             setContext(headerContextKey, header);
             return AppHeaderSvelte(internal, {
                 header,

package/dist/experimental-worker-plugin.d.ts

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/experimental-worker-plugin';

package/dist/experimental-worker-plugin.js

@@ -0,0 +1 @@
+export * from '@tanstack/table-core/experimental-worker-plugin';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export * from '@tanstack/table-core';
 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 type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, } from './createTableHook.svelte';
 export { createTableState } from './createTableState.svelte';
 export { default as FlexRender } from './FlexRender.svelte';
 export { subscribeTable, type SubscribeSource } from './subscribe';

package/dist/render-component.js

@@ -15,6 +15,8 @@
  * ```
  * */
 export class RenderComponentConfig {
+    component;
+    props;
     constructor(component, props) {
         this.component = component;
         this.props = props;
@@ -36,6 +38,8 @@ export class RenderComponentConfig {
  * ```
  * */
 export class RenderSnippetConfig {
+    snippet;
+    params;
     constructor(snippet, params) {
         this.snippet = snippet;
         this.params = params;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.50",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -36,6 +36,11 @@
       "svelte": "./dist/static-functions.js",
       "import": "./dist/static-functions.js"
     },
+    "./experimental-worker-plugin": {
+      "types": "./dist/experimental-worker-plugin.d.ts",
+      "svelte": "./dist/experimental-worker-plugin.js",
+      "import": "./dist/experimental-worker-plugin.js"
+    },
     "./flex-render": {
       "types": "./dist/flex-render.d.ts",
       "svelte": "./dist/flex-render.js",
@@ -44,7 +49,7 @@
     "./package.json": "./package.json"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=20"
   },
   "files": [
     "dist",
@@ -53,14 +58,14 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "^9.0.0-beta.2"
+    "@tanstack/table-core": "9.0.0-beta.50"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "eslint-plugin-svelte": "^3.19.0",
-    "svelte": "^5.56.1",
-    "svelte-check": "^4.5.0"
+    "svelte": "^5.56.2",
+    "svelte-check": "^4.6.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"

package/skills/create-table-hook/SKILL.md

@@ -0,0 +1,168 @@
+---
+name: create-table-hook
+description: >
+  Define a Svelte createAppTable/createAppColumnHelper using the adapter's rune-capable createTableHook implementation, shared features/defaults, reactive per-table getters, optional App component registries, and typed table/cell/header context hooks.
+metadata:
+  type: framework
+  library: '@tanstack/svelte-table'
+  framework: svelte
+  library_version: '9.0.0-beta.50'
+requires:
+  - '@tanstack/table-core#core'
+  - getting-started
+  - table-state
+sources:
+  - 'TanStack/table:docs/framework/svelte/guide/composable-tables.md'
+  - 'TanStack/table:examples/svelte/composable-tables'
+  - 'TanStack/table:packages/svelte-table/src/createTableHook.svelte.ts'
+---
+
+This skill builds on `@tanstack/table-core#core`, `getting-started`, and `table-state`. Use it when multiple tables share conventions; keep one-off tables on `createTable`.
+
+## Setup
+
+Use the shipped `createTableHook`; its implementation is rune-capable. The app hook module itself may be a normal `.ts` module, as in the maintained example.
+
+```ts
+import {
+  createTableHook,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/svelte-table'
+
+export const {
+  createAppTable,
+  createAppColumnHelper,
+  useTableContext,
+  useCellContext,
+  useHeaderContext,
+} = createTableHook({
+  features: tableFeatures({ rowSortingFeature }),
+})
+```
+
+```svelte
+<script lang="ts">
+  import { createAppColumnHelper, createAppTable } from './app-table.svelte'
+  type Person = { name: string }
+  const helper = createAppColumnHelper<Person>()
+  const columns = helper.columns([helper.accessor('name', { header: 'Name' })])
+  let data = $state<Person[]>([{ name: 'Ada' }])
+  const table = createAppTable({
+    columns,
+    get data() {
+      return data
+    },
+  })
+</script>
+```
+
+## Core Patterns
+
+### Register reusable components once
+
+Pass stable `tableComponents`, `cellComponents`, and `headerComponents` to `createTableHook`. Render them through the returned `AppTable`, `AppCell`, and `AppHeader` wrappers so their typed context hooks have a provider.
+
+### Prefer context inside registered components
+
+```ts
+import { useCellContext } from './app-table.svelte'
+
+const cell = useCellContext<string>()
+const value = cell.getValue()
+```
+
+This avoids prop drilling and keeps feature/component types bound to the app hook.
+
+## Common Mistakes
+
+### CRITICAL Reimplementing the rune-aware hook
+
+Wrong:
+
+```ts
+// app-table.ts
+export function createAppTable(options) {
+  return constructTable(options)
+}
+```
+
+Correct:
+
+```ts
+// app-table.ts
+export const { createAppTable } = createTableHook({ features })
+```
+
+The shipped implementation supplies Svelte rune reactivity, option synchronization, wrappers, and context plumbing that a plain core wrapper omits.
+
+Source: `packages/svelte-table/src/createTableHook.svelte.ts`
+
+### HIGH Freezing per-table rune inputs
+
+Wrong:
+
+```ts
+const table = createAppTable({ columns, data })
+```
+
+Correct:
+
+```ts
+const table = createAppTable({
+  columns,
+  get data() {
+    return data
+  },
+})
+```
+
+Shared defaults are static, but each table must still expose current reactive values.
+
+Source: `docs/framework/svelte/guide/composable-tables.md`
+
+### HIGH Reading context outside its wrapper
+
+Wrong:
+
+```ts
+const cell = useCellContext()
+```
+
+Correct:
+
+```svelte
+<table.AppCell {cell}><cell.TextCell /></table.AppCell>
+```
+
+Context helpers require the matching App wrapper in the rendered ancestor tree.
+
+Source: `packages/svelte-table/src/createTableHook.svelte.ts`
+
+### MEDIUM Abstracting a single table too early
+
+Wrong:
+
+```ts
+const hook = createTableHook({ features: tableFeatures({}) })
+```
+
+Correct:
+
+```ts
+const table = createTable({
+  features: tableFeatures({}),
+  columns,
+  get data() {
+    return data
+  },
+})
+```
+
+Use the hook for recurring app conventions, not merely to rename standalone construction.
+
+Source: `docs/framework/svelte/guide/composable-tables.md`
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/svelte-table/src/createTableHook.svelte.ts` and the `App*.svelte` wrappers for exact returned helpers and component contracts.

package/skills/getting-started/SKILL.md

@@ -0,0 +1,172 @@
+---
+name: getting-started
+description: >
+  Create a Svelte 5 TanStack Table v9 table with createTable, explicit tableFeatures, rune-backed data getters, stable static inputs, FlexRender, and headless markup. Load when replacing createSvelteTable or pre-rune patterns.
+metadata:
+  type: framework
+  library: '@tanstack/svelte-table'
+  framework: svelte
+  library_version: '9.0.0-beta.50'
+requires:
+  - '@tanstack/table-core#core'
+  - '@tanstack/table-core#table-features'
+sources:
+  - 'TanStack/table:docs/framework/svelte/guide/migrating.md'
+  - 'TanStack/table:examples/svelte/basic-create-table'
+  - 'TanStack/table:packages/svelte-table/src/index.ts'
+---
+
+This skill builds on `@tanstack/table-core#core` and `@tanstack/table-core#table-features`. Read them first for the headless model and feature registration.
+
+## Setup
+
+Keep features and columns outside reactive work; expose changing rune values through getters.
+
+```svelte
+<script lang="ts">
+  import {
+    createTable,
+    FlexRender,
+    tableFeatures,
+  } from '@tanstack/svelte-table'
+
+  type Person = { firstName: string; age: number }
+  const features = tableFeatures({})
+  const columns = [
+    { accessorKey: 'firstName', header: 'First name' },
+    { accessorKey: 'age', header: 'Age' },
+  ]
+  let data = $state<Person[]>([{ firstName: 'Ada', age: 36 }])
+
+  const table = createTable({
+    features,
+    columns,
+    get data() {
+      return data
+    },
+  })
+</script>
+
+<table>
+  <thead>
+    {#each table.getHeaderGroups() as group (group.id)}
+      <tr
+        >{#each group.headers as header (header.id)}<th
+            >{#if !header.isPlaceholder}<FlexRender {header} />{/if}</th
+          >{/each}</tr
+      >
+    {/each}
+  </thead>
+  <tbody>
+    {#each table.getRowModel().rows as row (row.id)}
+      <tr
+        >{#each row.getAllCells() as cell (cell.id)}<td
+            ><FlexRender {cell} /></td
+          >{/each}</tr
+      >
+    {/each}
+  </tbody>
+</table>
+```
+
+## Core Patterns
+
+### Add only the processing feature you need
+
+```ts
+import {
+  createSortedRowModel,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  tableFeatures,
+} from '@tanstack/svelte-table'
+
+export const features = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: { alphanumeric: sortFn_alphanumeric },
+})
+```
+
+The row-model slot follows its prerequisite feature in the same call. Import individual `sortFn_*` built-ins and register only the ones your columns reference; the full `sortFns` registry object still works but bundles every built-in.
+
+### Treat markup and styles as application code
+
+With core-only `tableFeatures({})`, render `row.getAllCells()`. Use visibility-aware APIs such as `row.getVisibleCells()` only after registering `columnVisibilityFeature`. Call feature APIs from real Svelte event handlers. Table supplies no component-library markup, CSS, or accessibility behavior.
+
+## Common Mistakes
+
+### HIGH Passing a rune snapshot as data
+
+Wrong:
+
+```ts
+const table = createTable({ features, columns, data })
+```
+
+Correct:
+
+```ts
+const table = createTable({
+  features,
+  columns,
+  get data() {
+    return data
+  },
+})
+```
+
+The getter makes `$effect.pre` observe current rune data rather than the value captured at construction.
+
+Source: `packages/svelte-table/src/createTable.svelte.ts`
+
+### HIGH Using the removed v8 constructor
+
+Wrong:
+
+```ts
+const table = createSvelteTable({
+  data,
+  columns,
+  getCoreRowModel: getCoreRowModel(),
+})
+```
+
+Correct:
+
+```ts
+const table = createTable({
+  features,
+  columns,
+  get data() {
+    return data
+  },
+})
+```
+
+V9 requires Svelte 5, `createTable`, and explicit features; the core row model is automatic.
+
+Source: `docs/framework/svelte/guide/migrating.md`
+
+### HIGH Omitting a feature behind an API
+
+Wrong:
+
+```ts
+const features = tableFeatures({})
+table.setSorting([{ id: 'age', desc: true }])
+```
+
+Correct:
+
+```ts
+const features = tableFeatures({ rowSortingFeature })
+```
+
+Feature state and APIs exist only when that feature is registered.
+
+Source: `docs/framework/svelte/guide/migrating.md`
+
+## API Discovery
+
+Inspect `node_modules/@tanstack/svelte-table/src/index.ts`, then the exported implementation. Inspect core and feature APIs through `node_modules/@tanstack/table-core/src/index.ts` and `src/features/<feature>/`.