@tanstack/vue-table 9.0.0-beta.6 → 9.0.0-beta.62

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

@@ -1,375 +0,0 @@
----
-name: vue/migrate-v8-to-v9
-description: >
-  Mechanical breaking-change migration from `@tanstack/vue-table` v8 to v9. Rename `useVueTable`
-  → `useTable`, move `getCoreRowModel`/`getSortedRowModel`/etc. options into `rowModels`
-  factories, add the mandatory `features` via `tableFeatures({...})`, update
-  `createColumnHelper<TData>()` → `createColumnHelper<typeof features, TData>()`, rename
-  `sortingFn`/`sortingFns` → `sortFn`/`sortFns`, swap `table.getState()` for `table.state`
-  / `table.state` / `table.atoms.<slice>.get()`, and prefer `<FlexRender :cell="cell" />` over the
-  legacy `:render`/`:props` shape. Vue has NO `/legacy` entrypoint — migration is a direct
-  rewrite. The Vue adapter installs `vueReactivity()` automatically.
-type: lifecycle
-library: tanstack-table
-framework: vue
-library_version: '9.0.0-alpha.48'
-requires:
-  - setup
-  - state-management
-  - column-definitions
-sources:
-  - docs/framework/vue/guide/migrating.md
-  - docs/framework/vue/vue-table.md
-  - docs/framework/vue/guide/table-state.md
-  - packages/vue-table/src/useTable.ts
-  - packages/vue-table/src/FlexRender.ts
----
-
-# Migrate @tanstack/vue-table v8 → v9
-
-## Dependencies
-
-```bash
-pnpm add @tanstack/vue-table@latest
-# Optional, for external atoms during/after migration:
-pnpm add @tanstack/vue-store
-```
-
-**Vue has no `/legacy` entrypoint.** The `useLegacyTable` React shim is React-only — Vue
-projects rewrite each table directly. The good news: most call sites are mechanical renames.
-
-## Setup — the v8 vs v9 shape side-by-side
-
-### v8 (before)
-
-```vue
-<script setup lang="ts">
-import {
-  FlexRender,
-  createColumnHelper,
-  getCoreRowModel,
-  getSortedRowModel,
-  getPaginationRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import type { ColumnDef } from '@tanstack/vue-table'
-
-const columnHelper = createColumnHelper<Person>()
-const columns: ColumnDef<Person, any>[] = [
-  columnHelper.accessor('age', { header: 'Age', sortingFn: 'alphanumeric' }),
-]
-
-const table = useVueTable({
-  columns,
-  data,
-  getCoreRowModel: getCoreRowModel(),
-  getSortedRowModel: getSortedRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
-})
-</script>
-
-<template>
-  <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-</template>
-```
-
-### v9 (after)
-
-```vue
-<script setup lang="ts">
-import {
-  FlexRender,
-  createColumnHelper,
-  createPaginatedRowModel,
-  createSortedRowModel,
-  rowPaginationFeature,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-  useTable,
-} from '@tanstack/vue-table'
-
-const features = tableFeatures({ rowSortingFeature, rowPaginationFeature })
-const columnHelper = createColumnHelper<typeof features, Person>()
-const columns = columnHelper.columns([
-  columnHelper.accessor('age', { header: 'Age', sortFn: 'alphanumeric' }), // sortingFn → sortFn
-])
-
-const table = useTable({
-  features,
-  rowModels: {
-    sortedRowModel: createSortedRowModel(sortFns),
-    paginatedRowModel: createPaginatedRowModel(),
-  },
-  columns,
-  data,
-})
-</script>
-
-<template>
-  <!-- Preferred shorthand. Legacy :render / :props still compiles. -->
-  <FlexRender :cell="cell" />
-</template>
-```
-
-## Rename Cheat-Sheet
-
-| v8                                                                                        | v9                                                                                    |
-| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `useVueTable(opts)`                                                                       | `useTable(opts, selector?)`                                                           |
-| `getCoreRowModel: getCoreRowModel()`                                                      | implicit; not an option                                                               |
-| `getSortedRowModel: getSortedRowModel()`                                                  | `rowModels: { sortedRowModel: createSortedRowModel(sortFns) }`                        |
-| `getFilteredRowModel: getFilteredRowModel()`                                              | `rowModels: { filteredRowModel: createFilteredRowModel(filterFns) }`                  |
-| `getPaginationRowModel: getPaginationRowModel()`                                          | `rowModels: { paginatedRowModel: createPaginatedRowModel() }`                         |
-| `getGroupedRowModel: getGroupedRowModel()`                                                | `rowModels: { groupedRowModel: createGroupedRowModel(aggregationFns) }`               |
-| `createColumnHelper<TData>()`                                                             | `createColumnHelper<typeof features, TData>()`                                        |
-| `ColumnDef<TData, TValue>`                                                                | `ColumnDef<TFeatures, TData, TValue>`                                                 |
-| `Column<TData, TValue>` / `Row<TData>` / `Cell<TData, TValue>`                            | `…<TFeatures, TData, TValue>`                                                         |
-| `sortingFn` (column def)                                                                  | `sortFn`                                                                              |
-| `sortingFns`                                                                              | `sortFns`                                                                             |
-| `getSortingFn()` / `getAutoSortingFn()`                                                   | `getSortFn()` / `getAutoSortFn()`                                                     |
-| `SortingFn` / `SortingFns` types                                                          | `SortFn` / `SortFns`                                                                  |
-| `enablePinning: true`                                                                     | `enableColumnPinning` and/or `enableRowPinning`                                       |
-| `state.columnSizingInfo`                                                                  | `state.columnResizing`                                                                |
-| `onColumnSizingInfoChange`                                                                | `onColumnResizingChange`                                                              |
-| `ColumnSizing` feature                                                                    | `columnSizingFeature` + `columnResizingFeature` (split)                               |
-| `table.getState()`                                                                        | `table.state` (full) / `table.state` (selector) / `table.atoms.<slice>.get()`         |
-| `row._getAllCellsByColumnId()`                                                            | `row.getAllCellsByColumnId()` (underscore removed)                                    |
-| `table._getFacetedRowModel()` / `_getFacetedMinMaxValues()` / `_getFacetedUniqueValues()` | Same names without leading underscore                                                 |
-| `<FlexRender :render="…" :props="…" />`                                                   | `<FlexRender :cell="cell" />` / `:header` / `:footer` (preferred; legacy still works) |
-
-Source: `docs/framework/vue/guide/migrating.md`, `docs/framework/react/guide/migrating.md` (the
-non-Vue-specific renames are shared across adapters).
-
-## Core Patterns
-
-### 1. Convert `getXRowModel` options to `rowModels` factories
-
-Every row-model factory now requires its `*Fns` parameter — this is what makes the registries
-tree-shakeable in v9.
-
-```ts
-rowModels: {
-  sortedRowModel:    createSortedRowModel(sortFns),
-  filteredRowModel:  createFilteredRowModel(filterFns),
-  paginatedRowModel: createPaginatedRowModel(),
-  groupedRowModel:   createGroupedRowModel(aggregationFns),
-  expandedRowModel:  createExpandedRowModel(),
-}
-```
-
-The `*Fns` registries are open-ended; do not cite a number of built-in fns.
-
-### 2. Add `tableFeatures` and register every feature you use
-
-If a feature isn't in `features`, its API isn't on the table (TS error AND runtime
-`undefined`). This is v9's biggest behavioral change.
-
-```ts
-import {
-  columnFilteringFeature,
-  rowPaginationFeature,
-  rowSortingFeature,
-  rowSelectionFeature,
-  tableFeatures,
-} from '@tanstack/vue-table'
-
-const features = tableFeatures({
-  rowSortingFeature,
-  rowPaginationFeature,
-  columnFilteringFeature,
-  rowSelectionFeature,
-})
-```
-
-For a quick migration that doesn't audit usage, `stockFeatures` is the "everything" escape
-hatch — but it forfeits the bundle benefit. Prefer explicit registration.
-
-### 3. Move state reads off `table.getState()`
-
-```ts
-// v8
-const sorting = table.getState().sorting
-
-// v9 — pick the narrowest read.
-const sorting = table.atoms.sorting.get() // narrowest, no full state object built
-const snapshot = table.state // full readonly view
-const table = useTable(opts, (s) => ({ sorting: s.sorting })) // selected reactive state
-table.state.sorting // typed selector output
-```
-
-For Vue reactivity, wrap an atom read in `computed`:
-
-```ts
-const sorting = computed(() => table.atoms.sorting.get())
-```
-
-### 4. v8 controlled state still works — just use getters
-
-v8 controlled state via `state` + `on[State]Change` is preserved in v9 for migration paths.
-The Vue-specific rule is that each `state.<slice>` must be a **getter** so Vue tracks `.value`.
-
-```ts
-const sorting = ref<SortingState>([])
-
-const table = useTable({
-  features,
-  rowModels: { sortedRowModel: createSortedRowModel(sortFns) },
-  columns,
-  data,
-  state: {
-    get sorting() {
-      return sorting.value
-    }, // ← getter, not raw ref
-  },
-  onSortingChange: (u) => {
-    sorting.value = typeof u === 'function' ? u(sorting.value) : u
-  },
-})
-```
-
-For new code, prefer `atoms: { sorting: sortingAtom }` from `@tanstack/vue-store` — no
-`on[State]Change` plumbing required. See `tanstack-table/vue/compose-with-tanstack-store`.
-
-### 5. Update `<FlexRender>` shape
-
-```vue
-<!-- v8 (still works in v9, but verbose) -->
-<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-
-<!-- v9 preferred -->
-<FlexRender :cell="cell" />
-<FlexRender :header="header" />
-<FlexRender :footer="header" />
-```
-
-Source: `packages/vue-table/src/FlexRender.ts`.
-
-## Common Mistakes
-
-### Importing `useVueTable` (CRITICAL)
-
-```ts
-// ❌
-import { useVueTable } from '@tanstack/vue-table'
-
-// ✅
-import { useTable } from '@tanstack/vue-table'
-```
-
-`useVueTable` is not exported. Migration is a rename.
-
-### Trying to use `useLegacyTable` in Vue (CRITICAL)
-
-`useLegacyTable` is a React-only shim from `@tanstack/react-table/legacy`. There is no Vue
-equivalent. If you have many tables to convert, do them one file at a time — the renames are
-mechanical.
-
-### Passing `getCoreRowModel: getCoreRowModel()` as an option (CRITICAL)
-
-```ts
-// ❌ v8 muscle memory.
-const table = useTable({
-  features,
-  columns,
-  data,
-  getCoreRowModel: getCoreRowModel(),
-})
-
-// ✅ Core row model is implicit. `rowModels: {}` is fine.
-const table = useTable({ features, rowModels: {}, columns, data })
-```
-
-### Forgetting `features` (CRITICAL)
-
-`features` is required even for a no-features migration. Pass `tableFeatures({})` for empty,
-or list everything you use. Without it: `'features' is missing in type`.
-
-### Wrong `createColumnHelper` generic arity (CRITICAL)
-
-```ts
-// ❌ v8
-const columnHelper = createColumnHelper<Person>()
-
-// ✅ v9
-const columnHelper = createColumnHelper<typeof features, Person>()
-```
-
-Same applies to type annotations: `ColumnDef<typeof features, Person>`,
-`Row<typeof features, Person>`, `Cell<typeof features, Person, unknown>`.
-
-### Forgetting to pass `sortFns` / `filterFns` to row-model factories (CRITICAL)
-
-```ts
-// ❌ Runtime: no sort fns registered, sort is a no-op.
-sortedRowModel: createSortedRowModel()
-
-// ✅
-sortedRowModel: createSortedRowModel(sortFns)
-```
-
-### Missed `sortingFn` → `sortFn` rename (HIGH)
-
-```ts
-// ❌ v8 name on a column def. TypeScript will complain.
-columnHelper.accessor('age', { header: 'Age', sortingFn: 'alphanumeric' })
-
-// ✅
-columnHelper.accessor('age', { header: 'Age', sortFn: 'alphanumeric' })
-```
-
-### `enablePinning: true` (HIGH)
-
-Split in v9 — pick one or both:
-
-```ts
-useTable({
-  // ...
-  enableColumnPinning: true,
-  enableRowPinning: true,
-})
-```
-
-### Reading `table.getState()` everywhere (HIGH)
-
-The method was removed. Replace each call site explicitly — the right substitute depends on
-the read pattern (see "Move state reads off `table.getState()`" above).
-
-### Underscore-prefixed APIs (HIGH)
-
-```ts
-row._getAllCellsByColumnId() // ❌
-row.getAllCellsByColumnId() // ✅
-
-table._getFacetedRowModel() // ❌
-table.getFacetedRowModel() // ✅
-```
-
-Drop the underscore on every former internal API.
-
-### Bundling `stockFeatures` and calling it done (HIGH)
-
-`stockFeatures` is the "ship everything" escape hatch — useful during the rename pass to keep
-things compiling, but if you don't go back and replace it with an explicit `tableFeatures({...})`
-that lists only what you actually render, you forfeit v9's tree-shaking — which is one of the
-main reasons to migrate.
-
-### Hallucinating pre-v9 names (CRITICAL — top AI tell)
-
-`useTable` from `react-table` v7, `useVueTable` from v8, `getCoreRowModel()` as an option,
-single-generic `createColumnHelper<TData>()`, `sortingFn`, `enablePinning`, `table.getState()` —
-all v7/v8 shapes. None of them compile in v9.
-
-### Reimplementing what built-in APIs already provide (CRITICAL — #1 AI tell)
-
-Migration is a great time to delete hand-rolled sort/filter/select state machines and route
-through `table.setSorting`, `table.setColumnFilters`, `row.toggleSelected`, `table.nextPage`,
-etc.
-
-## See Also
-
-- `tanstack-table/vue/getting-started` — the v9 minimum-viable shape
-- `tanstack-table/vue/table-state` — reactivity model + reading state
-- `tanstack-table/vue/production-readiness` — finish the migration with bundle + identity audits
-- `tanstack-table/table-core/setup` — `features` / `rowModels` deep dive
-- `tanstack-table/table-core/column-definitions` — column helper + generics

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

