@tanstack/preact-table 9.0.0-alpha.46 → 9.0.0-alpha.48

package/README.md

@@ -49,6 +49,16 @@ A headless table library for building powerful datagrids with full control over
 
 ### <a href="https://tanstack.com/table">Read the Docs →</a>
 
+## Using an AI Coding Agent?
+
+TanStack Table ships [TanStack Intent](https://github.com/TanStack/intent) skills inside each adapter package. After installing the library, run:
+
+```sh
+npx @tanstack/intent@latest install
+```
+
+to add skill-loading guidance for your agent (Claude Code, Cursor, Copilot, etc.). The same CLI also exposes `intent list` to browse available skills and `intent load <skill>` to print one for inspection. Skills version with the library — your agent gets guidance that matches the version of `@tanstack/<framework>-table` you installed. Only available for v9 and above.
+
 ## Get Involved
 
 - We welcome issues and pull requests!

package/dist/reactivity.cjs

@@ -10,6 +10,7 @@ let _tanstack_preact_store = require("@tanstack/preact-store");
 function preactReactivity() {
 	return {
 		createOptionsStore: false,
+		schedule: (fn) => queueMicrotask(() => fn()),
 		batch: _tanstack_preact_store.batch,
 		untrack: (fn) => fn(),
 		createReadonlyAtom: (fn, options) => {

package/dist/reactivity.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Preact adapter.\n *\n * Preact stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,oDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,8CAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
+{"version":3,"file":"reactivity.cjs","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Preact adapter.\n *\n * Preact stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    schedule: (fn) => queueMicrotask(() => fn()),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB,WAAW,OAAO,qBAAqB,IAAI,CAAC;EAC5C;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,oDAAwB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,8CAAkB,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/dist/reactivity.js

@@ -10,6 +10,7 @@ import { batch, createAtom } from "@tanstack/preact-store";
 function preactReactivity() {
 	return {
 		createOptionsStore: false,
+		schedule: (fn) => queueMicrotask(() => fn()),
 		batch,
 		untrack: (fn) => fn(),
 		createReadonlyAtom: (fn, options) => {

package/dist/reactivity.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Preact adapter.\n *\n * Preact stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,OAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,OAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}
+{"version":3,"file":"reactivity.js","names":[],"sources":["../src/reactivity.ts"],"sourcesContent":["import { batch, createAtom } from '@tanstack/preact-store'\nimport type {\n  TableAtomOptions,\n  TableReactivityBindings,\n} from '@tanstack/table-core/reactivity'\n\n/**\n * Creates the table-core reactivity bindings used by the Preact adapter.\n *\n * Preact stores table state in TanStack Store atoms and leaves options as plain\n * resolved data because `useTable` synchronizes options during render.\n */\nexport function preactReactivity(): TableReactivityBindings {\n  return {\n    createOptionsStore: false,\n    schedule: (fn) => queueMicrotask(() => fn()),\n    batch,\n    untrack: (fn) => fn(),\n    createReadonlyAtom: <T>(fn: () => T, options?: TableAtomOptions<T>) => {\n      return createAtom(() => fn(), {\n        compare: options?.compare,\n      })\n    },\n    createWritableAtom: <T>(value: T, options?: TableAtomOptions<T>) => {\n      return createAtom(value, {\n        compare: options?.compare,\n      })\n    },\n  }\n}\n\n// // TOTO - re-explore preact signals for reactivity\n// import { batch, computed, signal, untracked } from '@preact/signals'\n// import type {\n//   TableAtomOptions,\n//   TableReactivityBindings,\n// } from '@tanstack/table-core/reactivity'\n// import type { Atom, Observer, ReadonlyAtom } from '@tanstack/preact-store'\n\n// function observerToCallback<T>(\n//   observerOrNext: Observer<T> | ((value: T) => void),\n// ): (value: T) => void {\n//   return typeof observerOrNext === 'function'\n//     ? observerOrNext\n//     : (value) => observerOrNext.next?.(value)\n// }\n\n// function signalToReadonlyAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): ReadonlyAtom<T> {\n//   return Object.assign(source, {\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as ReadonlyAtom<T>['subscribe'],\n//   })\n// }\n\n// function signalToWritableAtom<T>(source: {\n//   value: T\n//   subscribe: (observer: (value: T) => void) => () => void\n// }): Atom<T> {\n//   return Object.assign(source, {\n//     set: (updater: T | ((prevVal: T) => T)) => {\n//       source.value =\n//         typeof updater === 'function'\n//           ? (updater as (prevVal: T) => T)(source.value)\n//           : updater\n//     },\n//     get: () => source.value,\n//     subscribe: ((observerOrNext: Observer<T> | ((value: T) => void)) => {\n//       const unsubscribe = source.subscribe(observerToCallback(observerOrNext))\n//       return { unsubscribe }\n//     }) as Atom<T>['subscribe'],\n//   })\n// }\n\n// export function preactReactivity(): TableReactivityBindings {\n//   return {\n//     createReadonlyAtom: <T>(fn: () => T, _options?: TableAtomOptions<T>) => {\n//       return signalToReadonlyAtom(computed(fn))\n//     },\n//     createWritableAtom: <T>(\n//       value: T,\n//       _options?: TableAtomOptions<T>,\n//     ): Atom<T> => {\n//       return signalToWritableAtom(signal(value))\n//     },\n//     untrack: untracked,\n//     batch: batch,\n//   }\n// }\n"],"mappings":";;;;;;;;;AAYA,SAAgB,mBAA4C;CAC1D,OAAO;EACL,oBAAoB;EACpB,WAAW,OAAO,qBAAqB,IAAI,CAAC;EAC5C;EACA,UAAU,OAAO,IAAI;EACrB,qBAAwB,IAAa,YAAkC;GACrE,OAAO,iBAAiB,IAAI,EAAE,EAC5B,2DAAS,QAAS,SACnB,CAAC;;EAEJ,qBAAwB,OAAU,YAAkC;GAClE,OAAO,WAAW,OAAO,EACvB,2DAAS,QAAS,SACnB,CAAC;;EAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/preact-table",
-  "version": "9.0.0-alpha.46",
+  "version": "9.0.0-alpha.48",
   "description": "Headless UI for building powerful tables & datagrids for Preact.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -18,7 +18,8 @@
     "preact",
     "table",
     "preact-table",
-    "datagrid"
+    "datagrid",
+    "tanstack-intent"
   ],
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -45,11 +46,12 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "skills"
   ],
   "dependencies": {
     "@tanstack/preact-store": "^0.13.1",
-    "@tanstack/table-core": "9.0.0-alpha.46"
+    "@tanstack/table-core": "9.0.0-alpha.48"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.5",

package/skills/preact/client-to-server/SKILL.md

@@ -0,0 +1,294 @@
+---
+name: preact/client-to-server
+description: >
+  Convert a client-side `@tanstack/preact-table` to server-side (a.k.a. manual)
+  modes. Pass server-paginated data, set `manualSorting` / `manualFiltering` /
+  `manualPagination` / `manualGrouping` / `manualExpanding` for whatever the
+  server owns, supply `rowCount`, key external atoms for pagination/sorting/
+  filters and trigger a refetch when they change. Routing keywords: server-side
+  pagination, manual pagination, manualSorting, manualFiltering, rowCount,
+  remote data preact.
+type: lifecycle
+library: tanstack-table
+framework: preact
+library_version: '9.0.0-alpha.47'
+requires:
+  - state-management
+  - pagination
+  - filtering
+  - sorting
+  - preact/table-state
+sources:
+  - TanStack/table:examples/preact/basic-external-atoms/src/main.tsx
+  - TanStack/table:examples/preact/with-tanstack-query/src/main.tsx
+  - TanStack/table:examples/preact/with-tanstack-query/src/fetchData.ts
+  - TanStack/table:docs/framework/preact/guide/table-state.md
+---
+
+Client-side tables run sort/filter/paginate through registered row-model factories. Server-side tables let the server own those stages; the table just renders what the server returned and emits state changes that the app uses to refetch. Same `_features`, same APIs — different ownership.
+
+## The Manual Flags
+
+Set the matching flag(s) to `true` to tell the table that the server (not the registered row-model factory) is doing that stage:
+
+| Flag               | Owned by server         |
+| ------------------ | ----------------------- |
+| `manualPagination` | page slicing            |
+| `manualSorting`    | row ordering            |
+| `manualFiltering`  | column + global filters |
+| `manualGrouping`   | group-by rows           |
+| `manualExpanding`  | row expansion           |
+
+The matching `*Feature` should still be in `_features` so its state slice exists and its APIs work — you are only telling the row-model pipeline to skip the transform.
+
+For pagination, supply `rowCount` so `table.getPageCount()` is correct. Optional but usually required for a UI.
+
+Source: `examples/preact/with-tanstack-query/src/main.tsx`.
+
+## Standard Pattern
+
+Own the slices that drive the server request with external atoms. Subscribe to them with `useSelector` so the request key is reactive. Pass them through `options.atoms`. Trigger the refetch from the same atoms.
+
+```tsx
+import { useMemo } from 'preact/hooks'
+import { useCreateAtom, useSelector } from '@tanstack/preact-store'
+import {
+  rowPaginationFeature,
+  tableFeatures,
+  useTable,
+  type PaginationState,
+} from '@tanstack/preact-table'
+
+const _features = tableFeatures({ rowPaginationFeature })
+
+function App() {
+  const paginationAtom = useCreateAtom<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const pagination = useSelector(paginationAtom)
+
+  // Any data fetcher works — fetch / SWR / preact-query / a Suspense source.
+  const { data: rowsPayload } = useSomeServerFetcher({
+    queryKey: ['rows', pagination],
+    queryFn: () => fetchRows(pagination),
+  })
+
+  const defaultData = useMemo(() => [], [])
+
+  const table = useTable(
+    {
+      _features,
+      _rowModels: {}, // no client-side pagination factory
+      columns,
+      data: rowsPayload?.rows ?? defaultData,
+      rowCount: rowsPayload?.rowCount, // makes getPageCount() correct
+      atoms: { pagination: paginationAtom },
+      manualPagination: true, // server owns the slicing
+    },
+    (state) => state,
+  )
+  // ...
+}
+```
+
+Source: `examples/preact/with-tanstack-query/src/main.tsx` (lines 56–86).
+
+## All Three Slices Server-Owned
+
+Same shape, more atoms. Compose `pagination + sorting + columnFilters + globalFilter` into the request key.
+
+```tsx
+const _features = tableFeatures({
+  rowPaginationFeature,
+  rowSortingFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+})
+
+const paginationAtom = useCreateAtom<PaginationState>({
+  pageIndex: 0,
+  pageSize: 10,
+})
+const sortingAtom = useCreateAtom<SortingState>([])
+const columnFiltersAtom = useCreateAtom<ColumnFiltersState>([])
+const globalFilterAtom = useCreateAtom<string>('')
+
+const pagination = useSelector(paginationAtom)
+const sorting = useSelector(sortingAtom)
+const columnFilters = useSelector(columnFiltersAtom)
+const globalFilter = useSelector(globalFilterAtom)
+
+const { data } = useSomeServerFetcher({
+  queryKey: ['rows', pagination, sorting, columnFilters, globalFilter],
+  queryFn: () =>
+    fetchRows({ pagination, sorting, columnFilters, globalFilter }),
+})
+
+const table = useTable({
+  _features,
+  _rowModels: {}, // server owns every stage
+  columns,
+  data: data?.rows ?? EMPTY,
+  rowCount: data?.rowCount,
+  atoms: {
+    pagination: paginationAtom,
+    sorting: sortingAtom,
+    columnFilters: columnFiltersAtom,
+    globalFilter: globalFilterAtom,
+  },
+  manualPagination: true,
+  manualSorting: true,
+  manualFiltering: true,
+})
+```
+
+When `manualFiltering: true`, both `columnFilters` and the global filter are treated as server-owned.
+
+## Common Mistakes
+
+### CRITICAL Setting `manualPagination` without `rowCount`
+
+Wrong:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: response?.rows ?? [],
+  atoms: { pagination: paginationAtom },
+  manualPagination: true,
+  // no rowCount
+})
+table.getPageCount() // Infinity / wrong
+```
+
+Correct:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: response?.rows ?? [],
+  rowCount: response?.rowCount,
+  atoms: { pagination: paginationAtom },
+  manualPagination: true,
+})
+```
+
+Without `rowCount` the table cannot know how many pages exist.
+Source: `examples/preact/with-tanstack-query/src/main.tsx`.
+
+### HIGH Keeping the client-side row model when going manual
+
+Wrong:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: { paginatedRowModel: createPaginatedRowModel() }, // still runs
+  data: server.rows,
+  manualPagination: true,
+})
+```
+
+Correct:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {}, // server owns pagination
+  data: server.rows,
+  rowCount: server.rowCount,
+  manualPagination: true,
+})
+```
+
+With `manualPagination`, the paginated row model has nothing useful to do — drop it. Same for `sortedRowModel` under `manualSorting`, `filteredRowModel` under `manualFiltering`.
+Source: `examples/preact/with-tanstack-query/src/main.tsx`.
+
+### HIGH Forgetting to key the request on the slices the server owns
+
+Wrong:
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['rows'], // never changes
+  queryFn: () => fetchRows(pagination),
+})
+```
+
+Correct:
+
+```tsx
+const { data } = useQuery({
+  queryKey: ['rows', pagination, sorting, columnFilters, globalFilter],
+  queryFn: () =>
+    fetchRows({ pagination, sorting, columnFilters, globalFilter }),
+})
+```
+
+The request must vary by the slice values; otherwise the fetcher cache returns stale data when the user sorts or pages.
+Source: `examples/preact/with-tanstack-query/src/main.tsx`.
+
+### HIGH Page flashes empty between fetches
+
+Wrong: the request resolves to `undefined` while loading, so the table shows zero rows between pages.
+
+Correct: pass a stable `defaultData` and (with @tanstack/preact-query) `placeholderData: keepPreviousData`. The table re-uses the last page's rows during the fetch.
+
+```tsx
+import { keepPreviousData } from '@tanstack/preact-query'
+
+const defaultData = useMemo(() => [], [])
+
+const { data } = useQuery({
+  queryKey: ['rows', pagination],
+  queryFn: () => fetchRows(pagination),
+  placeholderData: keepPreviousData,
+})
+
+const table = useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data: data?.rows ?? defaultData,
+  rowCount: data?.rowCount,
+  atoms: { pagination: paginationAtom },
+  manualPagination: true,
+})
+```
+
+Source: `examples/preact/with-tanstack-query/src/main.tsx`.
+
+### MEDIUM Removing the matching feature from `_features`
+
+Wrong:
+
+```tsx
+const _features = tableFeatures({}) // dropped rowPaginationFeature
+useTable({
+  _features,
+  _rowModels: {},
+  data: server.rows,
+  rowCount: server.rowCount,
+  manualPagination: true,
+})
+table.setPageIndex(0) // type error / no-op
+```
+
+Correct: keep the feature registered. `manualPagination: true` only tells the row-model pipeline to skip slicing — you still want the pagination state slice and `setPageIndex` / `nextPage` APIs.
+
+```tsx
+const _features = tableFeatures({ rowPaginationFeature })
+```
+
+Source: `docs/guide/features.md`.
+
+## See Also
+
+- `tanstack-table/preact/compose-with-tanstack-query` — full @tanstack/preact-query recipe with keepPreviousData and refetch ergonomics.
+- `tanstack-table/preact/table-state` — atoms vs state, table.Subscribe.
+- `tanstack-table/pagination`, `tanstack-table/filtering`, `tanstack-table/sorting` — feature-level state shapes.

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

@@ -0,0 +1,230 @@
+---
+name: preact/compose-with-tanstack-form
+description: >
+  Editable cells with `@tanstack/preact-form`. The table is the layout
+  primitive; the form owns the state. Use `createFormHook` to register
+  reusable field components (`TextField`, `NumberField`, `SelectField`), and
+  in each column's `cell` renderer return the matching field component bound
+  to that row's accessor. Row identity (via `getRowId`) keeps field state
+  stable as rows resort / re-filter. Routing keywords: preact-form, editable
+  cells, inline editing, createFormHook, FieldGroup, getRowId.
+type: composition
+library: tanstack-table
+framework: preact
+library_version: '9.0.0-alpha.47'
+requires:
+  - row-selection
+  - column-definitions
+sources:
+  - TanStack/table:examples/react/with-tanstack-form/
+  - TanStack/table:docs/framework/preact/preact-table.md
+---
+
+This skill is the Preact recipe for editable cells via @tanstack/preact-form. The Preact-Form API mirrors the React-Form API closely; the table half of the recipe is what you'd write in vanilla Preact + Table v9.
+
+> **No dedicated examples/preact/with-tanstack-form yet** — the reference implementation lives under `examples/react/with-tanstack-form/` and ports line-for-line to Preact. The patterns below are the supported integration shape.
+
+## Install
+
+```bash
+npm install @tanstack/preact-form @tanstack/preact-table
+```
+
+Peer dependency: `preact >=10`.
+
+## The Division of Labor
+
+| Concern                                          | Owner              |
+| ------------------------------------------------ | ------------------ |
+| Layout (rows, columns, headers)                  | Table              |
+| Cell rendering API                               | Table              |
+| Sorting / filtering / pagination                 | Table              |
+| Row identity                                     | Table (`getRowId`) |
+| Field state (value, errors, touched, validation) | Form               |
+| Form-level submit handler                        | Form               |
+
+The table never owns cell values for the purposes of editing — it renders fields, the form holds the values, and on submit you read from the form snapshot.
+
+## Pattern — `createFormHook` + field-component cells
+
+Define reusable field components once. Compose them with `createFormHook` to get a typed `useAppForm`. In each editable column's `cell` renderer, plug the field component into `form.AppField` keyed by the row id.
+
+```tsx
+import { createFormHook, createFormHookContexts } from '@tanstack/preact-form'
+
+// Field components (one-off — text input, number input, etc.).
+function TextField({ field }) {
+  return (
+    <input
+      type="text"
+      value={field.state.value as string}
+      onInput={(e) => field.handleChange((e.target as HTMLInputElement).value)}
+      onBlur={field.handleBlur}
+    />
+  )
+}
+
+function NumberField({ field }) {
+  return (
+    <input
+      type="number"
+      value={field.state.value as number}
+      onInput={(e) =>
+        field.handleChange(Number((e.target as HTMLInputElement).value))
+      }
+      onBlur={field.handleBlur}
+    />
+  )
+}
+
+export const { fieldContext, formContext } = createFormHookContexts()
+
+export const { useAppForm } = createFormHook({
+  fieldContext,
+  formContext,
+  fieldComponents: { TextField, NumberField },
+  formComponents: {},
+})
+```
+
+Use the form per-row, keyed by `row.id`. Tables built with `getRowId` keep the same row id across re-sorts and refilters, so the form state stays attached to the same logical row.
+
+```tsx
+import {
+  createColumnHelper,
+  tableFeatures,
+  useTable,
+} from '@tanstack/preact-table'
+import { useAppForm } from './form-hook'
+
+type Person = { id: string; firstName: string; age: number }
+
+const _features = tableFeatures({})
+const columnHelper = createColumnHelper<typeof _features, Person>()
+
+function EditableTable({ data }: { data: Person[] }) {
+  const table = useTable({
+    _features,
+    _rowModels: {},
+    columns: columnHelper.columns([
+      columnHelper.accessor('firstName', {
+        header: 'First Name',
+        cell: ({ row, getValue }) => (
+          <RowFieldCell
+            rowId={row.id}
+            field="firstName"
+            defaultValue={getValue()}
+            kind="text"
+          />
+        ),
+      }),
+      columnHelper.accessor('age', {
+        header: 'Age',
+        cell: ({ row, getValue }) => (
+          <RowFieldCell
+            rowId={row.id}
+            field="age"
+            defaultValue={getValue()}
+            kind="number"
+          />
+        ),
+      }),
+    ]),
+    data,
+    getRowId: (row) => row.id, // CRITICAL — keeps form state attached to a row identity
+  })
+
+  return (
+    <table>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>
+            {row.getAllCells().map((cell) => (
+              <td key={cell.id}>
+                <table.FlexRender cell={cell} />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+// One small form per row.
+function RowFieldCell({
+  rowId,
+  field,
+  defaultValue,
+  kind,
+}: {
+  rowId: string
+  field: string
+  defaultValue: unknown
+  kind: 'text' | 'number'
+}) {
+  const form = useAppForm({
+    defaultValues: { [field]: defaultValue },
+    onSubmit: async ({ value }) => {
+      await saveRow(rowId, value)
+    },
+  })
+
+  return (
+    <form.AppField name={field as never}>
+      {(f) => (kind === 'text' ? <f.TextField /> : <f.NumberField />)}
+    </form.AppField>
+  )
+}
+```
+
+The bulk-edit alternative is a single top-level form with `<form.Field name={\`rows.${row.id}.firstName\`}>` per cell. Either pattern works; pick whichever matches your save shape.
+
+## Common Mistakes
+
+### CRITICAL Forgetting `getRowId`
+
+Wrong:
+
+```tsx
+useTable({ _features, _rowModels: {}, columns, data /* no getRowId */ })
+```
+
+Correct:
+
+```tsx
+useTable({
+  _features,
+  _rowModels: {},
+  columns,
+  data,
+  getRowId: (row) => row.id,
+})
+```
+
+Without `getRowId`, the table assigns positional ids. Sorting or filtering changes row ids, and per-row form state ends up bound to a different logical row.
+Source: `docs/framework/preact/guide/table-state.md`.
+
+### HIGH Storing editable values in the table state instead of the form
+
+Wrong: putting per-cell drafts in `table.atoms` slices, or in `table.options.data`.
+
+Correct: leave the table data immutable; let the form hold the in-flight values. Only update the table data on save (refresh from server or splice in the new row).
+
+### HIGH Re-rendering the entire table on every keystroke
+
+Wrong: the top-level `useTable` selects every form draft state slice.
+
+Correct: form field state is held in the form, not the table. The table re-renders only when actual table state changes. Field re-renders happen inside `<f.Field>` automatically.
+
+### MEDIUM Reimplementing form validation by hand
+
+Wrong: ad hoc `onChange` per field with validation logic in each cell.
+
+Correct: use `@tanstack/preact-form`'s validators (`validators: { onChange: schema }`). The form handles touched / dirty / error state; the table just renders the field.
+
+## See Also
+
+- `tanstack-table/preact/table-state` — Subscribe / atoms / FlexRender.
+- `tanstack-table/row-selection` — combining row selection with bulk edit.
+- `tanstack-table/column-definitions` — column helper with TFeatures.