tanstack-vue-table-skilld

Name: tanstack-vue-table-skilld
Author: skilld-dev

173stars8forks

How to install tanstack-vue-table-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-table-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-table-skilld

Installs into the current project.

Summary

Headless UI for building powerful tables & datagrids for Vue. ALWAYS use when writing code importing \"@tanstack/vue-table\". Consult for debugging, best practices, or modifying @tanstack/vue-table, tanstack/vue-table, tanstack vue-table, tanstack vue table, table.

Files · 1

View on GitHub

SKILL.md

1	# TanStack/table `@tanstack/vue-table@8.21.3`
2	Tags: beta: 8.0.0-beta.9, latest: 8.21.3, alpha: 9.0.0-alpha.33
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `useVueTable` — v8 changed from `useTable`, must be explicitly imported from `@tanstack/vue-table` [source](./references/docs/framework/vue/vue-table.md)
10
11	- BREAKING: `FlexRender` component — v8 replaced `.render()` methods with PascalCase `FlexRender` component in Vue templates [source](./references/docs/framework/vue/vue-table.md)
12
13	- BREAKING: `accessorKey` and `accessorFn` — v8 renamed `accessor` to `accessorKey` (string) or `accessorFn` (function) [source](./references/docs/guide/migrating.md)
14
15	- BREAKING: `header`, `cell`, `footer` — v8 renamed `Header`, `Cell`, `Footer` column properties to lowercase [source](./references/docs/guide/migrating.md)
16
17	- BREAKING: `enable` options — v8 renamed all `disable` options to `enable*` (e.g., `enableSorting`, `enableFiltering`) [source](./references/docs/guide/migrating.md)
18
19	- BREAKING: `getValue()` — v8 changed `value` prop to `getValue()` function in cell/header render contexts for performance [source](./references/docs/guide/migrating.md)
20
21	- DEPRECATED: `getHeaderProps`, `getCellProps`, `getRowProps` — v8 removed automatic prop getters; keys and handlers must be manual [source](./references/docs/guide/migrating.md)
22
23	- NEW: Reactive `data` support — v8.20.0 added support for passing Vue `ref` or `computed` directly to `data` option [source](./references/docs/framework/vue/guide/table-state.md)
24
25	- NEW: `sortUndefined: 'first' \| 'last'` — v8.16.0 added explicit `'first'` and `'last'` string options to `sortUndefined` [source](./references/docs/api/features/sorting.md)
26
27	- NEW: `_features` option — v8.14.0 introduced `_features` for extending table instances with custom logic [source](./references/docs/guide/custom-features.md)
28
29	- NEW: `firstPage()`, `lastPage()` — v8.13.0 added explicit pagination navigation APIs [source](./references/docs/guide/pagination.md)
30
31	- NEW: `rowCount` option — v8.13.0 added `rowCount` to automatically calculate `pageCount` for manual pagination [source](./references/docs/guide/pagination.md)
32
33	- NEW: `rowPinning` — v8.12.0 added row pinning state and `getTopRows()`, `getBottomRows()`, `getCenterRows()` APIs [source](./references/docs/guide/row-pinning.md)
34
35	- BREAKING: `sortingFn` signature — v8 changed to return `number` (-1, 0, 1) and only takes 2 rows plus column ID [source](./references/docs/api/features/sorting.md)
36
37	Also changed: `columnVisibility` state new v8 · `columnPinning` new v8 · `resetPageIndex()` new v8.13.0 · `resetPageSize()` new v8.13.0 · `shallowRef` internally for Vue v8.20.0
38
39	## Best Practices
40
41	- Use `useVueTable` with reactive data directly — pass a `ref` or `computed` to the `data` option to enable automatic table updates without manual triggers [source](./references/docs/framework/vue/guide/table-state.md)
42
43	- Update data by replacing the array `.value` — since `shallowRef` is used internally for performance, the table only reacts to top-level array mutations (e.g., `data.value = [...]`) rather than `push` or `splice` [source](./references/docs/framework/vue/guide/table-state.md)
44
45	- Use `createColumnHelper` for type-safe definitions — provides the highest level of TypeScript inference for accessor, display, and grouping columns [source](./references/docs/guide/column-defs.md)
46
47	```ts
48	const columnHelper = createColumnHelper<Person>()
49	const columns = [
50	columnHelper.accessor('firstName', { cell: info => info.getValue() })
51	]
52	```
53
54	- Prefer `initialState` over `state` for simple defaults — use this when you don't need to control state externally to avoid the overhead of manual synchronization [source](./references/docs/framework/vue/guide/table-state.md)
55
56	- Use getters in `state` for controlled reactivity — when hoisting state into your own refs, wrap them in getters to ensure `useVueTable` correctly tracks reactive changes [source](./references/docs/framework/vue/guide/table-state.md)
57
58	```ts
59	const sorting = ref<SortingState>([])
60	const table = useVueTable({
61	state: {
62	get sorting() { return sorting.value }
63	}
64	})
65	```
66
67	- Use `FlexRender` for all dynamic templates — essential for correctly rendering cell, header, and footer templates (strings, components, or JSX) within the Vue lifecycle [source](./references/docs/framework/vue/vue-table.md)
68
69	- Import only required row models to optimize bundle size — only provide the specifi