@@ -1,271 +0,0 @@
----
-name: vue/production-readiness
-description: >
-  Ship-ready optimizations for `@tanstack/vue-table` v9. Tree-shake by listing ONLY the
-  `features` you actually render — never default to `stockFeatures`. Keep `features`,
-  `rowModels`, `columnHelper`, and `columns` at module scope for stable identity (Vue
-  re-evaluates the `<script setup>` block per component instance — declare these outside or in
-  a const). Use the `useTable(opts, selector)` second argument or per-slice `computed(() =>
-  table.atoms.<slice>.get())` / `useSelector(table.atoms.<slice>)` from `@tanstack/vue-store`
-  to narrow re-renders. Vue's reactivity already evaluates only dirty computed deps, so
-  `table.Subscribe` is NOT the React-Compiler workaround it is in React — reach for
-  fine-grained reads (`computed`, `useSelector`) first.
-type: lifecycle
-library: tanstack-table
-framework: vue
-library_version: '9.0.0-alpha.48'
-requires:
-  - setup
-  - state-management
-  - vue/table-state
-sources:
-  - docs/guide/features.md
-  - docs/framework/vue/guide/table-state.md
-  - packages/vue-table/src/useTable.ts
-  - packages/vue-table/src/reactivity.ts
----
-
-# Production Readiness (Vue)
-
-## Dependencies
-
-```bash
-pnpm add @tanstack/vue-table @tanstack/vue-store
-```
-
-`@tanstack/vue-store` is required if you want to use `useSelector` for per-slice atom
-subscriptions outside the table.
-
-## Setup — the production-ready shape
-
-```ts
-// table-setup.ts — module scope, stable identity for everyone.
-import {
-  createPaginatedRowModel,
-  createSortedRowModel,
-  rowPaginationFeature,
-  rowSortingFeature,
-  sortFns,
-  tableFeatures,
-} from '@tanstack/vue-table'
-
-export const features = tableFeatures({
-  rowSortingFeature,
-  rowPaginationFeature,
-})
-
-export const rowModels = {
-  sortedRowModel: createSortedRowModel(sortFns),
-  paginatedRowModel: createPaginatedRowModel(),
-}
-```
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useTable } from '@tanstack/vue-table'
-import { features, rowModels } from './table-setup'
-import { columns } from './columns'
-
-const props = defineProps<{ data: Person[] }>()
-const data = ref(props.data)
-
-// Narrow selector — table.state only carries what we actually render at this level.
-const table = useTable({ features, rowModels, columns, data }, (state) => ({
-  pagination: state.pagination,
-  sorting: state.sorting,
-}))
-</script>
-```
-
-## Core Patterns
-
-### 1. Tree-shake by listing only the features you render
-
-```ts
-// ❌ Ships filtering, faceting, grouping, pinning, expanding, sizing, resizing,
-//   visibility, ordering, row-selection, row-pinning code you don't use.
-const features = tableFeatures(stockFeatures)
-
-// ✅ A sort-only table ships ~6–7 kb of feature code instead of ~15–20 kb.
-const features = tableFeatures({ rowSortingFeature })
-```
-
-`stockFeatures` exists for migrations and prototyping. Audit before shipping — if a feature
-isn't wired into a column def or UI handler, drop it. v9 is tree-shakeable specifically so you
-only pay for what you use.
-
-### 2. Module-scope `features` / `rowModels` / `columnHelper` / `columns`
-
-```ts
-// ❌ Inside <script setup> — every component instance creates new identities, which churns
-//    the table's option-watcher and triggers a `setOptions` on every reactive tick.
-const features = tableFeatures({ rowSortingFeature })
-const columnHelper = createColumnHelper<typeof features, Person>()
-const columns = columnHelper.columns([
-  /* ... */
-])
-```
-
-```ts
-// ✅ Module scope — one identity, shared across instances, GC-friendly.
-const features = tableFeatures({ rowSortingFeature })
-const columnHelper = createColumnHelper<typeof features, Person>()
-export const columns = columnHelper.columns([
-  /* ... */
-])
-```
-
-`data` is the exception: a stable `ref` is fine — the adapter watches `.value`. Just don't
-write `data: ref([...])` inline in the table options (a fresh ref each render).
-
-### 3. Narrow the `useTable` selector
-
-```ts
-// ❌ Default selector — table.state contains every registered slice; any state change re-renders
-//    every consumer of table.state.
-const table = useTable({ features, rowModels, columns, data })
-
-// ✅ Project only what THIS component renders. Other slices still drive table internals; you
-//    just don't subscribe to them at the component level.
-const table = useTable({ features, rowModels, columns, data }, (state) => ({
-  pagination: state.pagination,
-  sorting: state.sorting,
-}))
-```
-
-The selector is a TanStack Store selector — its compare is shallow by default, so identity
-stable returns avoid re-evaluation.
-
-### 4. Per-slice subscriptions for nested components
-
-When only a leaf component cares about one slice, subscribe to the atom directly. This is
-narrower than `useTable`'s selector (which still touches the full store).
-
-```vue
-<!-- SelectedCount.vue -->
-<script setup lang="ts">
-import { useSelector } from '@tanstack/vue-store'
-import type { TableProp } from './types'
-
-const props = defineProps<TableProp>()
-// Re-renders only when rowSelection changes.
-const selection = useSelector(props.table.atoms.rowSelection)
-</script>
-
-<template>
-  <span>{{ Object.keys(selection).length }} selected</span>
-</template>
-```
-
-Or with `computed` (no `vue-store` peer required, but only reactive in a Vue scope):
-
-```ts
-const selectedCount = computed(
-  () => Object.keys(table.atoms.rowSelection.get()).length,
-)
-```
-
-### 5. Vue does NOT need `table.Subscribe` the way React does
-
-`table.Subscribe` is a render-prop component primarily useful in React when the React Compiler
-can't see through the table closure. Vue's reactivity already re-evaluates dependent reads
-automatically — `computed`, `useSelector`, and the `useTable` selector cover the same ground
-with less indirection.
-
-Use `table.Subscribe` only for cross-store source subscription (`<table.Subscribe :source="..."
-:selector="..."`) — and even then, `useSelector(source, selector)` is usually cleaner.
-
-### 6. Stress patterns
-
-- **Virtualize rows / columns** — pair with `@tanstack/vue-virtual`. Keep `useVirtualizer` in
-  the deepest possible component (`TableBody`, not `App`) so unrelated state changes don't
-  re-run it. See `tanstack-table/vue/compose-with-tanstack-virtual`.
-- **Debounce filter / resize writes** — see `tanstack-table/vue/compose-with-tanstack-pacer`.
-- **Hoist heavy column defs out of `<script setup>`** — into a `columns.ts` module.
-
-## Common Mistakes
-
-### Using `stockFeatures` in production without auditing (HIGH)
-
-Defeats the entire reason v9 is tree-shakeable. Replace with an explicit
-`tableFeatures({...})` listing only the features your UI renders.
-
-### Re-declaring `features` / `rowModels` / `columns` inside `<script setup>` (HIGH)
-
-Vue runs `<script setup>` once per component instance, but that's still per-page-navigation in
-SPAs and per-instance in any reusable component. Module scope is cheapest and shared.
-
-### Inline `data: ref([])` or `data: computed(() => something ?? [])` in options (MEDIUM)
-
-The `?? []` pattern creates a fresh array identity on every recompute. Either:
-
-```ts
-// ✅ stable empty array
-const EMPTY: Person[] = []
-const data = computed(() => dataQuery.data.value?.rows ?? EMPTY)
-
-// ✅ or hold a ref that's only updated on real data changes
-const data = ref<Person[]>([])
-watchEffect(() => {
-  const next = dataQuery.data.value?.rows
-  if (next && next !== data.value) data.value = next
-})
-```
-
-### Leaving the default selector when only one slice is rendered (MEDIUM)
-
-```ts
-// ❌ Whole table re-evaluates table.state on every keystroke in a column filter.
-const table = useTable({ features, rowModels, columns, data })
-
-// ✅
-const table = useTable(opts, (s) => ({ pagination: s.pagination }))
-```
-
-### Premature `table.Subscribe` everywhere (MEDIUM)
-
-For a 50-row table, wrapping every header in `<table.Subscribe>` adds complexity without
-measurable benefit. Vue's default reactivity is already fine-grained — reach for `Subscribe` /
-selectors only when you've measured a hotspot.
-
-Maintainer guidance: advanced state-management patterns are for advanced cases.
-
-### Reading `table.state` in a deep component when only that component cares (MEDIUM)
-
-If only `SelectedCount.vue` cares about `rowSelection`, prefer
-`useSelector(table.atoms.rowSelection)` over reading `table.state.rowSelection` at a parent
-and prop-drilling.
-
-### Hoisting `useTable` above a virtualizer (HIGH)
-
-If a parent component reads `table.state` reactively, every state change re-renders the
-parent, which re-runs `useVirtualizer` and blows away scroll position. Keep
-`useVirtualizer` inside the leaf component that needs it; pass `table` (which is stable) as a
-prop. See `tanstack-table/vue/compose-with-tanstack-virtual`.
-
-### Hallucinating pre-v9 API names (CRITICAL)
-
-`stockFeatures` exists in v9; `useVueTable` does not; `getCoreRowModel()` is not a valid
-option in v9. If you're optimizing v8 code, you're optimizing the wrong codebase — see
-`tanstack-table/vue/migrate-v8-to-v9` first.
-
-### "API missing" because feature not registered (CRITICAL — v9-specific)
-
-You can't tree-shake a feature you never added. If `table.setSorting` is `undefined`, the
-solution isn't a workaround — it's `tableFeatures({ rowSortingFeature })`. Optimization
-follows correctness.
-
-### Reimplementing built-in transitions (CRITICAL — #1 AI tell)
-
-`table.setSorting`, `row.toggleSelected`, `table.nextPage`, `column.setFilterValue` — all
-exist for nearly every state transition. Hand-rolled state machines are slower (skip
-internal invariants) and harder to maintain (reset APIs, multi-sort, etc. don't apply).
-
-## See Also
-
-- `tanstack-table/vue/table-state` — selector, atoms, FlexRender deep dive
-- `tanstack-table/vue/getting-started` — the simple shape you're now optimizing
-- `tanstack-table/vue/compose-with-tanstack-virtual` — virtualization for stress cases
-- `tanstack-table/vue/compose-with-tanstack-pacer` — debounce filter / throttle resize writes
-- `tanstack-table/vue/compose-with-tanstack-store` — external atoms in depth