@humanspeak/svelte-headless-table 6.0.2 → 6.0.4
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 -2
- package/dist/bodyCells.d.ts +116 -0
- package/dist/bodyCells.js +80 -0
- package/dist/bodyRows.d.ts +92 -0
- package/dist/bodyRows.js +55 -0
- package/dist/columns.d.ts +204 -0
- package/dist/columns.js +120 -0
- package/dist/constants.d.ts +4 -0
- package/dist/constants.js +4 -0
- package/dist/createTable.d.ts +107 -0
- package/dist/createTable.js +92 -0
- package/dist/createViewModel.d.ts +105 -2
- package/dist/createViewModel.js +55 -1
- package/dist/headerCells.d.ts +210 -0
- package/dist/headerCells.js +151 -0
- package/dist/headerRows.d.ts +72 -0
- package/dist/headerRows.js +60 -0
- package/dist/plugins/addColumnFilters.d.ts +101 -0
- package/dist/plugins/addColumnFilters.js +55 -0
- package/dist/plugins/addColumnOrder.d.ts +30 -0
- package/dist/plugins/addColumnOrder.js +21 -0
- package/dist/plugins/addDataExport.d.ts +51 -0
- package/dist/plugins/addDataExport.js +30 -0
- package/dist/plugins/addExpandedRows.d.ts +41 -2
- package/dist/plugins/addExpandedRows.js +24 -0
- package/dist/plugins/addFlatten.d.ts +48 -3
- package/dist/plugins/addFlatten.js +28 -0
- package/dist/plugins/addGridLayout.d.ts +13 -0
- package/dist/plugins/addGridLayout.js +13 -0
- package/dist/plugins/addGroupBy.d.ts +80 -4
- package/dist/plugins/addGroupBy.js +48 -4
- package/dist/plugins/addHiddenColumns.d.ts +27 -0
- package/dist/plugins/addHiddenColumns.js +19 -0
- package/dist/plugins/addPagination.d.ts +54 -0
- package/dist/plugins/addPagination.js +29 -0
- package/dist/plugins/addResizedColumns.d.ts +58 -4
- package/dist/plugins/addResizedColumns.js +33 -0
- package/dist/plugins/addSelectedRows.d.ts +58 -2
- package/dist/plugins/addSelectedRows.js +42 -0
- package/dist/plugins/addSortBy.d.ts +83 -6
- package/dist/plugins/addSortBy.js +65 -24
- package/dist/plugins/addSubRows.d.ts +39 -1
- package/dist/plugins/addSubRows.js +25 -0
- package/dist/plugins/addTableFilter.d.ts +87 -3
- package/dist/plugins/addTableFilter.js +90 -40
- package/dist/plugins/addVirtualScroll.d.ts +37 -0
- package/dist/plugins/addVirtualScroll.js +302 -0
- package/dist/plugins/addVirtualScroll.types.d.ts +139 -0
- package/dist/plugins/addVirtualScroll.types.js +1 -0
- package/dist/plugins/index.d.ts +1 -0
- package/dist/plugins/index.js +1 -0
- package/dist/tableComponent.d.ts +41 -0
- package/dist/tableComponent.js +37 -0
- package/dist/types/Action.d.ts +16 -2
- package/dist/types/Entries.d.ts +6 -0
- package/dist/types/KeyPath.d.ts +20 -0
- package/dist/types/Label.d.ts +26 -3
- package/dist/types/Matrix.d.ts +6 -0
- package/dist/types/TablePlugin.d.ts +140 -10
- package/dist/utils/HeightManager.d.ts +107 -0
- package/dist/utils/HeightManager.js +204 -0
- package/dist/utils/array.d.ts +24 -0
- package/dist/utils/array.js +24 -0
- package/dist/utils/attributes.d.ts +31 -0
- package/dist/utils/attributes.js +31 -0
- package/dist/utils/clone.d.ts +19 -0
- package/dist/utils/clone.js +13 -0
- package/dist/utils/compare.d.ts +29 -0
- package/dist/utils/compare.js +29 -0
- package/dist/utils/counter.d.ts +12 -0
- package/dist/utils/counter.js +12 -0
- package/dist/utils/css.d.ts +11 -0
- package/dist/utils/css.js +11 -0
- package/dist/utils/event.d.ts +14 -0
- package/dist/utils/event.js +14 -0
- package/dist/utils/filter.d.ts +47 -0
- package/dist/utils/filter.js +47 -0
- package/dist/utils/math.d.ts +22 -0
- package/dist/utils/math.js +22 -0
- package/dist/utils/matrix.d.ts +24 -0
- package/dist/utils/matrix.js +24 -0
- package/dist/utils/store.d.ts +116 -9
- package/dist/utils/store.js +63 -0
- package/package.json +23 -23
package/dist/createTable.js
CHANGED
|
@@ -1,13 +1,45 @@
|
|
|
1
1
|
import { DataColumn, DisplayColumn, getFlatColumnIds, GroupColumn } from './columns.js';
|
|
2
2
|
import { createViewModel } from './createViewModel.js';
|
|
3
3
|
import { getDuplicates } from './utils/array.js';
|
|
4
|
+
/**
|
|
5
|
+
* Core table class that provides methods for defining columns and creating view models.
|
|
6
|
+
* Use the `createTable` factory function to instantiate.
|
|
7
|
+
*
|
|
8
|
+
* @template Item - The type of data items in the table.
|
|
9
|
+
* @template Plugins - The plugins configuration type.
|
|
10
|
+
* @example
|
|
11
|
+
* ```typescript
|
|
12
|
+
* const table = createTable(data, { sort: addSortBy(), filter: addTableFilter() })
|
|
13
|
+
* const columns = table.createColumns([
|
|
14
|
+
* table.column({ accessor: 'name', header: 'Name' }),
|
|
15
|
+
* table.column({ accessor: 'age', header: 'Age' })
|
|
16
|
+
* ])
|
|
17
|
+
* const viewModel = table.createViewModel(columns)
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
4
20
|
export class Table {
|
|
21
|
+
/** The data source, either a Readable or Writable Svelte store. */
|
|
5
22
|
data;
|
|
23
|
+
/** The plugins configuration object. */
|
|
6
24
|
plugins;
|
|
25
|
+
/**
|
|
26
|
+
* Creates a new Table instance.
|
|
27
|
+
*
|
|
28
|
+
* @param data - A Svelte store containing the table data.
|
|
29
|
+
* @param plugins - The plugins to use with this table.
|
|
30
|
+
*/
|
|
7
31
|
constructor(data, plugins) {
|
|
8
32
|
this.data = data;
|
|
9
33
|
this.plugins = plugins;
|
|
10
34
|
}
|
|
35
|
+
/**
|
|
36
|
+
* Validates and returns the column definitions.
|
|
37
|
+
* Throws an error if duplicate column IDs are detected.
|
|
38
|
+
*
|
|
39
|
+
* @param columns - Array of column definitions.
|
|
40
|
+
* @returns The same columns array if validation passes.
|
|
41
|
+
* @throws Error if duplicate column IDs are found.
|
|
42
|
+
*/
|
|
11
43
|
createColumns(columns) {
|
|
12
44
|
const ids = getFlatColumnIds(columns);
|
|
13
45
|
const duplicateIds = getDuplicates(ids);
|
|
@@ -19,16 +51,76 @@ export class Table {
|
|
|
19
51
|
column(def) {
|
|
20
52
|
return new DataColumn(def);
|
|
21
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Creates a group column that contains other columns.
|
|
56
|
+
* Used for creating hierarchical column headers.
|
|
57
|
+
*
|
|
58
|
+
* @param def - The group column definition.
|
|
59
|
+
* @returns A new GroupColumn instance.
|
|
60
|
+
* @example
|
|
61
|
+
* ```typescript
|
|
62
|
+
* table.group({
|
|
63
|
+
* header: 'Personal Info',
|
|
64
|
+
* columns: [
|
|
65
|
+
* table.column({ accessor: 'firstName', header: 'First Name' }),
|
|
66
|
+
* table.column({ accessor: 'lastName', header: 'Last Name' })
|
|
67
|
+
* ]
|
|
68
|
+
* })
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
22
71
|
group(def) {
|
|
23
72
|
return new GroupColumn(def);
|
|
24
73
|
}
|
|
74
|
+
/**
|
|
75
|
+
* Creates a display column for non-data content like actions or selection checkboxes.
|
|
76
|
+
*
|
|
77
|
+
* @param def - The display column definition.
|
|
78
|
+
* @returns A new DisplayColumn instance.
|
|
79
|
+
* @example
|
|
80
|
+
* ```typescript
|
|
81
|
+
* table.display({
|
|
82
|
+
* id: 'actions',
|
|
83
|
+
* header: '',
|
|
84
|
+
* cell: ({ row }) => createRender(ActionButtons, { row })
|
|
85
|
+
* })
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
25
88
|
display(def) {
|
|
26
89
|
return new DisplayColumn(def);
|
|
27
90
|
}
|
|
91
|
+
/**
|
|
92
|
+
* Creates a reactive view model from the table and columns.
|
|
93
|
+
* The view model provides all the data needed to render the table.
|
|
94
|
+
*
|
|
95
|
+
* @param columns - The column definitions.
|
|
96
|
+
* @param options - Optional configuration for the view model.
|
|
97
|
+
* @returns A TableViewModel with reactive stores for rendering.
|
|
98
|
+
*/
|
|
28
99
|
createViewModel(columns, options) {
|
|
29
100
|
return createViewModel(this, columns, options);
|
|
30
101
|
}
|
|
31
102
|
}
|
|
103
|
+
/**
|
|
104
|
+
* Factory function to create a new Table instance.
|
|
105
|
+
* This is the main entry point for using svelte-headless-table.
|
|
106
|
+
*
|
|
107
|
+
* @template Item - The type of data items in the table.
|
|
108
|
+
* @template Plugins - The plugins configuration type.
|
|
109
|
+
* @param data - A Svelte store containing the table data.
|
|
110
|
+
* @param plugins - Optional plugins configuration object.
|
|
111
|
+
* @returns A new Table instance.
|
|
112
|
+
* @example
|
|
113
|
+
* ```typescript
|
|
114
|
+
* import { createTable } from 'svelte-headless-table'
|
|
115
|
+
* import { addSortBy, addPagination } from 'svelte-headless-table/plugins'
|
|
116
|
+
*
|
|
117
|
+
* const data = writable([{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }])
|
|
118
|
+
* const table = createTable(data, {
|
|
119
|
+
* sort: addSortBy(),
|
|
120
|
+
* page: addPagination({ initialPageSize: 10 })
|
|
121
|
+
* })
|
|
122
|
+
* ```
|
|
123
|
+
*/
|
|
32
124
|
export const createTable = (data,
|
|
33
125
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
34
126
|
plugins = {}) => {
|
|
@@ -4,13 +4,74 @@ import type { Table } from './createTable.js';
|
|
|
4
4
|
import { HeaderRow } from './headerRows.js';
|
|
5
5
|
import type { AnyPlugins, PluginStates } from './types/TablePlugin.js';
|
|
6
6
|
import { type Readable, type Writable } from 'svelte/store';
|
|
7
|
+
/**
|
|
8
|
+
* HTML attributes for the table element.
|
|
9
|
+
*
|
|
10
|
+
* @template Item - The type of data items in the table.
|
|
11
|
+
* @template Plugins - The plugins used by the table.
|
|
12
|
+
*/
|
|
7
13
|
export type TableAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown> & {
|
|
8
14
|
role: 'table';
|
|
9
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* HTML attributes for the table head element.
|
|
18
|
+
*
|
|
19
|
+
* @template Item - The type of data items in the table.
|
|
20
|
+
* @template Plugins - The plugins used by the table.
|
|
21
|
+
*/
|
|
10
22
|
export type TableHeadAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown>;
|
|
23
|
+
/**
|
|
24
|
+
* HTML attributes for the table body element.
|
|
25
|
+
*
|
|
26
|
+
* @template Item - The type of data items in the table.
|
|
27
|
+
* @template Plugins - The plugins used by the table.
|
|
28
|
+
*/
|
|
11
29
|
export type TableBodyAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = Record<string, unknown> & {
|
|
12
30
|
role: 'rowgroup';
|
|
13
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* Debug information for performance analysis of the table view model.
|
|
34
|
+
* Provides metrics about derivation chains and call counts.
|
|
35
|
+
*/
|
|
36
|
+
export interface ViewModelDebug {
|
|
37
|
+
/** Number of plugins active */
|
|
38
|
+
pluginCount: number;
|
|
39
|
+
/** Names of active plugins */
|
|
40
|
+
pluginNames: string[];
|
|
41
|
+
/** Number of derived stores in each chain */
|
|
42
|
+
derivedStoreCount: {
|
|
43
|
+
tableAttrs: number;
|
|
44
|
+
tableHeadAttrs: number;
|
|
45
|
+
tableBodyAttrs: number;
|
|
46
|
+
visibleColumns: number;
|
|
47
|
+
rows: number;
|
|
48
|
+
pageRows: number;
|
|
49
|
+
};
|
|
50
|
+
/** Counters that increment on each derivation execution */
|
|
51
|
+
derivationCalls: {
|
|
52
|
+
tableAttrs: number;
|
|
53
|
+
tableHeadAttrs: number;
|
|
54
|
+
tableBodyAttrs: number;
|
|
55
|
+
visibleColumns: number;
|
|
56
|
+
columnedRows: number;
|
|
57
|
+
rows: number;
|
|
58
|
+
injectedRows: number;
|
|
59
|
+
pageRows: number;
|
|
60
|
+
injectedPageRows: number;
|
|
61
|
+
headerRows: number;
|
|
62
|
+
};
|
|
63
|
+
/** Reset all derivation call counters to 0 */
|
|
64
|
+
resetCounters: () => void;
|
|
65
|
+
/** Get total derivation calls since last reset */
|
|
66
|
+
getTotalCalls: () => number;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* The view model for a table, containing all reactive stores and state.
|
|
70
|
+
* Created by `createViewModel` and used to render the table.
|
|
71
|
+
*
|
|
72
|
+
* @template Item - The type of data items in the table.
|
|
73
|
+
* @template Plugins - The plugins used by the table.
|
|
74
|
+
*/
|
|
14
75
|
export interface TableViewModel<Item, Plugins extends AnyPlugins = AnyPlugins> {
|
|
15
76
|
flatColumns: FlatColumn<Item, Plugins>[];
|
|
16
77
|
tableAttrs: Readable<TableAttributes<Item, Plugins>>;
|
|
@@ -22,17 +83,59 @@ export interface TableViewModel<Item, Plugins extends AnyPlugins = AnyPlugins> {
|
|
|
22
83
|
rows: Readable<DataBodyRow<Item, Plugins>[]>;
|
|
23
84
|
pageRows: Readable<DataBodyRow<Item, Plugins>[]>;
|
|
24
85
|
pluginStates: PluginStates<Plugins>;
|
|
86
|
+
/** Debug information for performance analysis (always available) */
|
|
87
|
+
_debug: ViewModelDebug;
|
|
25
88
|
}
|
|
89
|
+
/**
|
|
90
|
+
* A type that can be either Readable or Writable.
|
|
91
|
+
*
|
|
92
|
+
* @template T - The type of the store value.
|
|
93
|
+
*/
|
|
26
94
|
export type ReadOrWritable<T> = Readable<T> | Writable<T>;
|
|
27
|
-
|
|
95
|
+
/**
|
|
96
|
+
* The table state passed to plugins during initialization.
|
|
97
|
+
* Contains references to all table stores before plugin states are available.
|
|
98
|
+
*
|
|
99
|
+
* @template Item - The type of data items in the table.
|
|
100
|
+
* @template Plugins - The plugins used by the table.
|
|
101
|
+
*/
|
|
102
|
+
export interface PluginInitTableState<Item, Plugins extends AnyPlugins = AnyPlugins> extends Omit<TableViewModel<Item, Plugins>, 'pluginStates' | '_debug'> {
|
|
103
|
+
/** The data source for the table. */
|
|
28
104
|
data: ReadOrWritable<Item[]>;
|
|
105
|
+
/** The column definitions. */
|
|
29
106
|
columns: Column<Item, Plugins>[];
|
|
30
107
|
}
|
|
31
|
-
|
|
108
|
+
/**
|
|
109
|
+
* The complete table state including plugin states.
|
|
110
|
+
* Available to plugins and components after initialization.
|
|
111
|
+
*
|
|
112
|
+
* @template Item - The type of data items in the table.
|
|
113
|
+
* @template Plugins - The plugins used by the table.
|
|
114
|
+
*/
|
|
115
|
+
export interface TableState<Item, Plugins extends AnyPlugins = AnyPlugins> extends Omit<TableViewModel<Item, Plugins>, '_debug'> {
|
|
116
|
+
/** The data source for the table. */
|
|
32
117
|
data: ReadOrWritable<Item[]>;
|
|
118
|
+
/** The column definitions. */
|
|
33
119
|
columns: Column<Item, Plugins>[];
|
|
34
120
|
}
|
|
121
|
+
/**
|
|
122
|
+
* Options for creating a table view model.
|
|
123
|
+
*
|
|
124
|
+
* @template Item - The type of data items in the table.
|
|
125
|
+
*/
|
|
35
126
|
export interface CreateViewModelOptions<Item> {
|
|
127
|
+
/** Optional function to generate a unique ID for each data item. */
|
|
36
128
|
rowDataId?: (item: Item, index: number) => string;
|
|
37
129
|
}
|
|
130
|
+
/**
|
|
131
|
+
* Creates a view model for rendering a table.
|
|
132
|
+
* The view model contains all reactive stores for the table, headers, and rows.
|
|
133
|
+
*
|
|
134
|
+
* @template Item - The type of data items in the table.
|
|
135
|
+
* @template Plugins - The plugins used by the table.
|
|
136
|
+
* @param table - The table instance created by `createTable`.
|
|
137
|
+
* @param columns - The column definitions.
|
|
138
|
+
* @param options - Optional configuration options.
|
|
139
|
+
* @returns A TableViewModel containing all reactive stores for rendering.
|
|
140
|
+
*/
|
|
38
141
|
export declare const createViewModel: <Item, Plugins extends AnyPlugins = AnyPlugins>(table: Table<Item, Plugins>, columns: Column<Item, Plugins>[], { rowDataId }?: CreateViewModelOptions<Item>) => TableViewModel<Item, Plugins>;
|
package/dist/createViewModel.js
CHANGED
|
@@ -4,8 +4,32 @@ import { getHeaderRows, HeaderRow } from './headerRows.js';
|
|
|
4
4
|
import { finalizeAttributes } from './utils/attributes.js';
|
|
5
5
|
import { nonUndefined } from './utils/filter.js';
|
|
6
6
|
import { derived, readable, writable } from 'svelte/store';
|
|
7
|
+
/**
|
|
8
|
+
* Creates a view model for rendering a table.
|
|
9
|
+
* The view model contains all reactive stores for the table, headers, and rows.
|
|
10
|
+
*
|
|
11
|
+
* @template Item - The type of data items in the table.
|
|
12
|
+
* @template Plugins - The plugins used by the table.
|
|
13
|
+
* @param table - The table instance created by `createTable`.
|
|
14
|
+
* @param columns - The column definitions.
|
|
15
|
+
* @param options - Optional configuration options.
|
|
16
|
+
* @returns A TableViewModel containing all reactive stores for rendering.
|
|
17
|
+
*/
|
|
7
18
|
export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
8
19
|
const { data, plugins } = table;
|
|
20
|
+
// Initialize derivation call counters for debug instrumentation
|
|
21
|
+
const derivationCalls = {
|
|
22
|
+
tableAttrs: 0,
|
|
23
|
+
tableHeadAttrs: 0,
|
|
24
|
+
tableBodyAttrs: 0,
|
|
25
|
+
visibleColumns: 0,
|
|
26
|
+
columnedRows: 0,
|
|
27
|
+
rows: 0,
|
|
28
|
+
injectedRows: 0,
|
|
29
|
+
pageRows: 0,
|
|
30
|
+
injectedPageRows: 0,
|
|
31
|
+
headerRows: 0
|
|
32
|
+
};
|
|
9
33
|
const $flatColumns = getFlatColumns(columns);
|
|
10
34
|
const flatColumns = readable($flatColumns);
|
|
11
35
|
const originalRows = derived([data, flatColumns], ([$data, $flatColumns]) => {
|
|
@@ -79,6 +103,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
79
103
|
tableAttrs = fn(tableAttrs);
|
|
80
104
|
});
|
|
81
105
|
const finalizedTableAttrs = derived(tableAttrs, ($tableAttrs) => {
|
|
106
|
+
derivationCalls.tableAttrs++;
|
|
82
107
|
const $finalizedAttrs = finalizeAttributes($tableAttrs);
|
|
83
108
|
_tableAttrs.set($finalizedAttrs);
|
|
84
109
|
return $finalizedAttrs;
|
|
@@ -91,6 +116,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
91
116
|
tableHeadAttrs = fn(tableHeadAttrs);
|
|
92
117
|
});
|
|
93
118
|
const finalizedTableHeadAttrs = derived(tableHeadAttrs, ($tableHeadAttrs) => {
|
|
119
|
+
derivationCalls.tableHeadAttrs++;
|
|
94
120
|
const $finalizedAttrs = finalizeAttributes($tableHeadAttrs);
|
|
95
121
|
_tableHeadAttrs.set($finalizedAttrs);
|
|
96
122
|
return $finalizedAttrs;
|
|
@@ -105,6 +131,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
105
131
|
tableBodyAttrs = fn(tableBodyAttrs);
|
|
106
132
|
});
|
|
107
133
|
const finalizedTableBodyAttrs = derived(tableBodyAttrs, ($tableBodyAttrs) => {
|
|
134
|
+
derivationCalls.tableBodyAttrs++;
|
|
108
135
|
const $finalizedAttrs = finalizeAttributes($tableBodyAttrs);
|
|
109
136
|
_tableBodyAttrs.set($finalizedAttrs);
|
|
110
137
|
return $finalizedAttrs;
|
|
@@ -119,10 +146,12 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
119
146
|
visibleColumns = fn(visibleColumns);
|
|
120
147
|
});
|
|
121
148
|
const injectedColumns = derived(visibleColumns, ($visibleColumns) => {
|
|
149
|
+
derivationCalls.visibleColumns++;
|
|
122
150
|
_visibleColumns.set($visibleColumns);
|
|
123
151
|
return $visibleColumns;
|
|
124
152
|
});
|
|
125
153
|
const columnedRows = derived([originalRows, injectedColumns], ([$originalRows, $injectedColumns]) => {
|
|
154
|
+
derivationCalls.columnedRows++;
|
|
126
155
|
return getColumnedBodyRows($originalRows, $injectedColumns.map((c) => c.id));
|
|
127
156
|
});
|
|
128
157
|
const deriveRowsFns = Object.values(pluginInstances)
|
|
@@ -134,6 +163,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
134
163
|
rows = fn(rows);
|
|
135
164
|
});
|
|
136
165
|
const injectedRows = derived(rows, ($rows) => {
|
|
166
|
+
derivationCalls.injectedRows++;
|
|
137
167
|
// Inject state.
|
|
138
168
|
$rows.forEach((row) => {
|
|
139
169
|
row.injectState(tableState);
|
|
@@ -167,6 +197,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
167
197
|
pageRows = fn(pageRows);
|
|
168
198
|
});
|
|
169
199
|
const injectedPageRows = derived(pageRows, ($pageRows) => {
|
|
200
|
+
derivationCalls.injectedPageRows++;
|
|
170
201
|
// Inject state.
|
|
171
202
|
$pageRows.forEach((row) => {
|
|
172
203
|
row.injectState(tableState);
|
|
@@ -191,6 +222,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
191
222
|
return $pageRows;
|
|
192
223
|
});
|
|
193
224
|
const headerRows = derived(injectedColumns, ($injectedColumns) => {
|
|
225
|
+
derivationCalls.headerRows++;
|
|
194
226
|
const $headerRows = getHeaderRows(columns, $injectedColumns.map((c) => c.id));
|
|
195
227
|
// Inject state.
|
|
196
228
|
$headerRows.forEach((row) => {
|
|
@@ -215,6 +247,27 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
215
247
|
_headerRows.set($headerRows);
|
|
216
248
|
return $headerRows;
|
|
217
249
|
});
|
|
250
|
+
const _debug = {
|
|
251
|
+
pluginCount: Object.keys(plugins).length,
|
|
252
|
+
pluginNames: Object.keys(plugins),
|
|
253
|
+
derivedStoreCount: {
|
|
254
|
+
tableAttrs: deriveTableAttrsFns.length + 1, // +1 for finalized
|
|
255
|
+
tableHeadAttrs: deriveTableHeadAttrsFns.length + 1,
|
|
256
|
+
tableBodyAttrs: deriveTableBodyAttrsFns.length + 1,
|
|
257
|
+
visibleColumns: deriveFlatColumnsFns.length + 1, // +1 for injected
|
|
258
|
+
rows: deriveRowsFns.length + 2, // +2 for columned + injected
|
|
259
|
+
pageRows: derivePageRowsFns.length + 1 // +1 for injected
|
|
260
|
+
},
|
|
261
|
+
derivationCalls,
|
|
262
|
+
resetCounters: () => {
|
|
263
|
+
Object.keys(derivationCalls).forEach((key) => {
|
|
264
|
+
derivationCalls[key] = 0;
|
|
265
|
+
});
|
|
266
|
+
},
|
|
267
|
+
getTotalCalls: () => {
|
|
268
|
+
return Object.values(derivationCalls).reduce((sum, count) => sum + count, 0);
|
|
269
|
+
}
|
|
270
|
+
};
|
|
218
271
|
return {
|
|
219
272
|
tableAttrs: finalizedTableAttrs,
|
|
220
273
|
tableHeadAttrs: finalizedTableHeadAttrs,
|
|
@@ -225,6 +278,7 @@ export const createViewModel = (table, columns, { rowDataId } = {}) => {
|
|
|
225
278
|
originalRows,
|
|
226
279
|
rows: injectedRows,
|
|
227
280
|
pageRows: injectedPageRows,
|
|
228
|
-
pluginStates
|
|
281
|
+
pluginStates,
|
|
282
|
+
_debug
|
|
229
283
|
};
|
|
230
284
|
};
|
package/dist/headerCells.d.ts
CHANGED
|
@@ -2,79 +2,289 @@ import { TableComponent } from './tableComponent.js';
|
|
|
2
2
|
import type { HeaderLabel } from './types/Label.js';
|
|
3
3
|
import type { AnyPlugins } from './types/TablePlugin.js';
|
|
4
4
|
import type { RenderConfig } from '@humanspeak/svelte-render';
|
|
5
|
+
/**
|
|
6
|
+
* Initialization options for creating a HeaderCell.
|
|
7
|
+
*
|
|
8
|
+
* @template Item - The type of data items in the table.
|
|
9
|
+
* @template Plugins - The plugins used by the table.
|
|
10
|
+
*/
|
|
5
11
|
export type HeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = {
|
|
12
|
+
/** Unique identifier for the cell. */
|
|
6
13
|
id: string;
|
|
14
|
+
/** Label content or render function for the header. */
|
|
7
15
|
label: HeaderLabel<Item, Plugins>;
|
|
16
|
+
/** Number of columns this cell spans. */
|
|
8
17
|
colspan: number;
|
|
18
|
+
/** Starting column index. */
|
|
9
19
|
colstart: number;
|
|
10
20
|
};
|
|
21
|
+
/**
|
|
22
|
+
* HTML attributes for a header cell element.
|
|
23
|
+
*
|
|
24
|
+
* @template Item - The type of data items in the table.
|
|
25
|
+
* @template Plugins - The plugins used by the table.
|
|
26
|
+
*/
|
|
11
27
|
export type HeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = {
|
|
12
28
|
role: 'columnheader';
|
|
13
29
|
colspan: number;
|
|
14
30
|
};
|
|
31
|
+
/**
|
|
32
|
+
* Abstract base class representing a cell in the table header.
|
|
33
|
+
* Extended by FlatHeaderCell, DataHeaderCell, GroupHeaderCell, etc.
|
|
34
|
+
*
|
|
35
|
+
* @template Item - The type of data items in the table.
|
|
36
|
+
* @template Plugins - The plugins used by the table.
|
|
37
|
+
*/
|
|
15
38
|
export declare abstract class HeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends TableComponent<Item, Plugins, 'thead.tr.th'> {
|
|
39
|
+
/** Label content or render function for the header. */
|
|
16
40
|
label: HeaderLabel<Item, Plugins>;
|
|
41
|
+
/** Number of columns this cell spans. */
|
|
17
42
|
colspan: number;
|
|
43
|
+
/** Starting column index. */
|
|
18
44
|
colstart: number;
|
|
45
|
+
/**
|
|
46
|
+
* Creates a new HeaderCell.
|
|
47
|
+
*
|
|
48
|
+
* @param init - Initialization options.
|
|
49
|
+
*/
|
|
19
50
|
constructor({ id, label, colspan, colstart }: HeaderCellInit<Item, Plugins>);
|
|
51
|
+
/**
|
|
52
|
+
* Renders the header cell content.
|
|
53
|
+
*
|
|
54
|
+
* @returns The render configuration for displaying this cell.
|
|
55
|
+
* @throws Error if state reference is missing when using a function label.
|
|
56
|
+
*/
|
|
20
57
|
render(): RenderConfig;
|
|
58
|
+
/**
|
|
59
|
+
* Gets the HTML attributes for this header cell.
|
|
60
|
+
*
|
|
61
|
+
* @returns A readable store of cell attributes.
|
|
62
|
+
*/
|
|
21
63
|
attrs(): import("svelte/store").Readable<{
|
|
22
64
|
role: "columnheader";
|
|
23
65
|
colspan: number;
|
|
24
66
|
}>;
|
|
25
67
|
abstract clone(): HeaderCell<Item, Plugins>;
|
|
68
|
+
/**
|
|
69
|
+
* Type guard to check if this is a flat header cell.
|
|
70
|
+
*
|
|
71
|
+
* @returns True if this is a FlatHeaderCell.
|
|
72
|
+
*/
|
|
26
73
|
isFlat(): this is FlatHeaderCell<Item, Plugins>;
|
|
74
|
+
/**
|
|
75
|
+
* Type guard to check if this is a data header cell.
|
|
76
|
+
*
|
|
77
|
+
* @returns True if this is a DataHeaderCell.
|
|
78
|
+
*/
|
|
27
79
|
isData(): this is DataHeaderCell<Item, Plugins>;
|
|
80
|
+
/**
|
|
81
|
+
* Type guard to check if this is a flat display header cell.
|
|
82
|
+
*
|
|
83
|
+
* @returns True if this is a FlatDisplayHeaderCell.
|
|
84
|
+
*/
|
|
28
85
|
isFlatDisplay(): this is FlatDisplayHeaderCell<Item, Plugins>;
|
|
86
|
+
/**
|
|
87
|
+
* Type guard to check if this is a group header cell.
|
|
88
|
+
*
|
|
89
|
+
* @returns True if this is a GroupHeaderCell.
|
|
90
|
+
*/
|
|
29
91
|
isGroup(): this is GroupHeaderCell<Item, Plugins>;
|
|
92
|
+
/**
|
|
93
|
+
* Type guard to check if this is a group display header cell.
|
|
94
|
+
*
|
|
95
|
+
* @returns True if this is a GroupDisplayHeaderCell.
|
|
96
|
+
*/
|
|
30
97
|
isGroupDisplay(): this is GroupDisplayHeaderCell<Item, Plugins>;
|
|
31
98
|
}
|
|
99
|
+
/**
|
|
100
|
+
* Initialization options for a flat (non-grouped) header cell.
|
|
101
|
+
*
|
|
102
|
+
* @template Item - The type of data items in the table.
|
|
103
|
+
* @template Plugins - The plugins used by the table.
|
|
104
|
+
*/
|
|
32
105
|
export type FlatHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'colspan'>;
|
|
106
|
+
/**
|
|
107
|
+
* HTML attributes for a flat header cell element.
|
|
108
|
+
*
|
|
109
|
+
* @template Item - The type of data items in the table.
|
|
110
|
+
* @template Plugins - The plugins used by the table.
|
|
111
|
+
*/
|
|
33
112
|
export type FlatHeaderCellAttributes<Item, Plugins extends AnyPlugins = AnyPlugins> = HeaderCellAttributes<Item, Plugins>;
|
|
113
|
+
/**
|
|
114
|
+
* A flat (non-grouped) header cell that spans a single column.
|
|
115
|
+
* Base class for DataHeaderCell and FlatDisplayHeaderCell.
|
|
116
|
+
*
|
|
117
|
+
* @template Item - The type of data items in the table.
|
|
118
|
+
* @template Plugins - The plugins used by the table.
|
|
119
|
+
*/
|
|
34
120
|
export declare class FlatHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> {
|
|
35
121
|
__flat: boolean;
|
|
122
|
+
/**
|
|
123
|
+
* Creates a new FlatHeaderCell.
|
|
124
|
+
*
|
|
125
|
+
* @param init - Initialization options.
|
|
126
|
+
*/
|
|
36
127
|
constructor({ id, label, colstart }: FlatHeaderCellInit<Item, Plugins>);
|
|
128
|
+
/**
|
|
129
|
+
* Creates a copy of this header cell.
|
|
130
|
+
*
|
|
131
|
+
* @returns A cloned FlatHeaderCell.
|
|
132
|
+
*/
|
|
37
133
|
clone(): FlatHeaderCell<Item, Plugins>;
|
|
38
134
|
}
|
|
135
|
+
/**
|
|
136
|
+
* Initialization options for a data header cell.
|
|
137
|
+
*
|
|
138
|
+
* @template Item - The type of data items in the table.
|
|
139
|
+
* @template Plugins - The plugins used by the table.
|
|
140
|
+
*/
|
|
39
141
|
export type DataHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = FlatHeaderCellInit<Item, Plugins> & {
|
|
142
|
+
/** The key used to access data from the item. */
|
|
40
143
|
accessorKey?: keyof Item;
|
|
144
|
+
/** Function to extract data from the item. */
|
|
41
145
|
accessorFn?: (item: Item) => unknown;
|
|
42
146
|
};
|
|
147
|
+
/**
|
|
148
|
+
* A header cell for a data column that displays values from the data source.
|
|
149
|
+
* Contains accessor information for retrieving cell values.
|
|
150
|
+
*
|
|
151
|
+
* @template Item - The type of data items in the table.
|
|
152
|
+
* @template Plugins - The plugins used by the table.
|
|
153
|
+
*/
|
|
43
154
|
export declare class DataHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> {
|
|
44
155
|
__data: boolean;
|
|
156
|
+
/** The key used to access data from the item. */
|
|
45
157
|
accessorKey?: keyof Item;
|
|
158
|
+
/** Function to extract data from the item. */
|
|
46
159
|
accessorFn?: (item: Item) => unknown;
|
|
160
|
+
/**
|
|
161
|
+
* Creates a new DataHeaderCell.
|
|
162
|
+
*
|
|
163
|
+
* @param init - Initialization options.
|
|
164
|
+
*/
|
|
47
165
|
constructor({ id, label, accessorKey, accessorFn, colstart }: DataHeaderCellInit<Item, Plugins>);
|
|
166
|
+
/**
|
|
167
|
+
* Creates a copy of this header cell.
|
|
168
|
+
*
|
|
169
|
+
* @returns A cloned DataHeaderCell.
|
|
170
|
+
*/
|
|
48
171
|
clone(): DataHeaderCell<Item, Plugins>;
|
|
49
172
|
}
|
|
173
|
+
/**
|
|
174
|
+
* Initialization options for a flat display header cell.
|
|
175
|
+
*
|
|
176
|
+
* @template Item - The type of data items in the table.
|
|
177
|
+
* @template Plugins - The plugins used by the table.
|
|
178
|
+
*/
|
|
50
179
|
export type FlatDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<FlatHeaderCellInit<Item, Plugins>, 'label'> & {
|
|
180
|
+
/** Optional label content (defaults to non-breaking space). */
|
|
51
181
|
label?: HeaderLabel<Item, Plugins>;
|
|
52
182
|
};
|
|
183
|
+
/**
|
|
184
|
+
* A flat header cell for display-only columns (e.g., action columns).
|
|
185
|
+
* Does not contain data accessor information.
|
|
186
|
+
*
|
|
187
|
+
* @template Item - The type of data items in the table.
|
|
188
|
+
* @template Plugins - The plugins used by the table.
|
|
189
|
+
*/
|
|
53
190
|
export declare class FlatDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends FlatHeaderCell<Item, Plugins> {
|
|
54
191
|
__display: boolean;
|
|
192
|
+
/**
|
|
193
|
+
* Creates a new FlatDisplayHeaderCell.
|
|
194
|
+
*
|
|
195
|
+
* @param init - Initialization options.
|
|
196
|
+
*/
|
|
55
197
|
constructor({ id, label, colstart }: FlatDisplayHeaderCellInit<Item, Plugins>);
|
|
198
|
+
/**
|
|
199
|
+
* Creates a copy of this header cell.
|
|
200
|
+
*
|
|
201
|
+
* @returns A cloned FlatDisplayHeaderCell.
|
|
202
|
+
*/
|
|
56
203
|
clone(): FlatDisplayHeaderCell<Item, Plugins>;
|
|
57
204
|
}
|
|
205
|
+
/**
|
|
206
|
+
* Initialization options for a group header cell.
|
|
207
|
+
*
|
|
208
|
+
* @template Item - The type of data items in the table.
|
|
209
|
+
* @template Plugins - The plugins used by the table.
|
|
210
|
+
*/
|
|
58
211
|
export type GroupHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<HeaderCellInit<Item, Plugins>, 'id'> & {
|
|
212
|
+
/** Current column IDs covered by this group. */
|
|
59
213
|
ids: string[];
|
|
214
|
+
/** All column IDs in the original group definition. */
|
|
60
215
|
allIds: string[];
|
|
61
216
|
};
|
|
217
|
+
/**
|
|
218
|
+
* A header cell that spans multiple columns, used for column grouping.
|
|
219
|
+
* Contains information about which columns are part of the group.
|
|
220
|
+
*
|
|
221
|
+
* @template Item - The type of data items in the table.
|
|
222
|
+
* @template Plugins - The plugins used by the table.
|
|
223
|
+
*/
|
|
62
224
|
export declare class GroupHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends HeaderCell<Item, Plugins> {
|
|
63
225
|
__group: boolean;
|
|
226
|
+
/** Current column IDs covered by this group. */
|
|
64
227
|
ids: string[];
|
|
228
|
+
/** Combined ID string for all columns in the original group. */
|
|
65
229
|
allId: string;
|
|
230
|
+
/** All column IDs in the original group definition. */
|
|
66
231
|
allIds: string[];
|
|
232
|
+
/**
|
|
233
|
+
* Creates a new GroupHeaderCell.
|
|
234
|
+
*
|
|
235
|
+
* @param init - Initialization options.
|
|
236
|
+
*/
|
|
67
237
|
constructor({ label, ids, allIds, colspan, colstart }: GroupHeaderCellInit<Item, Plugins>);
|
|
238
|
+
/**
|
|
239
|
+
* Sets the column IDs covered by this group and updates the cell ID.
|
|
240
|
+
*
|
|
241
|
+
* @param ids - The new array of column IDs.
|
|
242
|
+
*/
|
|
68
243
|
setIds(ids: string[]): void;
|
|
244
|
+
/**
|
|
245
|
+
* Adds a column ID to this group and updates the cell ID.
|
|
246
|
+
*
|
|
247
|
+
* @param id - The column ID to add.
|
|
248
|
+
*/
|
|
69
249
|
pushId(id: string): void;
|
|
250
|
+
/**
|
|
251
|
+
* Creates a copy of this header cell.
|
|
252
|
+
*
|
|
253
|
+
* @returns A cloned GroupHeaderCell.
|
|
254
|
+
*/
|
|
70
255
|
clone(): GroupHeaderCell<Item, Plugins>;
|
|
71
256
|
}
|
|
257
|
+
/**
|
|
258
|
+
* Initialization options for a group display header cell.
|
|
259
|
+
*
|
|
260
|
+
* @template Item - The type of data items in the table.
|
|
261
|
+
* @template Plugins - The plugins used by the table.
|
|
262
|
+
*/
|
|
72
263
|
export type GroupDisplayHeaderCellInit<Item, Plugins extends AnyPlugins = AnyPlugins> = Omit<GroupHeaderCellInit<Item, Plugins>, 'label' | 'colspan'> & {
|
|
264
|
+
/** Optional label content (defaults to non-breaking space). */
|
|
73
265
|
label?: HeaderLabel<Item, Plugins>;
|
|
266
|
+
/** Optional colspan (defaults to 1). */
|
|
74
267
|
colspan?: number;
|
|
75
268
|
};
|
|
269
|
+
/**
|
|
270
|
+
* A group header cell for display purposes (e.g., empty group headers).
|
|
271
|
+
* Used to fill gaps in the header row matrix.
|
|
272
|
+
*
|
|
273
|
+
* @template Item - The type of data items in the table.
|
|
274
|
+
* @template Plugins - The plugins used by the table.
|
|
275
|
+
*/
|
|
76
276
|
export declare class GroupDisplayHeaderCell<Item, Plugins extends AnyPlugins = AnyPlugins> extends GroupHeaderCell<Item, Plugins> {
|
|
77
277
|
__display: boolean;
|
|
278
|
+
/**
|
|
279
|
+
* Creates a new GroupDisplayHeaderCell.
|
|
280
|
+
*
|
|
281
|
+
* @param init - Initialization options.
|
|
282
|
+
*/
|
|
78
283
|
constructor({ label, ids, allIds, colspan, colstart }: GroupDisplayHeaderCellInit<Item, Plugins>);
|
|
284
|
+
/**
|
|
285
|
+
* Creates a copy of this header cell.
|
|
286
|
+
*
|
|
287
|
+
* @returns A cloned GroupDisplayHeaderCell.
|
|
288
|
+
*/
|
|
79
289
|
clone(): GroupDisplayHeaderCell<Item, Plugins>;
|
|
80
290
|
}
|