@tanstack/svelte-table 9.0.0-beta.3 → 9.0.0-beta.30

package/README.md

@@ -39,6 +39,7 @@
 > - [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)
 
 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;
     }
     /**

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/svelte-table",
-  "version": "9.0.0-beta.3",
+  "version": "9.0.0-beta.30",
   "description": "Headless UI for building powerful tables & datagrids for Svelte.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -53,14 +53,14 @@
   ],
   "dependencies": {
     "@tanstack/svelte-store": "^0.12.0",
-    "@tanstack/table-core": "^9.0.0-beta.2"
+    "@tanstack/table-core": "9.0.0-beta.30"
   },
   "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/svelte/client-to-server/SKILL.md

@@ -3,9 +3,9 @@ name: svelte/client-to-server
 description: >
   Convert a client-side Svelte table to server-side (manual) modes. Toggle `manualPagination`,
   `manualSorting`, `manualFiltering`, `manualGrouping`, `manualExpanding` for whatever the server
-  owns, drop the matching `rowModels` factories and `features` you no longer need, supply
-  `rowCount` for the pager, then drive the request from `table.atoms.pagination` /
-  `table.atoms.sorting` / etc. (or external atoms you own) — using rune-aware getters
+  owns, drop the matching row-model factory slots from `tableFeatures` and any `features` you no
+  longer need, supply `rowCount` for the pager, then drive the request from `table.atoms.pagination`
+  / `table.atoms.sorting` / etc. (or external atoms you own) using rune-aware getters
   (`get data()`, `get rowCount()`) so the table re-syncs in `$effect.pre`. Svelte 5+ only.
 type: lifecycle
 library: tanstack-table
@@ -44,8 +44,7 @@ already-paged window is perfectly valid for medium datasets.
 | `manualGrouping`   | Server returns already-grouped rows          | Pre-shaped data                                             |
 | `manualExpanding`  | Server resolves sub-rows                     | Server-provided sub-row tree                                |
 
-When a stage is manual, you can drop its row-model factory. `manualPagination: true` does not
-need `paginatedRowModel: createPaginatedRowModel()`.
+When a stage is manual, you can drop its row-model factory slot from `tableFeatures`. `manualPagination: true` does not need `paginatedRowModel: createPaginatedRowModel()` in the features object.
 
 ## Step 1 — Identify what's moving server-side
 
@@ -111,7 +110,6 @@ const filters = useSelector(filtersAtom)
   // No row-model factories for these — server owns them.
   const table = createTable({
     features,
-    rowModels: {},
     columns,
     get data() {
       return query.data?.rows ?? []
@@ -196,11 +194,11 @@ const table = createTable({
     columnFilteringFeature,
     rowPaginationFeature,
     rowSortingFeature,
+    filteredRowModel: createFilteredRowModel(), // client filters the page
+    sortedRowModel: createSortedRowModel(), // client sorts the page
+    filterFns,
+    sortFns,
   }),
-  rowModels: {
-    filteredRowModel: createFilteredRowModel(filterFns), // client filters the page
-    sortedRowModel: createSortedRowModel(sortFns), // client sorts the page
-  },
   columns,
   get data() {
     return query.data?.rows ?? []

package/skills/svelte/compose-with-tanstack-form/SKILL.md

@@ -116,6 +116,9 @@ Each cell type is a small Svelte component that knows which row + field it edits
   const features = tableFeatures({
     rowPaginationFeature,
     columnFilteringFeature,
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    filterFns,
   })
 
   const columnHelper = createColumnHelper<typeof features, Person>()
@@ -170,10 +173,6 @@ Each cell type is a small Svelte component that knows which row + field it edits
 
   const table = createTable({
     features,
-    rowModels: {
-      filteredRowModel: createFilteredRowModel(filterFns),
-      paginatedRowModel: createPaginatedRowModel(),
-    },
     columns,
     get data() {
       // The form is the source of truth.

package/skills/svelte/compose-with-tanstack-pacer/SKILL.md

@@ -95,7 +95,7 @@ Same shape, calling `table.setGlobalFilter`:
 
 ## Throttle column resizing
 
-`columnResizingFeature` writes to `columnSizing` continuously. v9 supports `columnResizeMode:
+`columnResizingFeature` (which requires `columnSizingFeature` to also be registered in `tableFeatures`) writes to `columnSizing` continuously. v9 supports `columnResizeMode:
 'onChange' | 'onEnd'` — the default is `'onChange'` (commit per-frame). For very heavy tables,
 either:
 

package/skills/svelte/compose-with-tanstack-query/SKILL.md

@@ -58,7 +58,6 @@ the affected pipeline stages, pipe the result back through reactive getters.
 
   const table = createTable({
     features,
-    rowModels: {},
     columns,
     get data() {
       return dataQuery.data?.rows ?? []
@@ -115,7 +114,6 @@ const dataQuery = createQuery(() => ({
 
 const table = createTable({
   features,
-  rowModels: {},
   columns,
   get data() {
     return dataQuery.data?.rows ?? []
@@ -152,7 +150,6 @@ const table = createTable({
     rowSortingFeature,
     columnFilteringFeature,
   }),
-  rowModels: {},
   columns,
   get data() {
     return dataQuery.data?.rows ?? []

package/skills/svelte/compose-with-tanstack-store/SKILL.md

@@ -46,7 +46,7 @@ If a slice is supplied externally via `atoms`, `table.atoms.<slice>` reads from
 
 ## The Svelte bindings (what `svelteReactivity()` actually does)
 
-The Svelte adapter ships `svelteReactivity()` and installs it as `coreReativityFeature`. It
+The Svelte adapter ships `svelteReactivity()` and installs it as `coreReactivityFeature`. It
 maps Store primitives to runes:
 
 - Readonly atoms → `$derived.by(fn)`
@@ -83,7 +83,6 @@ The second argument to `createTable` is a TanStack Store selector. The result is
   const table = createTable(
     {
       features,
-      rowModels: { paginatedRowModel: createPaginatedRowModel() },
       columns,
       get data() {
         return data
@@ -161,9 +160,6 @@ const pagination = useSelector(paginationAtom)
 
 const table = createTable({
   features,
-  rowModels: {
-    /* ... */
-  },
   columns,
   get data() {
     return data
@@ -215,9 +211,6 @@ export const rowSelectionAtom = createAtom<RowSelectionState>({})
 
   const table = createTable({
     features,
-    rowModels: {
-      /* ... */
-    },
     columns,
     get data() {
       return data

package/skills/svelte/compose-with-tanstack-virtual/SKILL.md

@@ -59,13 +59,17 @@ pnpm add @tanstack/svelte-virtual
   import { createVirtualizer } from '@tanstack/svelte-virtual'
   import { get } from 'svelte/store'
 
-  const features = tableFeatures({ columnSizingFeature, rowSortingFeature })
+  const features = tableFeatures({
+    columnSizingFeature,
+    rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    sortFns,
+  })
 
   let data = $state<Person[]>(makeData(200_000))
 
   const table = createTable({
     features,
-    rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
     columns,
     get data() {
       return data
@@ -218,7 +222,6 @@ const flatData = $derived(
 
 const table = createTable({
   features: tableFeatures({}),
-  rowModels: {},
   columns,
   get data() {
     return flatData

package/skills/svelte/getting-started/SKILL.md

@@ -2,8 +2,8 @@
 name: svelte/getting-started
 description: >
   End-to-end first-table journey for `@tanstack/svelte-table@9` on Svelte 5. Install the adapter,
-  declare `features` with `tableFeatures()`, register `rowModels` factories with their `*Fns`
-  parameters, build a typed column helper with both `TFeatures` and `TData` generics, instantiate
+  declare `features` with `tableFeatures()` (including row-model factories and `*Fns` registries as
+  feature slots), build a typed column helper with both `TFeatures` and `TData` generics, instantiate
   the table with `createTable(options)` using `$state` data and `get data()` reactive option getters,
   and render with `FlexRender`. Svelte 5+ only — Svelte 3/4 must use v8.
 type: lifecycle
@@ -51,18 +51,17 @@ pnpm add @tanstack/svelte-store
 You do **not** install `@tanstack/table-core` separately — the Svelte adapter re-exports
 everything you need (column helpers, feature objects, row-model factories, types).
 
-## 2. Define `features` and `rowModels`
+## 2. Define `features`
 
 v9 is explicit. You opt in to every feature and every row model. The core row model is
 included by default, so the minimum viable table is:
 
 ```ts
 const features = tableFeatures({})
-const rowModels = {}
 ```
 
-For anything beyond a flat table, register the features you'll use **and** the matching
-row-model factories. Row-model factories take `*Fns` registries as parameters:
+For anything beyond a flat table, register the features you'll use along with the matching
+row-model factories and `*Fns` registries — all as slots inside `tableFeatures`:
 
 ```ts
 import {
@@ -81,13 +80,12 @@ const features = tableFeatures({
   rowPaginationFeature,
   rowSortingFeature,
   columnFilteringFeature,
-})
-
-const rowModels = {
   paginatedRowModel: createPaginatedRowModel(),
-  sortedRowModel: createSortedRowModel(sortFns),
-  filteredRowModel: createFilteredRowModel(filterFns),
-}
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  sortFns,
+  filterFns,
+})
 ```
 
 **Skipping a feature** in `features` means its state slice does not exist on `table.atoms`,
@@ -166,7 +164,6 @@ option (`columns`, `rowCount`, `state.*`).
 
   const table = createTable({
     features,
-    rowModels: {},
     columns,
     get data() {
       return data
@@ -230,13 +227,13 @@ focus, scroll, and any per-row component state.
     tableFeatures,
   } from '@tanstack/svelte-table'
 
-  const features = tableFeatures({ rowPaginationFeature })
+  const features = tableFeatures({
+    rowPaginationFeature,
+    paginatedRowModel: createPaginatedRowModel(),
+  })
 
   const table = createTable({
     features,
-    rowModels: {
-      paginatedRowModel: createPaginatedRowModel(),
-    },
     columns,
     get data() {
       return data
@@ -273,8 +270,7 @@ const pagination = subscribeTable(table.atoms.pagination)
 
 ## 7. `createTableHook` (when you have more than one table)
 
-For apps with multiple tables, define the `features`, `rowModels`, and shared components
-once:
+For apps with multiple tables, define `features` (including row-model factories) and shared components once:
 
 ```ts
 // hooks/table.ts
@@ -289,11 +285,13 @@ import {
 } from '@tanstack/svelte-table'
 
 export const { createAppTable, createAppColumnHelper } = createTableHook({
-  features: tableFeatures({ rowPaginationFeature, rowSortingFeature }),
-  rowModels: {
+  features: tableFeatures({
+    rowPaginationFeature,
+    rowSortingFeature,
     paginatedRowModel: createPaginatedRowModel(),
-    sortedRowModel: createSortedRowModel(sortFns),
-  },
+    sortedRowModel: createSortedRowModel(),
+    sortFns,
+  }),
 })
 ```
 
@@ -319,7 +317,7 @@ export const { createAppTable, createAppColumnHelper } = createTableHook({
 
 - **Svelte 3/4.** Adapter will not work. See top of file.
 - **`createSvelteTable` / `useSvelteTable` / `getCoreRowModel`** — all v8 names. v9 uses
-  `createTable` and `rowModels: { paginatedRowModel: createPaginatedRowModel(), ... }`.
+  `createTable` with row-model factories registered as slots in `tableFeatures({ paginatedRowModel: createPaginatedRowModel(), ... })`.
 - **Plain `data` instead of `get data()` getter.** Table will not see data updates. Always
   pass a reactive getter for state that lives in `$state`.
 - **Missing feature in `features`.** `table.setSorting` / `column.getCanSort` won't exist.

package/skills/svelte/migrate-v8-to-v9/SKILL.md

@@ -3,10 +3,11 @@ name: svelte/migrate-v8-to-v9
 description: >
   Mechanical migration from `@tanstack/svelte-table@8` to `@tanstack/svelte-table@9`. v9 in Svelte
   is a full rewrite — Svelte 5 runes only (no Svelte 3/4), no `/legacy` adapter (unlike React),
-  `createSvelteTable` → `createTable`, `getCoreRowModel` / `getSortedRowModel` factories → required
-  `features` + `rowModels` registration, `flexRender` helper → `<FlexRender>` component,
-  writable-store `state` → rune-based getters / external atoms, `onStateChange` → per-slice
-  `on[State]Change` or `atoms`. Plan a feature-by-feature audit, not a search-and-replace.
+  `createSvelteTable` → `createTable`, `getCoreRowModel` / `getSortedRowModel` factories →
+  row-model factories registered as slots inside `tableFeatures({...})`, `flexRender` helper →
+  `<FlexRender>` component, writable-store `state` → rune-based getters / external atoms,
+  `onStateChange` → per-slice `on[State]Change` or `atoms`. Plan a feature-by-feature audit, not a
+  search-and-replace.
 type: lifecycle
 library: tanstack-table
 framework: svelte
@@ -46,11 +47,11 @@ There is no third option. Trying to install v9 on a Svelte 4 codebase will error
 | -------------------------------------------------- | ------------------------------------------------------------------------------------- |
 | `createSvelteTable(options)`                       | `createTable(options, selector?)`                                                     |
 | `getCoreRowModel()`                                | included by default; no factory                                                       |
-| `getPaginationRowModel()`                          | `rowModels.paginatedRowModel: createPaginatedRowModel()`                              |
-| `getSortedRowModel()`                              | `rowModels.sortedRowModel: createSortedRowModel(sortFns)`                             |
-| `getFilteredRowModel()`                            | `rowModels.filteredRowModel: createFilteredRowModel(filterFns)`                       |
-| `getExpandedRowModel()`                            | `rowModels.expandedRowModel: createExpandedRowModel()`                                |
-| `getGroupedRowModel()`                             | `rowModels.groupedRowModel: createGroupedRowModel(aggregationFns)`                    |
+| `getPaginationRowModel()`                          | `tableFeatures({ paginatedRowModel: createPaginatedRowModel() })`                     |
+| `getSortedRowModel()`                              | `tableFeatures({ sortedRowModel: createSortedRowModel(), sortFns })`                  |
+| `getFilteredRowModel()`                            | `tableFeatures({ filteredRowModel: createFilteredRowModel(), filterFns })`            |
+| `getExpandedRowModel()`                            | `tableFeatures({ expandedRowModel: createExpandedRowModel() })`                       |
+| `getGroupedRowModel()`                             | `tableFeatures({ groupedRowModel: createGroupedRowModel(), aggregationFns })`         |
 | `getFacetedRowModel()` / `MinMax` / `UniqueValues` | facet APIs auto-derived when `*Facet*Feature` registered                              |
 | `flexRender(template, ctx)` helper                 | `<FlexRender header={h} />` / `<FlexRender cell={c} />` / `<FlexRender footer={h} />` |
 | `ColumnDef<TData>`                                 | `ColumnDef<TFeatures, TData>` (extra generic)                                         |
@@ -79,8 +80,7 @@ For each Svelte component that uses the table:
    `import { createTable, FlexRender, tableFeatures, ... }`.
 4. **Add `features`.** Create `const features = tableFeatures({ ... only the features this
 table uses ... })`.
-5. **Move row-model factories.** Every `get*RowModel: get*RowModel()` becomes a `rowModels`
-   entry with the matching `create*RowModel(*Fns)` factory.
+5. **Move row-model factories into `tableFeatures`.** Every `get*RowModel: get*RowModel()` becomes a slot inside `tableFeatures({ ..., create*RowModel() })`. Any `*Fns` registry that was passed as a factory argument is now also a named slot in the same `tableFeatures` call.
 6. **Generic columns.** Add `<typeof features, TData>` to `ColumnDef<>` and
    `createColumnHelper<>()`. TypeScript will tell you when you missed one.
 7. **`data` as a getter.** `data: data` → `get data() { return data }`. Same for any other
@@ -99,7 +99,7 @@ table uses ... })`.
 <script lang="ts">
   // v8
   import { writable } from 'svelte/store'
-  const options = writable({ ... })
+  const options = writable({ data, columns })
   $: $options.state = $state
 </script>
 ```
@@ -111,7 +111,6 @@ table uses ... })`.
 ```ts
 const table = createTable({
   features,
-  rowModels: { paginatedRowModel: createPaginatedRowModel() },
   columns,
   get data() {
     return data
@@ -131,12 +130,17 @@ const table = createTable({
 
   const table = createTable({
     features,
-    rowModels: { ... },
     columns,
-    get data() { return data },
+    get data() {
+      return data
+    },
     state: {
-      get sorting() { return sorting },
-      get pagination() { return pagination },
+      get sorting() {
+        return sorting
+      },
+      get pagination() {
+        return pagination
+      },
     },
     onSortingChange: (updater) => {
       sorting = updater instanceof Function ? updater(sorting) : updater
@@ -154,16 +158,20 @@ const table = createTable({
 import { createAtom, useSelector } from '@tanstack/svelte-store'
 
 const sortingAtom = createAtom<SortingState>([])
-const paginationAtom = createAtom<PaginationState>({ pageIndex: 0, pageSize: 10 })
+const paginationAtom = createAtom<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
 
 const sorting = useSelector(sortingAtom)
 const pagination = useSelector(paginationAtom)
 
 const table = createTable({
   features,
-  rowModels: { ... },
   columns,
-  get data() { return data },
+  get data() {
+    return data
+  },
   atoms: {
     sorting: sortingAtom,
     pagination: paginationAtom,
@@ -221,8 +229,8 @@ import { renderSnippet } from '@tanstack/svelte-table'
 ## After the rewrite — verify
 
 - `pnpm test:types` (or `svelte-check`) catches missing `<typeof features, TData>` generics,
-  missing `features` / `rowModels`, and feature APIs called on tables that didn't register
-  them.
+  missing `features` or row-model factory slots, and feature APIs called on tables that didn't
+  register them.
 - `pnpm build` should pass with the new `features` set. Bundle should shrink — only the
   features you register are included.
 - Click through every table screen. Reset buttons, multi-sort, pagination reset on filter,
@@ -241,9 +249,9 @@ import { renderSnippet } from '@tanstack/svelte-table'
   changed" bugs during migration.
 - **Plain `features: { rowPaginationFeature }` instead of `tableFeatures({...})`.** Loses
   inference; you'll get `any` everywhere.
-- **Forgetting feature registration after copying the row-model factory.** Adding
-  `paginatedRowModel: createPaginatedRowModel()` without `rowPaginationFeature` in
-  `features` does nothing.
+- **Forgetting feature registration after adding the row-model factory slot.** Adding
+  `paginatedRowModel: createPaginatedRowModel()` to `tableFeatures` without also including
+  `rowPaginationFeature` does nothing.
 - **Reimplementing v8 helpers** (`flexRender`-style functions, manual store subscriptions,
   hand-rolled selectors) instead of using `FlexRender` / `subscribeTable` / atom selectors.
   That's the #1 AI tell on this migration.

package/skills/svelte/production-readiness/SKILL.md

@@ -69,8 +69,9 @@ If you find yourself running a table without a feature's UI ever showing, drop t
 `createTable` syncs options in `$effect.pre`. If any of these identities flip every component
 run, the table re-syncs more than it needs to.
 
-- **`features` and `rowModels`**: declare at module scope, not inside the component
-  function, and never inside `$derived` / `$effect`.
+- **`features`**: declare at module scope, not inside the component function, and never
+  inside `$derived` / `$effect`. The `features` object now also carries row-model factories
+  and `*Fns` registries, so keeping it stable prevents unnecessary re-sync.
 - **`columns`**: same — module scope or `$state.frozen` / a non-reactive `const` in the
   component. Reactive recompute of columns is rare and almost always a bug.
 - **`data`**: pass with a getter (`get data()`) so the reference is stable when the data
@@ -80,8 +81,10 @@ run, the table re-syncs more than it needs to.
 ```svelte
 <script lang="ts">
   // module scope is fine in .svelte too, when truly static
-  const features = tableFeatures({ rowPaginationFeature })
-  const rowModels = { paginatedRowModel: createPaginatedRowModel() }
+  const features = tableFeatures({
+    rowPaginationFeature,
+    paginatedRowModel: createPaginatedRowModel(),
+  })
   const columns = columnHelper.columns([
     /* ... */
   ])
@@ -91,7 +94,6 @@ run, the table re-syncs more than it needs to.
 
   const table = createTable({
     features,
-    rowModels,
     columns,
     get data() {
       return data

package/skills/svelte/table-state/SKILL.md

@@ -48,7 +48,7 @@ A table instance has three (and a half) state surfaces:
 - `table.state` — the value returned by the optional selector passed as the second argument to
   `createTable`. **Svelte-only surface.**
 
-The Svelte adapter installs `svelteReactivity()` as the `coreReativityFeature`:
+The Svelte adapter installs `svelteReactivity()` as the `coreReactivityFeature`:
 
 | Core concept  | Svelte binding  |
 | ------------- | --------------- |
@@ -81,14 +81,13 @@ import {
 const features = tableFeatures({
   rowPaginationFeature,
   rowSortingFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  sortFns,
 })
 
 const table = createTable({
   features,
-  rowModels: {
-    paginatedRowModel: createPaginatedRowModel(),
-    sortedRowModel: createSortedRowModel(sortFns),
-  },
   columns,
   get data() {
     return data
@@ -122,7 +121,6 @@ exposed as `table.state`. The default selector returns the full registered state
   const table = createTable(
     {
       features,
-      rowModels: { paginatedRowModel: createPaginatedRowModel() },
       columns,
       get data() {
         return data
@@ -186,7 +184,6 @@ The default: set starting values, let the table own the rest. `initialState` als
 ```ts
 const table = createTable({
   features,
-  rowModels: {},
   columns,
   get data() {
     return data
@@ -231,7 +228,6 @@ const pagination = useSelector(paginationAtom)
 
 const table = createTable({
   features,
-  rowModels: {},
   columns,
   get data() {
     return data
@@ -266,7 +262,6 @@ updates.
 
   const table = createTable({
     features,
-    rowModels: {},
     columns,
     get data() {
       return data
@@ -340,8 +335,7 @@ Always key `{#each}` blocks on stable ids (`headerGroup.id`, `header.id`, `row.i
 
 ## `createTableHook` — app-wide composition
 
-Create one configured hook per app: shared `features`, `rowModels`, defaults, and pre-bound
-component registries.
+Create one configured hook per app: shared `features` (including row-model factories), defaults, and pre-bound component registries.
 
 ```ts
 import {
@@ -363,11 +357,13 @@ export const {
   useCellContext,
   useHeaderContext,
 } = createTableHook({
-  features: tableFeatures({ rowPaginationFeature, rowSortingFeature }),
-  rowModels: {
+  features: tableFeatures({
+    rowPaginationFeature,
+    rowSortingFeature,
     paginatedRowModel: createPaginatedRowModel(),
-    sortedRowModel: createSortedRowModel(sortFns),
-  },
+    sortedRowModel: createSortedRowModel(),
+    sortFns,
+  }),
   cellComponents: { TextCell },
   headerComponents: { SortIndicator },
 })

package/src/createTable.svelte.ts

@@ -51,7 +51,6 @@ export type SvelteTable<
  *   const table = createTable(
  *     {
  *       features,
- *       rowModels: {},
  *       columns,
  *       data,
  *     },
@@ -73,7 +72,7 @@ export function createTable<
   // 1. Merge reactivity into options using mergeObjects (preserves getters)
   const mergedOptions = mergeObjects(tableOptions, {
     features: {
-      coreReativityFeature: svelteReactivity(),
+      coreReactivityFeature: svelteReactivity(),
       ...tableOptions.features,
     },
   }) as TableOptions<TFeatures, TData>

package/src/createTableHook.svelte.ts

@@ -376,6 +376,84 @@ export type AppSvelteTable<
     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 }
+}
+
 // =============================================================================
 // createTableHook Factory
 // =============================================================================
@@ -404,12 +482,12 @@ export type AppSvelteTable<
  *     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 },
@@ -431,7 +509,12 @@ export function createTableHook<
   TTableComponents,
   TCellComponents,
   THeaderComponents
->) {
+>): CreateTableHookResult<
+  TFeatures,
+  TTableComponents,
+  TCellComponents,
+  THeaderComponents
+> {
   /**
    * Create a column helper pre-bound to the features and components configured in this table hook.
    * The cell, header, and footer contexts include pre-bound components (e.g., `cell.TextCell`).
@@ -455,9 +538,16 @@ export function createTableHook<
    * Use this in custom `tableComponents` passed to `createTableHook`.
    * TFeatures is already known from the createTableHook call.
    */
-  function useTableContext<TData extends RowData = RowData>(): SvelteTable<
+  function useTableContext<
+    TData extends RowData = RowData,
+    TSelected = TableState<TFeatures>,
+  >(): AppSvelteTable<
     TFeatures,
-    TData
+    TData,
+    TSelected,
+    TTableComponents,
+    TCellComponents,
+    THeaderComponents
   > {
     const table = getContext(tableContextKey)
 
@@ -468,7 +558,17 @@ export function createTableHook<
       )
     }
 
-    return table as SvelteTable<TFeatures, TData>
+    // `<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 as unknown as AppSvelteTable<
+      TFeatures,
+      TData,
+      TSelected,
+      TTableComponents,
+      TCellComponents,
+      THeaderComponents
+    >
   }
 
   /**
@@ -480,7 +580,8 @@ export function createTableHook<
     TFeatures,
     any,
     TValue
-  > {
+  > &
+    TCellComponents & { FlexRender: typeof FlexRenderSvelte } {
     const cell = getContext(cellContextKey)
 
     if (!cell) {
@@ -490,7 +591,11 @@ export function createTableHook<
       )
     }
 
-    return cell as Cell<TFeatures, any, TValue>
+    // `<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 as unknown as Cell<TFeatures, any, TValue> &
+      TCellComponents & { FlexRender: typeof FlexRenderSvelte }
   }
 
   /**
@@ -502,7 +607,8 @@ export function createTableHook<
     TFeatures,
     any,
     TValue
-  > {
+  > &
+    THeaderComponents & { FlexRender: typeof FlexRenderSvelte } {
     const header = getContext(headerContextKey)
 
     if (!header) {
@@ -511,7 +617,10 @@ export function createTableHook<
       )
     }
 
-    return header as Header<TFeatures, any, TValue>
+    // `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
+    // and `FlexRender` onto the same header instance they put in context.
+    return header as unknown as Header<TFeatures, any, TValue> &
+      THeaderComponents & { FlexRender: typeof FlexRenderSvelte }
   }
 
   /**
@@ -527,10 +636,7 @@ export function createTableHook<
     TData extends RowData,
     TSelected = TableState<TFeatures>,
   >(
-    tableOptions: Omit<
-      TableOptions<TFeatures, TData>,
-      'features' | 'rowModels'
-    >,
+    tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>,
     selector?: (state: TableState<TFeatures>) => TSelected,
   ): AppSvelteTable<
     TFeatures,
@@ -629,7 +735,7 @@ export function createTableHook<
   }
 
   return {
-    appFeatures: defaultTableOptions.features as TFeatures,
+    appFeatures: defaultTableOptions.features,
     createAppColumnHelper,
     createAppTable,
     useTableContext,

package/src/index.ts

@@ -14,6 +14,7 @@ export type {
   AppSvelteTable,
   ComponentType,
   CreateTableHookOptions,
+  CreateTableHookResult,
 } from './createTableHook.svelte'
 export { createTableState } from './createTableState.svelte'
 export { default as FlexRender } from './FlexRender.svelte'