@tanstack/vue-table 9.0.0-beta.65 → 9.0.0-beta.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/createTableHook.d.ts +1 -7
- package/dist/createTableHook.js +2 -1
- package/dist/useTable.d.ts +1 -2
- package/dist/useTable.js +3 -2
- package/package.json +5 -5
- package/skills/create-table-hook/SKILL.md +1 -1
- package/skills/getting-started/SKILL.md +1 -1
- package/skills/migrate-v8-to-v9/SKILL.md +2 -2
- package/skills/table-state/SKILL.md +1 -1
- package/skills/with-tanstack-query/SKILL.md +1 -1
- package/skills/with-tanstack-virtual/SKILL.md +1 -1
package/README.md
CHANGED
|
@@ -35,6 +35,8 @@
|
|
|
35
35
|
>
|
|
36
36
|
> - [Angular Table](https://tanstack.com/table/alpha/docs/framework/angular/angular-table)
|
|
37
37
|
> - [Lit Table](https://tanstack.com/table/alpha/docs/framework/lit/lit-table)
|
|
38
|
+
> - [Octane Table](https://tanstack.com/table/beta/docs/framework/octane/quick-start)
|
|
39
|
+
> - [Preact Table](https://tanstack.com/table/beta/docs/framework/preact/quick-start)
|
|
38
40
|
> - [React Table](https://tanstack.com/table/alpha/docs/framework/react/react-table)
|
|
39
41
|
> - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
|
|
40
42
|
> - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
|
|
@@ -44,7 +46,7 @@
|
|
|
44
46
|
|
|
45
47
|
A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
|
|
46
48
|
|
|
47
|
-
- Framework
|
|
49
|
+
- Framework-agnostic core with bindings for React, Preact, Octane, Vue, Solid, Svelte, Angular, Ember, Lit, and Alpine
|
|
48
50
|
- 100% customizable — bring your own UI, components, and styles
|
|
49
51
|
- Sorting, filtering, grouping, aggregation & row selection
|
|
50
52
|
- Lightweight, virtualizable & server‑side friendly
|
|
@@ -2,7 +2,6 @@ import { FlexRenderCell, FlexRenderHeader } from "./FlexRender.js";
|
|
|
2
2
|
import { TableOptionsWithReactiveData, VueTable } from "./useTable.js";
|
|
3
3
|
import { Component, PropType } from "vue";
|
|
4
4
|
import { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures } from "@tanstack/table-core";
|
|
5
|
-
|
|
6
5
|
//#region src/createTableHook.d.ts
|
|
7
6
|
type ComponentType<T extends Record<string, any>> = Component<T>;
|
|
8
7
|
type AppCellContext<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData, TCellComponents extends Record<string, ComponentType<any>>> = {
|
|
@@ -151,11 +150,6 @@ declare const AppFlexRender: import("vue").DefineComponent<import("vue").Extract
|
|
|
151
150
|
* })
|
|
152
151
|
* ```
|
|
153
152
|
*/
|
|
154
|
-
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>>>({
|
|
155
|
-
tableComponents,
|
|
156
|
-
cellComponents,
|
|
157
|
-
headerComponents,
|
|
158
|
-
...defaultTableOptions
|
|
159
|
-
}: CreateTableHookOptions<TFeatures, TTableComponents, TCellComponents, THeaderComponents>): CreateTableHookResult<TFeatures, TTableComponents, TCellComponents, THeaderComponents>;
|
|
153
|
+
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>;
|
|
160
154
|
//#endregion
|
|
161
155
|
export { AppCellContext, AppCellProps, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppFlexRender, AppGroupColumnDef, AppHeaderContext, AppHeaderProps, AppTableProps, AppVueTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, createTableHook };
|
package/dist/createTableHook.js
CHANGED
|
@@ -91,7 +91,8 @@ function createTableHook({ tableComponents, cellComponents, headerComponents, ..
|
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
function useAppTable(tableOptions) {
|
|
94
|
-
const
|
|
94
|
+
const mergedOptions = mergeProxy(defaultTableOptions, tableOptions);
|
|
95
|
+
const table = useTable(mergedOptions);
|
|
95
96
|
const AppTable = defineComponent({
|
|
96
97
|
name: "AppTable",
|
|
97
98
|
setup(_, { slots }) {
|
package/dist/useTable.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { MaybeRef, VNode } from "vue";
|
|
2
2
|
import { RowData, Table, TableFeatures, TableOptions } from "@tanstack/table-core";
|
|
3
|
-
|
|
4
3
|
//#region src/useTable.d.ts
|
|
5
|
-
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]
|
|
4
|
+
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]>; };
|
|
6
5
|
type VueTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData> & {
|
|
7
6
|
/** Creates a reactive render boundary. The child function reads the table
|
|
8
7
|
* atoms it needs, so Vue only tracks those atom reads.
|
package/dist/useTable.js
CHANGED
|
@@ -40,9 +40,10 @@ function useTable(tableOptions) {
|
|
|
40
40
|
coreReactivityFeature: reactivity,
|
|
41
41
|
...unref(tableOptions.features) ?? {}
|
|
42
42
|
} });
|
|
43
|
-
const
|
|
43
|
+
const resolvedOptions = mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
44
44
|
return flatMerge(defaultOptions, newOptions);
|
|
45
|
-
} })
|
|
45
|
+
} });
|
|
46
|
+
const coreTable = constructTable(resolvedOptions);
|
|
46
47
|
const table = coreTable;
|
|
47
48
|
if (getCurrentScope()) onScopeDispose(() => reactivity.unmount?.());
|
|
48
49
|
watch(() => getReactiveOptionDeps(mergedOptions), () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-table",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.68",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Vue.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@tanstack/store": "^0.11.0",
|
|
43
|
-
"@tanstack/table-core": "9.0.0-beta.
|
|
43
|
+
"@tanstack/table-core": "9.0.0-beta.68"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@testing-library/vue": "^8.1.0",
|
|
47
|
-
"@vitejs/plugin-vue": "^6.0.
|
|
48
|
-
"eslint-plugin-vue": "^10.
|
|
49
|
-
"vue": "^3.5.
|
|
47
|
+
"@vitejs/plugin-vue": "^6.0.8",
|
|
48
|
+
"eslint-plugin-vue": "^10.10.0",
|
|
49
|
+
"vue": "^3.5.40"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"vue": ">=3.2"
|
|
@@ -6,7 +6,7 @@ metadata:
|
|
|
6
6
|
type: lifecycle
|
|
7
7
|
library: '@tanstack/vue-table'
|
|
8
8
|
framework: vue
|
|
9
|
-
library_version: '9.0.0-beta.
|
|
9
|
+
library_version: '9.0.0-beta.68'
|
|
10
10
|
requires:
|
|
11
11
|
- '@tanstack/table-core#migrate-v8-to-v9'
|
|
12
12
|
- getting-started
|
|
@@ -51,7 +51,7 @@ const table = useTable({ features, columns, data })
|
|
|
51
51
|
| `filterFns` / `aggregationFns` table options | Same-named feature slots |
|
|
52
52
|
| Top-level `onStateChange` | Per-slice callbacks, external atoms, or store subscription |
|
|
53
53
|
|
|
54
|
-
Available feature imports are `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `rowAggregationFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put every feature before its dependent slot in the same `tableFeatures` call. Aggregation is independent from grouping: register `rowAggregationFeature` for aggregation APIs and add `columnGroupingFeature` only for grouped rows.
|
|
54
|
+
Available feature imports are `cellSelectionFeature`, `columnFilteringFeature`, `globalFilteringFeature`, `rowSortingFeature`, `rowPaginationFeature`, `rowSelectionFeature`, `rowExpandingFeature`, `rowPinningFeature`, `columnPinningFeature`, `columnVisibilityFeature`, `columnOrderingFeature`, `columnSizingFeature`, `columnResizingFeature`, `rowAggregationFeature`, `columnGroupingFeature`, and `columnFacetingFeature`. APIs are feature-gated. Put every feature before its dependent slot in the same `tableFeatures` call. Aggregation is independent from grouping: register `rowAggregationFeature` for aggregation APIs and add `columnGroupingFeature` only for grouped rows.
|
|
55
55
|
|
|
56
56
|
### Row-model mapping
|
|
57
57
|
|