@tanstack/svelte-table 9.0.0-beta.7 → 9.0.0-beta.70
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 +5 -1
- package/dist/FlexRender.svelte +15 -1
- package/dist/createTable.svelte.d.ts +26 -36
- package/dist/createTable.svelte.js +27 -32
- package/dist/createTableHook.svelte.d.ts +51 -18
- package/dist/createTableHook.svelte.js +18 -10
- package/dist/experimental-worker-plugin.d.ts +1 -0
- package/dist/experimental-worker-plugin.js +1 -0
- package/dist/index.d.ts +1 -2
- package/dist/index.js +0 -1
- package/dist/reactivity.svelte.d.ts +3 -1
- package/dist/reactivity.svelte.js +6 -1
- package/dist/render-component.js +4 -0
- package/package.json +16 -9
- package/skills/create-table-hook/SKILL.md +168 -0
- package/skills/getting-started/SKILL.md +172 -0
- package/skills/migrate-v8-to-v9/SKILL.md +201 -0
- package/skills/table-state/SKILL.md +262 -0
- package/skills/with-tanstack-query/SKILL.md +149 -0
- package/skills/with-tanstack-virtual/SKILL.md +150 -0
- package/dist/subscribe.d.ts +0 -24
- package/dist/subscribe.js +0 -4
- package/skills/svelte/client-to-server/SKILL.md +0 -238
- package/skills/svelte/compose-with-tanstack-form/SKILL.md +0 -295
- package/skills/svelte/compose-with-tanstack-pacer/SKILL.md +0 -176
- package/skills/svelte/compose-with-tanstack-query/SKILL.md +0 -299
- package/skills/svelte/compose-with-tanstack-store/SKILL.md +0 -277
- package/skills/svelte/compose-with-tanstack-virtual/SKILL.md +0 -286
- package/skills/svelte/getting-started/SKILL.md +0 -340
- package/skills/svelte/migrate-v8-to-v9/SKILL.md +0 -256
- package/skills/svelte/production-readiness/SKILL.md +0 -256
- package/skills/svelte/table-state/SKILL.md +0 -441
- package/src/AppCell.svelte +0 -13
- package/src/AppHeader.svelte +0 -13
- package/src/AppTable.svelte +0 -11
- package/src/FlexRender.svelte +0 -103
- package/src/context-keys.ts +0 -3
- package/src/createTable.svelte.ts +0 -137
- package/src/createTableHook.svelte.ts +0 -639
- package/src/createTableState.svelte.ts +0 -30
- package/src/flex-render.ts +0 -3
- package/src/global.d.ts +0 -1
- package/src/index.ts +0 -21
- package/src/merge-objects.ts +0 -79
- package/src/reactivity.svelte.ts +0 -118
- package/src/render-component.ts +0 -107
- package/src/static-functions.ts +0 -1
- package/src/subscribe.ts +0 -46
package/README.md
CHANGED
|
@@ -35,14 +35,18 @@
|
|
|
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)
|
|
41
43
|
> - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
|
|
44
|
+
> - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
|
|
45
|
+
> - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
|
|
42
46
|
|
|
43
47
|
A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
|
|
44
48
|
|
|
45
|
-
- Framework
|
|
49
|
+
- Framework-agnostic core with bindings for React, Preact, Octane, Vue, Solid, Svelte, Angular, Ember, Lit, and Alpine
|
|
46
50
|
- 100% customizable — bring your own UI, components, and styles
|
|
47
51
|
- Sorting, filtering, grouping, aggregation & row selection
|
|
48
52
|
- Lightweight, virtualizable & server‑side friendly
|
package/dist/FlexRender.svelte
CHANGED
|
@@ -61,8 +61,22 @@
|
|
|
61
61
|
// or the legacy content/context props.
|
|
62
62
|
const resolved = $derived.by(() => {
|
|
63
63
|
if ('cell' in props && props.cell) {
|
|
64
|
+
const columnDef = props.cell.column.columnDef
|
|
65
|
+
const groupingCell = props.cell as typeof props.cell & {
|
|
66
|
+
getIsAggregated?: () => boolean
|
|
67
|
+
getIsPlaceholder?: () => boolean
|
|
68
|
+
}
|
|
69
|
+
const groupingColumnDef = columnDef as typeof columnDef & {
|
|
70
|
+
aggregatedCell?: typeof columnDef.cell
|
|
71
|
+
}
|
|
72
|
+
const content = groupingCell.getIsAggregated?.()
|
|
73
|
+
? (groupingColumnDef.aggregatedCell ?? columnDef.cell)
|
|
74
|
+
: groupingCell.getIsPlaceholder?.()
|
|
75
|
+
? undefined
|
|
76
|
+
: columnDef.cell
|
|
77
|
+
|
|
64
78
|
return {
|
|
65
|
-
content
|
|
79
|
+
content,
|
|
66
80
|
context: props.cell.getContext(),
|
|
67
81
|
}
|
|
68
82
|
}
|
|
@@ -1,48 +1,38 @@
|
|
|
1
|
-
import type { RowData, Table, TableFeatures, TableOptions
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
*/
|
|
10
|
-
readonly store: Table<TFeatures, TData>['store'];
|
|
11
|
-
/**
|
|
12
|
-
* The selected state of the table. This state may not match the structure of
|
|
13
|
-
* the full table state because it is selected by the selector function that
|
|
14
|
-
* you pass as the 2nd argument to `createTable`.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* const table = createTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state
|
|
18
|
-
*
|
|
19
|
-
* console.log(table.state.globalFilter)
|
|
20
|
-
*/
|
|
21
|
-
readonly state: Readonly<TSelected>;
|
|
22
|
-
};
|
|
1
|
+
import type { RowData, Table, TableFeatures, TableOptions } from '@tanstack/table-core';
|
|
2
|
+
/**
|
|
3
|
+
* A Svelte-aware TanStack Table instance.
|
|
4
|
+
*
|
|
5
|
+
* Table APIs and `table.atoms.<slice>.get()` reads participate in Svelte
|
|
6
|
+
* dependency tracking when used in templates, `$derived`, or `$effect`.
|
|
7
|
+
*/
|
|
8
|
+
export type SvelteTable<TFeatures extends TableFeatures, TData extends RowData> = Table<TFeatures, TData>;
|
|
23
9
|
/**
|
|
24
10
|
* Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
|
|
25
11
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
12
|
+
* Read a specific state slice with `table.atoms.<slice>.get()` and read the
|
|
13
|
+
* complete state with `table.store.get()`. Those reads participate in Svelte
|
|
14
|
+
* dependency tracking when they run in a template, `$derived`, or `$effect`.
|
|
15
|
+
* The adapter syncs options in `$effect.pre`, so reactive option getters and
|
|
16
|
+
* external `$state` values are applied before DOM updates read table APIs such
|
|
17
|
+
* as `getRowModel()`.
|
|
30
18
|
*
|
|
31
19
|
* @example
|
|
32
20
|
* ```svelte
|
|
33
21
|
* <script lang="ts">
|
|
34
|
-
* const table = createTable(
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* data,
|
|
22
|
+
* const table = createTable({
|
|
23
|
+
* features,
|
|
24
|
+
* columns,
|
|
25
|
+
* get data() {
|
|
26
|
+
* return data
|
|
40
27
|
* },
|
|
41
|
-
*
|
|
42
|
-
*
|
|
28
|
+
* })
|
|
29
|
+
*
|
|
30
|
+
* const pagination = $derived(table.atoms.pagination.get())
|
|
31
|
+
* const stateJson = $derived(JSON.stringify(table.store.get(), null, 2))
|
|
43
32
|
* </script>
|
|
44
33
|
*
|
|
45
|
-
* {
|
|
34
|
+
* <span>Page {pagination.pageIndex + 1}</span>
|
|
35
|
+
* <pre>{stateJson}</pre>
|
|
46
36
|
* ```
|
|
47
37
|
*/
|
|
48
|
-
export declare function createTable<TFeatures extends TableFeatures, TData extends RowData
|
|
38
|
+
export declare function createTable<TFeatures extends TableFeatures, TData extends RowData>(tableOptions: TableOptions<TFeatures, TData>): SvelteTable<TFeatures, TData>;
|
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
import { constructTable } from '@tanstack/table-core';
|
|
2
|
-
import { useSelector } from '@tanstack/svelte-store';
|
|
3
2
|
import { untrack } from 'svelte';
|
|
4
3
|
import { flatMerge, mergeObjects } from './merge-objects';
|
|
5
4
|
import { svelteReactivity } from './reactivity.svelte';
|
|
6
5
|
/**
|
|
7
6
|
* Creates a Svelte 5 table instance backed by rune-aware TanStack Store atoms.
|
|
8
7
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
8
|
+
* Read a specific state slice with `table.atoms.<slice>.get()` and read the
|
|
9
|
+
* complete state with `table.store.get()`. Those reads participate in Svelte
|
|
10
|
+
* dependency tracking when they run in a template, `$derived`, or `$effect`.
|
|
11
|
+
* The adapter syncs options in `$effect.pre`, so reactive option getters and
|
|
12
|
+
* external `$state` values are applied before DOM updates read table APIs such
|
|
13
|
+
* as `getRowModel()`.
|
|
13
14
|
*
|
|
14
15
|
* @example
|
|
15
16
|
* ```svelte
|
|
16
17
|
* <script lang="ts">
|
|
17
|
-
* const table = createTable(
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
* data,
|
|
18
|
+
* const table = createTable({
|
|
19
|
+
* features,
|
|
20
|
+
* columns,
|
|
21
|
+
* get data() {
|
|
22
|
+
* return data
|
|
23
23
|
* },
|
|
24
|
-
*
|
|
25
|
-
*
|
|
24
|
+
* })
|
|
25
|
+
*
|
|
26
|
+
* const pagination = $derived(table.atoms.pagination.get())
|
|
27
|
+
* const stateJson = $derived(JSON.stringify(table.store.get(), null, 2))
|
|
26
28
|
* </script>
|
|
27
29
|
*
|
|
28
|
-
* {
|
|
30
|
+
* <span>Page {pagination.pageIndex + 1}</span>
|
|
31
|
+
* <pre>{stateJson}</pre>
|
|
29
32
|
* ```
|
|
30
33
|
*/
|
|
31
|
-
export function createTable(tableOptions
|
|
34
|
+
export function createTable(tableOptions) {
|
|
32
35
|
// 1. Merge reactivity into options using mergeObjects (preserves getters)
|
|
33
36
|
const mergedOptions = mergeObjects(tableOptions, {
|
|
34
37
|
features: {
|
|
35
|
-
|
|
38
|
+
coreReactivityFeature: svelteReactivity(),
|
|
36
39
|
...tableOptions.features,
|
|
37
40
|
},
|
|
38
41
|
});
|
|
@@ -48,32 +51,24 @@ export function createTable(tableOptions, selector) {
|
|
|
48
51
|
// inside createTableState), the effect re-runs and calls setOptions.
|
|
49
52
|
// Use $effect.pre so the table sees updated options BEFORE the DOM renders,
|
|
50
53
|
// ensuring getRowModel() returns current data (not stale, one-frame-behind data).
|
|
51
|
-
//
|
|
52
|
-
//
|
|
53
|
-
//
|
|
54
|
+
// Reactive option getters and nested state keys are read OUTSIDE untrack so
|
|
55
|
+
// they become dependencies. The setOptions call is INSIDE untrack so option
|
|
56
|
+
// writes do not subscribe this effect to table internals.
|
|
54
57
|
$effect.pre(() => {
|
|
55
|
-
//
|
|
56
|
-
|
|
58
|
+
// Resolve every option outside untrack so getter-backed data, columns,
|
|
59
|
+
// callbacks, metadata, and state become dependencies of this effect.
|
|
60
|
+
const nextOptions = flatMerge(mergedOptions);
|
|
61
|
+
const state = nextOptions.state;
|
|
57
62
|
if (state) {
|
|
58
63
|
for (const key in state) {
|
|
59
64
|
void state[key];
|
|
60
65
|
}
|
|
61
66
|
}
|
|
62
|
-
void mergedOptions.data;
|
|
63
67
|
untrack(() => {
|
|
64
68
|
table.setOptions((prev) => {
|
|
65
|
-
return flatMerge(prev,
|
|
69
|
+
return flatMerge(prev, nextOptions);
|
|
66
70
|
});
|
|
67
71
|
});
|
|
68
72
|
});
|
|
69
|
-
// 5. State selector
|
|
70
|
-
const stateStore = useSelector(table.store, selector);
|
|
71
|
-
Object.defineProperty(table, 'state', {
|
|
72
|
-
get() {
|
|
73
|
-
return stateStore.current;
|
|
74
|
-
},
|
|
75
|
-
configurable: true,
|
|
76
|
-
enumerable: true,
|
|
77
|
-
});
|
|
78
73
|
return table;
|
|
79
74
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import FlexRenderSvelte from './FlexRender.svelte';
|
|
2
2
|
import type { SvelteTable } from './createTable.svelte';
|
|
3
3
|
import type { Component, Snippet } from 'svelte';
|
|
4
|
-
import type { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions
|
|
4
|
+
import type { AccessorFn, AccessorFnColumnDef, AccessorKeyColumnDef, Cell, CellContext, CellData, Column, ColumnDef, DeepKeys, DeepValue, DisplayColumnDef, GroupColumnDef, Header, IdentifiedColumnDef, NoInfer, Row, RowData, Table, TableFeatures, TableOptions } from '@tanstack/table-core';
|
|
5
5
|
export type ComponentType<T extends Record<string, any>> = Component<T>;
|
|
6
6
|
/**
|
|
7
7
|
* Enhanced CellContext with pre-bound cell components.
|
|
@@ -55,7 +55,7 @@ export type AppGroupColumnDef<TFeatures extends TableFeatures, TData extends Row
|
|
|
55
55
|
cell?: AppColumnDefTemplate<AppCellContext<TFeatures, TData, unknown, TCellComponents>>;
|
|
56
56
|
header?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
57
57
|
footer?: AppColumnDefTemplate<AppHeaderContext<TFeatures, TData, unknown, THeaderComponents>>;
|
|
58
|
-
columns?:
|
|
58
|
+
columns?: ReadonlyArray<ColumnDef<TFeatures, TData, unknown>>;
|
|
59
59
|
};
|
|
60
60
|
/**
|
|
61
61
|
* Enhanced column helper with pre-bound components in cell/header/footer contexts.
|
|
@@ -66,7 +66,7 @@ export type AppColumnHelper<TFeatures extends TableFeatures, TData extends RowDa
|
|
|
66
66
|
* Creates a data column definition with an accessor key or function.
|
|
67
67
|
* The cell, header, and footer contexts include pre-bound components.
|
|
68
68
|
*/
|
|
69
|
-
accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
|
|
69
|
+
accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends (TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never)>(accessor: TAccessor, column: TAccessor extends AccessorFn<TData> ? AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents> & {
|
|
70
70
|
id: string;
|
|
71
71
|
} : AppColumnDefBase<TFeatures, TData, TValue, TCellComponents, THeaderComponents>) => TAccessor extends AccessorFn<TData> ? AccessorFnColumnDef<TFeatures, TData, TValue> : AccessorKeyColumnDef<TFeatures, TData, TValue>;
|
|
72
72
|
/**
|
|
@@ -112,9 +112,10 @@ export type CreateTableHookOptions<TFeatures extends TableFeatures, TTableCompon
|
|
|
112
112
|
headerComponents?: THeaderComponents;
|
|
113
113
|
};
|
|
114
114
|
/**
|
|
115
|
-
*
|
|
115
|
+
* Svelte-aware table returned by `createAppTable`, extended with the registered
|
|
116
|
+
* table components and the `App*` context wrappers.
|
|
116
117
|
*/
|
|
117
|
-
export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowData,
|
|
118
|
+
export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowData, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> = SvelteTable<TFeatures, TData> & NoInfer<TTableComponents> & {
|
|
118
119
|
/**
|
|
119
120
|
* Root wrapper component that provides table context.
|
|
120
121
|
* @example
|
|
@@ -189,6 +190,45 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
|
|
|
189
190
|
*/
|
|
190
191
|
FlexRender: typeof FlexRenderSvelte;
|
|
191
192
|
};
|
|
193
|
+
export interface CreateTableHookResult<TFeatures extends TableFeatures, TTableComponents extends Record<string, ComponentType<any>>, TCellComponents extends Record<string, ComponentType<any>>, THeaderComponents extends Record<string, ComponentType<any>>> {
|
|
194
|
+
/** The features object that was passed to `createTableHook`. */
|
|
195
|
+
appFeatures: TFeatures;
|
|
196
|
+
/**
|
|
197
|
+
* A column helper pre-bound to `TFeatures` and the registered components, so
|
|
198
|
+
* the cell/header/footer render props expose the bound components.
|
|
199
|
+
*/
|
|
200
|
+
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
201
|
+
/**
|
|
202
|
+
* Creates a table with the `App*` wrapper components and registered
|
|
203
|
+
* `tableComponents` attached. `TData` is inferred from the `data` option.
|
|
204
|
+
*
|
|
205
|
+
* Read table state with `table.atoms.<slice>.get()` or `table.store.get()`.
|
|
206
|
+
* These reads participate in Svelte dependency tracking inside templates,
|
|
207
|
+
* `$derived`, and `$effect`.
|
|
208
|
+
*/
|
|
209
|
+
createAppTable: <TData extends RowData>(tableOptions: Omit<TableOptions<TFeatures, TData>, 'features'>) => AppSvelteTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
210
|
+
/**
|
|
211
|
+
* Reads the table provided by the nearest `<table.AppTable>`. This is the same
|
|
212
|
+
* extended instance `createAppTable` returns, so the `App*` components and your
|
|
213
|
+
* `tableComponents` are available on it.
|
|
214
|
+
*/
|
|
215
|
+
useTableContext: <TData extends RowData = RowData>() => AppSvelteTable<TFeatures, TData, TTableComponents, TCellComponents, THeaderComponents>;
|
|
216
|
+
/**
|
|
217
|
+
* Reads the cell provided by the nearest `<table.AppCell>`, extended with your
|
|
218
|
+
* `cellComponents` and a context-bound `FlexRender`.
|
|
219
|
+
*/
|
|
220
|
+
useCellContext: <TValue extends CellData = CellData>() => Cell<TFeatures, any, TValue> & TCellComponents & {
|
|
221
|
+
FlexRender: typeof FlexRenderSvelte;
|
|
222
|
+
};
|
|
223
|
+
/**
|
|
224
|
+
* Reads the header provided by the nearest `<table.AppHeader>` /
|
|
225
|
+
* `<table.AppFooter>`, extended with your `headerComponents` and a
|
|
226
|
+
* context-bound `FlexRender`.
|
|
227
|
+
*/
|
|
228
|
+
useHeaderContext: <TValue extends CellData = CellData>() => Header<TFeatures, any, TValue> & THeaderComponents & {
|
|
229
|
+
FlexRender: typeof FlexRenderSvelte;
|
|
230
|
+
};
|
|
231
|
+
}
|
|
192
232
|
/**
|
|
193
233
|
* Creates a custom table hook with pre-bound components for composition.
|
|
194
234
|
*
|
|
@@ -213,23 +253,16 @@ export type AppSvelteTable<TFeatures extends TableFeatures, TData extends RowDat
|
|
|
213
253
|
* rowPaginationFeature,
|
|
214
254
|
* rowSortingFeature,
|
|
215
255
|
* columnFilteringFeature,
|
|
216
|
-
* }),
|
|
217
|
-
* rowModels: {
|
|
218
256
|
* paginatedRowModel: createPaginatedRowModel(),
|
|
219
|
-
* sortedRowModel: createSortedRowModel(
|
|
220
|
-
* filteredRowModel: createFilteredRowModel(
|
|
221
|
-
*
|
|
257
|
+
* sortedRowModel: createSortedRowModel(),
|
|
258
|
+
* filteredRowModel: createFilteredRowModel(),
|
|
259
|
+
* sortFns,
|
|
260
|
+
* filterFns,
|
|
261
|
+
* }),
|
|
222
262
|
* tableComponents: { PaginationControls, RowCount },
|
|
223
263
|
* cellComponents: { TextCell, NumberCell },
|
|
224
264
|
* headerComponents: { SortIndicator, ColumnFilter },
|
|
225
265
|
* })
|
|
226
266
|
* ```
|
|
227
267
|
*/
|
|
228
|
-
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>):
|
|
229
|
-
appFeatures: TFeatures;
|
|
230
|
-
createAppColumnHelper: <TData extends RowData>() => AppColumnHelper<TFeatures, TData, TCellComponents, THeaderComponents>;
|
|
231
|
-
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>;
|
|
232
|
-
useTableContext: <TData extends RowData = RowData>() => SvelteTable<TFeatures, TData>;
|
|
233
|
-
useCellContext: <TValue extends CellData = unknown>() => Cell<TFeatures, any, TValue>;
|
|
234
|
-
useHeaderContext: <TValue extends CellData = unknown>() => Header<TFeatures, any, TValue>;
|
|
235
|
-
};
|
|
268
|
+
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>;
|
|
@@ -34,12 +34,12 @@ import FlexRenderSvelte from './FlexRender.svelte';
|
|
|
34
34
|
* rowPaginationFeature,
|
|
35
35
|
* rowSortingFeature,
|
|
36
36
|
* columnFilteringFeature,
|
|
37
|
-
* }),
|
|
38
|
-
* rowModels: {
|
|
39
37
|
* paginatedRowModel: createPaginatedRowModel(),
|
|
40
|
-
* sortedRowModel: createSortedRowModel(
|
|
41
|
-
* filteredRowModel: createFilteredRowModel(
|
|
42
|
-
*
|
|
38
|
+
* sortedRowModel: createSortedRowModel(),
|
|
39
|
+
* filteredRowModel: createFilteredRowModel(),
|
|
40
|
+
* sortFns,
|
|
41
|
+
* filterFns,
|
|
42
|
+
* }),
|
|
43
43
|
* tableComponents: { PaginationControls, RowCount },
|
|
44
44
|
* cellComponents: { TextCell, NumberCell },
|
|
45
45
|
* headerComponents: { SortIndicator, ColumnFilter },
|
|
@@ -65,6 +65,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
65
65
|
throw new Error('`useTableContext` must be used within an `AppTable` component. ' +
|
|
66
66
|
'Make sure your component is wrapped with `<table.AppTable>...</table.AppTable>`.');
|
|
67
67
|
}
|
|
68
|
+
// `<table.AppTable>` provides the extended table (the App* wrapper
|
|
69
|
+
// components and `tableComponents` are Object.assign-ed onto the same
|
|
70
|
+
// instance `createAppTable` returns), so this asserts the runtime shape.
|
|
68
71
|
return table;
|
|
69
72
|
}
|
|
70
73
|
/**
|
|
@@ -78,6 +81,9 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
78
81
|
throw new Error('`useCellContext` must be used within an `AppCell` component. ' +
|
|
79
82
|
'Make sure your component is wrapped with `<table.AppCell cell={cell}>...</table.AppCell>`.');
|
|
80
83
|
}
|
|
84
|
+
// `<table.AppCell>` Object.assign-es `cellComponents` and `FlexRender` onto
|
|
85
|
+
// the same cell instance it puts in context, so this asserts the runtime
|
|
86
|
+
// shape.
|
|
81
87
|
return cell;
|
|
82
88
|
}
|
|
83
89
|
/**
|
|
@@ -90,6 +96,8 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
90
96
|
if (!header) {
|
|
91
97
|
throw new Error('`useHeaderContext` must be used within an `AppHeader` or `AppFooter` component.');
|
|
92
98
|
}
|
|
99
|
+
// `<table.AppHeader>` / `<table.AppFooter>` Object.assign `headerComponents`
|
|
100
|
+
// and `FlexRender` onto the same header instance they put in context.
|
|
93
101
|
return header;
|
|
94
102
|
}
|
|
95
103
|
/**
|
|
@@ -101,10 +109,10 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
101
109
|
*
|
|
102
110
|
* TFeatures is already known from the createTableHook call; TData is inferred from the data prop.
|
|
103
111
|
*/
|
|
104
|
-
function createAppTable(tableOptions
|
|
112
|
+
function createAppTable(tableOptions) {
|
|
105
113
|
// Merge default options with provided options (provided takes precedence)
|
|
106
114
|
const mergedTableOptions = mergeObjects(defaultTableOptions, tableOptions);
|
|
107
|
-
const table = createTable(mergedTableOptions
|
|
115
|
+
const table = createTable(mergedTableOptions);
|
|
108
116
|
// Build cellComponents with FlexRender included
|
|
109
117
|
const cellComponentsWithFlexRender = {
|
|
110
118
|
FlexRender: FlexRenderSvelte,
|
|
@@ -124,7 +132,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
124
132
|
setContext(tableContextKey, table);
|
|
125
133
|
return AppTableSvelte(internal, { ...props });
|
|
126
134
|
});
|
|
127
|
-
const AppCell = ((internal, { children, cell
|
|
135
|
+
const AppCell = ((internal, { children, cell }) => {
|
|
128
136
|
setContext(cellContextKey, cell);
|
|
129
137
|
return AppCellSvelte(internal, {
|
|
130
138
|
cell,
|
|
@@ -132,7 +140,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
132
140
|
children,
|
|
133
141
|
});
|
|
134
142
|
});
|
|
135
|
-
const AppHeader = ((internal, { children, header
|
|
143
|
+
const AppHeader = ((internal, { children, header }) => {
|
|
136
144
|
setContext(headerContextKey, header);
|
|
137
145
|
return AppHeaderSvelte(internal, {
|
|
138
146
|
header,
|
|
@@ -141,7 +149,7 @@ export function createTableHook({ tableComponents, cellComponents, headerCompone
|
|
|
141
149
|
});
|
|
142
150
|
});
|
|
143
151
|
// AppFooter reuses AppHeaderSvelte (footers use Header type in table-core)
|
|
144
|
-
const AppFooter = ((internal, { children, header
|
|
152
|
+
const AppFooter = ((internal, { children, header }) => {
|
|
145
153
|
setContext(headerContextKey, header);
|
|
146
154
|
return AppHeaderSvelte(internal, {
|
|
147
155
|
header,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@tanstack/table-core/experimental-worker-plugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@tanstack/table-core/experimental-worker-plugin';
|
package/dist/index.d.ts
CHANGED
|
@@ -2,8 +2,7 @@ export * from '@tanstack/table-core';
|
|
|
2
2
|
export { createTable } from './createTable.svelte';
|
|
3
3
|
export type { SvelteTable } from './createTable.svelte';
|
|
4
4
|
export { createTableHook } from './createTableHook.svelte';
|
|
5
|
-
export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, } from './createTableHook.svelte';
|
|
5
|
+
export type { AppCellContext, AppColumnDefBase, AppColumnDefTemplate, AppColumnHelper, AppDisplayColumnDef, AppGroupColumnDef, AppHeaderContext, AppSvelteTable, ComponentType, CreateTableHookOptions, CreateTableHookResult, } from './createTableHook.svelte';
|
|
6
6
|
export { createTableState } from './createTableState.svelte';
|
|
7
7
|
export { default as FlexRender } from './FlexRender.svelte';
|
|
8
|
-
export { subscribeTable, type SubscribeSource } from './subscribe';
|
|
9
8
|
export { renderComponent, renderSnippet } from './render-component';
|
package/dist/index.js
CHANGED
|
@@ -3,5 +3,4 @@ export { createTable } from './createTable.svelte';
|
|
|
3
3
|
export { createTableHook } from './createTableHook.svelte';
|
|
4
4
|
export { createTableState } from './createTableState.svelte';
|
|
5
5
|
export { default as FlexRender } from './FlexRender.svelte';
|
|
6
|
-
export { subscribeTable } from './subscribe';
|
|
7
6
|
export { renderComponent, renderSnippet } from './render-component';
|
|
@@ -4,6 +4,8 @@ import type { TableReactivityBindings } from '@tanstack/table-core/reactivity';
|
|
|
4
4
|
*
|
|
5
5
|
* Table state atoms are backed by TanStack Store atoms. The options store stays
|
|
6
6
|
* framework-native because row-model APIs read `table.options` directly during
|
|
7
|
-
* render. Readonly table atoms bridge Store dependency tracking into
|
|
7
|
+
* render. Readonly table atoms bridge Store dependency tracking into
|
|
8
|
+
* `$derived.by`, so their `.get()` methods participate in Svelte dependency
|
|
9
|
+
* tracking when called in templates, `$derived`, or `$effect`.
|
|
8
10
|
*/
|
|
9
11
|
export declare function svelteReactivity(): TableReactivityBindings;
|
|
@@ -36,7 +36,9 @@ function createRuneWritableAtom(initialValue) {
|
|
|
36
36
|
*
|
|
37
37
|
* Table state atoms are backed by TanStack Store atoms. The options store stays
|
|
38
38
|
* framework-native because row-model APIs read `table.options` directly during
|
|
39
|
-
* render. Readonly table atoms bridge Store dependency tracking into
|
|
39
|
+
* render. Readonly table atoms bridge Store dependency tracking into
|
|
40
|
+
* `$derived.by`, so their `.get()` methods participate in Svelte dependency
|
|
41
|
+
* tracking when called in templates, `$derived`, or `$effect`.
|
|
40
42
|
*/
|
|
41
43
|
export function svelteReactivity() {
|
|
42
44
|
return {
|
|
@@ -66,6 +68,9 @@ export function svelteReactivity() {
|
|
|
66
68
|
});
|
|
67
69
|
return {
|
|
68
70
|
get: () => {
|
|
71
|
+
// Both reads are load-bearing: the Store read preserves dependency
|
|
72
|
+
// tracking between table atoms, while touching `value` registers the
|
|
73
|
+
// current Svelte reactive scope with the rune-backed bridge.
|
|
69
74
|
const currentValue = storeAtom.get();
|
|
70
75
|
value;
|
|
71
76
|
return currentValue;
|
package/dist/render-component.js
CHANGED
|
@@ -15,6 +15,8 @@
|
|
|
15
15
|
* ```
|
|
16
16
|
* */
|
|
17
17
|
export class RenderComponentConfig {
|
|
18
|
+
component;
|
|
19
|
+
props;
|
|
18
20
|
constructor(component, props) {
|
|
19
21
|
this.component = component;
|
|
20
22
|
this.props = props;
|
|
@@ -36,6 +38,8 @@ export class RenderComponentConfig {
|
|
|
36
38
|
* ```
|
|
37
39
|
* */
|
|
38
40
|
export class RenderSnippetConfig {
|
|
41
|
+
snippet;
|
|
42
|
+
params;
|
|
39
43
|
constructor(snippet, params) {
|
|
40
44
|
this.snippet = snippet;
|
|
41
45
|
this.params = params;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/svelte-table",
|
|
3
|
-
"version": "9.0.0-beta.
|
|
3
|
+
"version": "9.0.0-beta.70",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Svelte.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,6 +36,11 @@
|
|
|
36
36
|
"svelte": "./dist/static-functions.js",
|
|
37
37
|
"import": "./dist/static-functions.js"
|
|
38
38
|
},
|
|
39
|
+
"./experimental-worker-plugin": {
|
|
40
|
+
"types": "./dist/experimental-worker-plugin.d.ts",
|
|
41
|
+
"svelte": "./dist/experimental-worker-plugin.js",
|
|
42
|
+
"import": "./dist/experimental-worker-plugin.js"
|
|
43
|
+
},
|
|
39
44
|
"./flex-render": {
|
|
40
45
|
"types": "./dist/flex-render.d.ts",
|
|
41
46
|
"svelte": "./dist/flex-render.js",
|
|
@@ -44,30 +49,32 @@
|
|
|
44
49
|
"./package.json": "./package.json"
|
|
45
50
|
},
|
|
46
51
|
"engines": {
|
|
47
|
-
"node": ">=
|
|
52
|
+
"node": ">=20"
|
|
48
53
|
},
|
|
49
54
|
"files": [
|
|
50
55
|
"dist",
|
|
51
|
-
"src",
|
|
52
56
|
"skills"
|
|
53
57
|
],
|
|
54
58
|
"dependencies": {
|
|
55
59
|
"@tanstack/svelte-store": "^0.12.0",
|
|
56
|
-
"@tanstack/table-core": "9.0.0-beta.
|
|
60
|
+
"@tanstack/table-core": "9.0.0-beta.70"
|
|
57
61
|
},
|
|
58
62
|
"devDependencies": {
|
|
59
63
|
"@sveltejs/package": "^2.5.8",
|
|
60
|
-
"@sveltejs/vite-plugin-svelte": "^7.
|
|
61
|
-
"
|
|
62
|
-
"svelte": "^
|
|
63
|
-
"svelte
|
|
64
|
+
"@sveltejs/vite-plugin-svelte": "^7.2.0",
|
|
65
|
+
"@testing-library/svelte": "^5.4.2",
|
|
66
|
+
"eslint-plugin-svelte": "^3.22.0",
|
|
67
|
+
"svelte": "^5.56.8",
|
|
68
|
+
"svelte-check": "^4.7.4"
|
|
64
69
|
},
|
|
65
70
|
"peerDependencies": {
|
|
66
71
|
"svelte": "^5.0.0"
|
|
67
72
|
},
|
|
68
73
|
"scripts": {
|
|
69
74
|
"clean": "rimraf ./build && rimraf ./dist",
|
|
70
|
-
"test:eslint": "eslint ./src",
|
|
75
|
+
"test:eslint": "eslint ./src ./tests",
|
|
76
|
+
"test:lib": "vitest --passWithNoTests",
|
|
77
|
+
"test:lib:dev": "pnpm test:lib --watch",
|
|
71
78
|
"test:types": "svelte-check --tsconfig ./tsconfig.json",
|
|
72
79
|
"test:build": "publint --strict",
|
|
73
80
|
"build": "svelte-package --input ./src --output ./dist"
|