People who liked this also viewed

6 picks

Type

tanstack-vue-table-skilld

173stars8forks

View on GitHub

How to install tanstack-vue-table-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-table-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-table-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# TanStack/table `@tanstack/vue-table@8.21.3`
2	Tags: beta: 8.0.0-beta.9, latest: 8.21.3, alpha: 9.0.0-alpha.33
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `useVueTable` — v8 changed from `useTable`, must be explicitly imported from `@tanstack/vue-table` [source](./references/docs/framework/vue/vue-table.md)
10
11	- BREAKING: `FlexRender` component — v8 replaced `.render()` methods with PascalCase `FlexRender` component in Vue templates [source](./references/docs/framework/vue/vue-table.md)
12
13	- BREAKING: `accessorKey` and `accessorFn` — v8 renamed `accessor` to `accessorKey` (string) or `accessorFn` (function) [source](./references/docs/guide/migrating.md)
14
15	- BREAKING: `header`, `cell`, `footer` — v8 renamed `Header`, `Cell`, `Footer` column properties to lowercase [source](./references/docs/guide/migrating.md)
16
17	- BREAKING: `enable` options — v8 renamed all `disable` options to `enable*` (e.g., `enableSorting`, `enableFiltering`) [source](./references/docs/guide/migrating.md)
18
19	- BREAKING: `getValue()` — v8 changed `value` prop to `getValue()` function in cell/header render contexts for performance [source](./references/docs/guide/migrating.md)
20
21	- DEPRECATED: `getHeaderProps`, `getCellProps`, `getRowProps` — v8 removed automatic prop getters; keys and handlers must be manual [source](./references/docs/guide/migrating.md)
22
23	- NEW: Reactive `data` support — v8.20.0 added support for passing Vue `ref` or `computed` directly to `data` option [source](./references/docs/framework/vue/guide/table-state.md)
24
25	- NEW: `sortUndefined: 'first' \| 'last'` — v8.16.0 added explicit `'first'` and `'last'` string options to `sortUndefined` [source](./references/docs/api/features/sorting.md)
26
27	- NEW: `_features` option — v8.14.0 introduced `_features` for extending table instances with custom logic [source](./references/docs/guide/custom-features.md)
28
29	- NEW: `firstPage()`, `lastPage()` — v8.13.0 added explicit pagination navigation APIs [source](./references/docs/guide/pagination.md)
30
31	- NEW: `rowCount` option — v8.13.0 added `rowCount` to automatically calculate `pageCount` for manual pagination [source](./references/docs/guide/pagination.md)
32
33	- NEW: `rowPinning` — v8.12.0 added row pinning state and `getTopRows()`, `getBottomRows()`, `getCenterRows()` APIs [source](./references/docs/guide/row-pinning.md)
34
35	- BREAKING: `sortingFn` signature — v8 changed to return `number` (-1, 0, 1) and only takes 2 rows plus column ID [source](./references/docs/api/features/sorting.md)
36
37	Also changed: `columnVisibility` state new v8 · `columnPinning` new v8 · `resetPageIndex()` new v8.13.0 · `resetPageSize()` new v8.13.0 · `shallowRef` internally for Vue v8.20.0
38
39	## Best Practices
40
41	- Use `useVueTable` with reactive data directly — pass a `ref` or `computed` to the `data` option to enable automatic table updates without manual triggers [source](./references/docs/framework/vue/guide/table-state.md)
42
43	- Update data by replacing the array `.value` — since `shallowRef` is used internally for performance, the table only reacts to top-level array mutations (e.g., `data.value = [...]`) rather than `push` or `splice` [source](./references/docs/framework/vue/guide/table-state.md)
44
45	- Use `createColumnHelper` for type-safe definitions — provides the highest level of TypeScript inference for accessor, display, and grouping columns [source](./references/docs/guide/column-defs.md)
46
47	```ts
48	const columnHelper = createColumnHelper<Person>()
49	const columns = [
50	columnHelper.accessor('firstName', { cell: info => info.getValue() })
51	]
52	```
53
54	- Prefer `initialState` over `state` for simple defaults — use this when you don't need to control state externally to avoid the overhead of manual synchronization [source](./references/docs/framework/vue/guide/table-state.md)
55
56	- Use getters in `state` for controlled reactivity — when hoisting state into your own refs, wrap them in getters to ensure `useVueTable` correctly tracks reactive changes [source](./references/docs/framework/vue/guide/table-state.md)
57
58	```ts
59	const sorting = ref<SortingState>([])
60	const table = useVueTable({
61	state: {
62	get sorting() { return sorting.value }
63	}
64	})
65	```
66
67	- Use `FlexRender` for all dynamic templates — essential for correctly rendering cell, header, and footer templates (strings, components, or JSX) within the Vue lifecycle [source](./references/docs/framework/vue/vue-table.md)
68
69	- Import only required row models to optimize bundle size — only provide the specifi

People who liked this also viewed

6 picks

Type