@humanspeak/svelte-headless-table 6.0.1 → 6.0.3

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.
Files changed (78) hide show
  1. package/README.md +2 -2
  2. package/dist/bodyCells.d.ts +116 -0
  3. package/dist/bodyCells.js +80 -0
  4. package/dist/bodyRows.d.ts +92 -0
  5. package/dist/bodyRows.js +55 -0
  6. package/dist/columns.d.ts +204 -0
  7. package/dist/columns.js +120 -0
  8. package/dist/constants.d.ts +4 -0
  9. package/dist/constants.js +4 -0
  10. package/dist/createTable.d.ts +107 -0
  11. package/dist/createTable.js +92 -0
  12. package/dist/createViewModel.d.ts +105 -2
  13. package/dist/createViewModel.js +55 -1
  14. package/dist/headerCells.d.ts +210 -0
  15. package/dist/headerCells.js +151 -0
  16. package/dist/headerRows.d.ts +72 -0
  17. package/dist/headerRows.js +60 -0
  18. package/dist/plugins/addColumnFilters.d.ts +101 -0
  19. package/dist/plugins/addColumnFilters.js +55 -0
  20. package/dist/plugins/addColumnOrder.d.ts +30 -0
  21. package/dist/plugins/addColumnOrder.js +21 -0
  22. package/dist/plugins/addDataExport.d.ts +51 -0
  23. package/dist/plugins/addDataExport.js +30 -0
  24. package/dist/plugins/addExpandedRows.d.ts +43 -2
  25. package/dist/plugins/addExpandedRows.js +48 -2
  26. package/dist/plugins/addFlatten.d.ts +48 -3
  27. package/dist/plugins/addFlatten.js +28 -0
  28. package/dist/plugins/addGridLayout.d.ts +13 -0
  29. package/dist/plugins/addGridLayout.js +13 -0
  30. package/dist/plugins/addGroupBy.d.ts +80 -4
  31. package/dist/plugins/addGroupBy.js +48 -4
  32. package/dist/plugins/addHiddenColumns.d.ts +27 -0
  33. package/dist/plugins/addHiddenColumns.js +19 -0
  34. package/dist/plugins/addPagination.d.ts +54 -0
  35. package/dist/plugins/addPagination.js +29 -0
  36. package/dist/plugins/addResizedColumns.d.ts +58 -4
  37. package/dist/plugins/addResizedColumns.js +33 -0
  38. package/dist/plugins/addSelectedRows.d.ts +60 -2
  39. package/dist/plugins/addSelectedRows.js +67 -2
  40. package/dist/plugins/addSortBy.d.ts +83 -6
  41. package/dist/plugins/addSortBy.js +65 -24
  42. package/dist/plugins/addSubRows.d.ts +39 -1
  43. package/dist/plugins/addSubRows.js +25 -0
  44. package/dist/plugins/addTableFilter.d.ts +87 -3
  45. package/dist/plugins/addTableFilter.js +90 -40
  46. package/dist/plugins/cacheConfig.d.ts +7 -0
  47. package/dist/plugins/cacheConfig.js +11 -0
  48. package/dist/tableComponent.d.ts +41 -0
  49. package/dist/tableComponent.js +37 -0
  50. package/dist/types/Action.d.ts +16 -2
  51. package/dist/types/Entries.d.ts +6 -0
  52. package/dist/types/KeyPath.d.ts +20 -0
  53. package/dist/types/Label.d.ts +26 -3
  54. package/dist/types/Matrix.d.ts +6 -0
  55. package/dist/types/TablePlugin.d.ts +140 -10
  56. package/dist/utils/array.d.ts +24 -0
  57. package/dist/utils/array.js +24 -0
  58. package/dist/utils/attributes.d.ts +31 -0
  59. package/dist/utils/attributes.js +31 -0
  60. package/dist/utils/clone.d.ts +19 -0
  61. package/dist/utils/clone.js +13 -0
  62. package/dist/utils/compare.d.ts +29 -0
  63. package/dist/utils/compare.js +29 -0
  64. package/dist/utils/counter.d.ts +12 -0
  65. package/dist/utils/counter.js +12 -0
  66. package/dist/utils/css.d.ts +11 -0
  67. package/dist/utils/css.js +11 -0
  68. package/dist/utils/event.d.ts +14 -0
  69. package/dist/utils/event.js +14 -0
  70. package/dist/utils/filter.d.ts +47 -0
  71. package/dist/utils/filter.js +47 -0
  72. package/dist/utils/math.d.ts +22 -0
  73. package/dist/utils/math.js +22 -0
  74. package/dist/utils/matrix.d.ts +24 -0
  75. package/dist/utils/matrix.js +24 -0
  76. package/dist/utils/store.d.ts +116 -9
  77. package/dist/utils/store.js +63 -0
  78. package/package.json +31 -30
@@ -1,5 +1,9 @@
1
1
  import { keyed } from '@humanspeak/svelte-keyed';
2
2
  import { derived, writable } from 'svelte/store';
3
+ /**
4
+ * Filters rows based on column filter values.
5
+ * @internal
6
+ */
3
7
  const getFilteredRows = (rows, filterValues, columnOptions) => {
4
8
  const $filteredRows = rows
5
9
  // Filter `subRows`
@@ -36,6 +40,31 @@ const getFilteredRows = (rows, filterValues, columnOptions) => {
36
40
  });
37
41
  return $filteredRows;
38
42
  };
43
+ /**
44
+ * Creates a column filters plugin that enables per-column filtering with custom filter functions.
45
+ *
46
+ * @template Item - The type of data items in the table.
47
+ * @param config - Configuration options.
48
+ * @returns A TablePlugin that provides column filtering functionality.
49
+ * @example
50
+ * ```typescript
51
+ * const table = createTable(data, {
52
+ * colFilter: addColumnFilters()
53
+ * })
54
+ *
55
+ * // Configure per-column in column definitions:
56
+ * table.column({
57
+ * accessor: 'status',
58
+ * header: 'Status',
59
+ * plugins: {
60
+ * colFilter: {
61
+ * fn: matchFilter,
62
+ * initialFilterValue: undefined
63
+ * }
64
+ * }
65
+ * })
66
+ * ```
67
+ */
39
68
  export const addColumnFilters = ({ serverSide = false } = {}) => ({ columnOptions, tableState }) => {
40
69
  const filterValues = writable({});
41
70
  const preFilteredRows = writable([]);
@@ -100,18 +129,44 @@ export const addColumnFilters = ({ serverSide = false } = {}) => ({ columnOption
100
129
  }
101
130
  };
102
131
  };
132
+ /**
133
+ * A filter function that matches exact values.
134
+ * Returns true if filterValue is undefined or equals the cell value.
135
+ *
136
+ * @param props - The filter props containing filterValue and value.
137
+ * @returns True if the value matches the filter.
138
+ */
103
139
  export const matchFilter = ({ filterValue, value }) => {
104
140
  if (filterValue === undefined) {
105
141
  return true;
106
142
  }
107
143
  return filterValue === value;
108
144
  };
145
+ /**
146
+ * A filter function that matches text by prefix (case-insensitive).
147
+ * Returns true if filterValue is empty or value starts with filterValue.
148
+ *
149
+ * @param props - The filter props containing filterValue and value.
150
+ * @returns True if the value starts with the filter text.
151
+ */
109
152
  export const textPrefixFilter = ({ filterValue, value }) => {
110
153
  if (filterValue === '') {
111
154
  return true;
112
155
  }
113
156
  return String(value).toLowerCase().startsWith(String(filterValue).toLowerCase());
114
157
  };
158
+ /**
159
+ * A filter function that matches numbers within a range.
160
+ * The range is [min, max] inclusive. Use null for unbounded.
161
+ *
162
+ * @param props - The filter props with a [min, max] filterValue and numeric value.
163
+ * @returns True if the value is within the specified range.
164
+ * @example
165
+ * ```typescript
166
+ * numberRangeFilter({ filterValue: [10, 50], value: 25 }) // true
167
+ * numberRangeFilter({ filterValue: [null, 100], value: 50 }) // true (no min)
168
+ * ```
169
+ */
115
170
  export const numberRangeFilter = ({ filterValue: [min, max], value }) => {
116
171
  return (min ?? -Infinity) <= value && value <= (max ?? Infinity);
117
172
  };
@@ -1,10 +1,40 @@
1
1
  import { type Writable } from 'svelte/store';
2
2
  import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
3
+ /**
4
+ * Configuration options for the addColumnOrder plugin.
5
+ */
3
6
  export interface ColumnOrderConfig {
7
+ /** Initial order of column IDs. Columns are ordered in this sequence. */
4
8
  initialColumnIdOrder?: string[];
9
+ /** If true, columns not in the order list are hidden. Defaults to false. */
5
10
  hideUnspecifiedColumns?: boolean;
6
11
  }
12
+ /**
13
+ * State exposed by the addColumnOrder plugin.
14
+ */
7
15
  export interface ColumnOrderState {
16
+ /** Writable store containing the ordered list of column IDs. */
8
17
  columnIdOrder: Writable<string[]>;
9
18
  }
19
+ /**
20
+ * Creates a column order plugin that enables reordering table columns.
21
+ * Columns are displayed in the order specified by columnIdOrder.
22
+ *
23
+ * @template Item - The type of data items in the table.
24
+ * @param config - Configuration options.
25
+ * @returns A TablePlugin that provides column ordering functionality.
26
+ * @example
27
+ * ```typescript
28
+ * const table = createTable(data, {
29
+ * order: addColumnOrder({
30
+ * initialColumnIdOrder: ['name', 'age', 'email'],
31
+ * hideUnspecifiedColumns: false
32
+ * })
33
+ * })
34
+ *
35
+ * // Reorder columns dynamically
36
+ * const { columnIdOrder } = table.pluginStates.order
37
+ * columnIdOrder.set(['email', 'name', 'age'])
38
+ * ```
39
+ */
10
40
  export declare const addColumnOrder: <Item>({ initialColumnIdOrder, hideUnspecifiedColumns }?: ColumnOrderConfig) => TablePlugin<Item, ColumnOrderState, Record<string, never>, NewTablePropSet<never>>;
@@ -1,4 +1,25 @@
1
1
  import { derived, writable } from 'svelte/store';
2
+ /**
3
+ * Creates a column order plugin that enables reordering table columns.
4
+ * Columns are displayed in the order specified by columnIdOrder.
5
+ *
6
+ * @template Item - The type of data items in the table.
7
+ * @param config - Configuration options.
8
+ * @returns A TablePlugin that provides column ordering functionality.
9
+ * @example
10
+ * ```typescript
11
+ * const table = createTable(data, {
12
+ * order: addColumnOrder({
13
+ * initialColumnIdOrder: ['name', 'age', 'email'],
14
+ * hideUnspecifiedColumns: false
15
+ * })
16
+ * })
17
+ *
18
+ * // Reorder columns dynamically
19
+ * const { columnIdOrder } = table.pluginStates.order
20
+ * columnIdOrder.set(['email', 'name', 'age'])
21
+ * ```
22
+ */
2
23
  export const addColumnOrder = ({ initialColumnIdOrder = [], hideUnspecifiedColumns = false } = {}) => () => {
3
24
  const columnIdOrder = writable(initialColumnIdOrder);
4
25
  const pluginState = { columnIdOrder };
@@ -1,21 +1,72 @@
1
1
  import { type Readable } from 'svelte/store';
2
2
  import type { TablePlugin } from '../types/TablePlugin.js';
3
+ /**
4
+ * Supported export formats for the data export plugin.
5
+ */
3
6
  export type DataExportFormat = 'object' | 'json' | 'csv';
7
+ /**
8
+ * Maps export formats to their output types.
9
+ * @internal
10
+ */
4
11
  type ExportForFormat = {
5
12
  object: Record<string, unknown>[];
6
13
  json: string;
7
14
  csv: string;
8
15
  };
16
+ /**
17
+ * The export output type based on the format.
18
+ *
19
+ * @template F - The export format.
20
+ */
9
21
  export type DataExport<F extends DataExportFormat> = ExportForFormat[F];
22
+ /**
23
+ * Configuration options for the addDataExport plugin.
24
+ *
25
+ * @template F - The export format type.
26
+ */
10
27
  export interface DataExportConfig<F extends DataExportFormat> {
28
+ /** Key used for nested children in hierarchical exports. Defaults to 'children'. */
11
29
  childrenKey?: string;
30
+ /** Export format: 'object', 'json', or 'csv'. Defaults to 'object'. */
12
31
  format?: F;
13
32
  }
33
+ /**
34
+ * State exposed by the addDataExport plugin.
35
+ *
36
+ * @template F - The export format type.
37
+ */
14
38
  export interface DataExportState<F extends DataExportFormat> {
39
+ /** Readable store containing the exported data in the specified format. */
15
40
  exportedData: Readable<DataExport<F>>;
16
41
  }
42
+ /**
43
+ * Per-column configuration options for data export.
44
+ */
17
45
  export interface DataExportColumnOptions {
46
+ /** If true, this column is excluded from exports. */
18
47
  exclude?: boolean;
19
48
  }
49
+ /**
50
+ * Creates a data export plugin that provides reactive exports of table data.
51
+ * Supports exporting to objects, JSON, or CSV formats.
52
+ *
53
+ * @template Item - The type of data items in the table.
54
+ * @template F - The export format type.
55
+ * @param config - Configuration options.
56
+ * @returns A TablePlugin that provides data export functionality.
57
+ * @example
58
+ * ```typescript
59
+ * const table = createTable(data, {
60
+ * export: addDataExport({
61
+ * format: 'csv',
62
+ * childrenKey: 'subItems'
63
+ * })
64
+ * })
65
+ *
66
+ * // Access exported data
67
+ * const { exportedData } = table.pluginStates.export
68
+ * $: csvData = $exportedData
69
+ * ```
70
+ */
20
71
  export declare const addDataExport: <Item, F extends DataExportFormat = "object">({ format, childrenKey }?: DataExportConfig<F>) => TablePlugin<Item, DataExportState<F>, DataExportColumnOptions>;
21
72
  export {};
@@ -1,5 +1,9 @@
1
1
  import { derived, get } from 'svelte/store';
2
2
  import { isReadable } from '../utils/store.js';
3
+ /**
4
+ * Converts rows to an array of plain objects.
5
+ * @internal
6
+ */
3
7
  const getObjectsFromRows = (rows, ids, childrenKey) => {
4
8
  return rows.map((row) => {
5
9
  const dataObject = Object.fromEntries(ids.map((id) => {
@@ -22,6 +26,10 @@ const getObjectsFromRows = (rows, ids, childrenKey) => {
22
26
  return dataObject;
23
27
  });
24
28
  };
29
+ /**
30
+ * Converts rows to CSV format.
31
+ * @internal
32
+ */
25
33
  const getCsvFromRows = (rows, ids) => {
26
34
  const dataLines = rows.map((row) => {
27
35
  const line = ids.map((id) => {
@@ -43,6 +51,28 @@ const getCsvFromRows = (rows, ids) => {
43
51
  const headerLine = ids.join(',');
44
52
  return headerLine + '\n' + dataLines.join('\n');
45
53
  };
54
+ /**
55
+ * Creates a data export plugin that provides reactive exports of table data.
56
+ * Supports exporting to objects, JSON, or CSV formats.
57
+ *
58
+ * @template Item - The type of data items in the table.
59
+ * @template F - The export format type.
60
+ * @param config - Configuration options.
61
+ * @returns A TablePlugin that provides data export functionality.
62
+ * @example
63
+ * ```typescript
64
+ * const table = createTable(data, {
65
+ * export: addDataExport({
66
+ * format: 'csv',
67
+ * childrenKey: 'subItems'
68
+ * })
69
+ * })
70
+ *
71
+ * // Access exported data
72
+ * const { exportedData } = table.pluginStates.export
73
+ * $: csvData = $exportedData
74
+ * ```
75
+ */
46
76
  export const addDataExport = ({ format = 'object', childrenKey = 'children' } = {}) => ({ tableState, columnOptions }) => {
47
77
  const excludedIds = Object.entries(columnOptions)
48
78
  .filter(([, option]) => option.exclude === true)
@@ -2,16 +2,57 @@ import { type Readable, type Writable } from 'svelte/store';
2
2
  import type { BodyRow } from '../bodyRows.js';
3
3
  import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
4
4
  import { type RecordSetStore } from '../utils/store.js';
5
- export interface ExpandedRowsConfig<Item> {
5
+ /**
6
+ * Configuration options for the addExpandedRows plugin.
7
+ *
8
+ * @template _Item - The type of data items (unused but required for type inference).
9
+ */
10
+ export interface ExpandedRowsConfig<_Item> {
11
+ /** Initial expanded state keyed by row ID. */
6
12
  initialExpandedIds?: Record<string, boolean>;
7
13
  }
14
+ /**
15
+ * State exposed by the addExpandedRows plugin.
16
+ *
17
+ * @template Item - The type of data items in the table.
18
+ */
8
19
  export interface ExpandedRowsState<Item> {
20
+ /** Store containing expanded row IDs. */
9
21
  expandedIds: RecordSetStore<string>;
10
- getRowState: (row: BodyRow<Item>) => ExpandedRowsRowState;
22
+ /** Gets the expansion state stores for a specific row. */
23
+ getRowState: (_row: BodyRow<Item>) => ExpandedRowsRowState;
24
+ /** Cleans up internal subscriptions and clears the row state cache. Call when destroying the table. */
25
+ invalidate: () => void;
11
26
  }
27
+ /**
28
+ * Expansion state for a single row.
29
+ */
12
30
  export interface ExpandedRowsRowState {
31
+ /** Writable store for the row's expanded state. */
13
32
  isExpanded: Writable<boolean>;
33
+ /** Readable store indicating if this row can be expanded (has sub-rows). */
14
34
  canExpand: Readable<boolean>;
35
+ /** Readable store indicating if all expandable sub-rows are expanded. */
15
36
  isAllSubRowsExpanded: Readable<boolean>;
16
37
  }
38
+ /**
39
+ * Creates an expanded rows plugin that enables expanding/collapsing rows with sub-rows.
40
+ * When a row is expanded, its sub-rows are included in the flattened row list.
41
+ *
42
+ * @template Item - The type of data items in the table.
43
+ * @param config - Configuration options.
44
+ * @returns A TablePlugin that provides row expansion functionality.
45
+ * @example
46
+ * ```typescript
47
+ * const table = createTable(data, {
48
+ * expand: addExpandedRows({
49
+ * initialExpandedIds: { '0': true } // Row 0 starts expanded
50
+ * })
51
+ * })
52
+ *
53
+ * // Toggle expansion
54
+ * const rowState = table.pluginStates.expand.getRowState(row)
55
+ * rowState.isExpanded.update(v => !v)
56
+ * ```
57
+ */
17
58
  export declare const addExpandedRows: <Item>({ initialExpandedIds }?: ExpandedRowsConfig<Item>) => TablePlugin<Item, ExpandedRowsState<Item>, Record<string, never>, NewTablePropSet<never>>;
@@ -1,6 +1,12 @@
1
+ import { MemoryCache } from '@humanspeak/memory-cache';
1
2
  import { keyed } from '@humanspeak/svelte-keyed';
2
3
  import { derived, readable } from 'svelte/store';
3
4
  import { recordSetStore } from '../utils/store.js';
5
+ import { DEFAULT_ROW_STATE_CACHE_CONFIG } from './cacheConfig.js';
6
+ /**
7
+ * Recursively expands rows based on the expanded IDs map.
8
+ * @internal
9
+ */
4
10
  const withExpandedRows = (row, expandedIds) => {
5
11
  if (row.subRows === undefined) {
6
12
  return [row];
@@ -11,9 +17,36 @@ const withExpandedRows = (row, expandedIds) => {
11
17
  const expandedSubRows = row.subRows.flatMap((subRow) => withExpandedRows(subRow, expandedIds));
12
18
  return [row, ...expandedSubRows];
13
19
  };
20
+ /**
21
+ * Creates an expanded rows plugin that enables expanding/collapsing rows with sub-rows.
22
+ * When a row is expanded, its sub-rows are included in the flattened row list.
23
+ *
24
+ * @template Item - The type of data items in the table.
25
+ * @param config - Configuration options.
26
+ * @returns A TablePlugin that provides row expansion functionality.
27
+ * @example
28
+ * ```typescript
29
+ * const table = createTable(data, {
30
+ * expand: addExpandedRows({
31
+ * initialExpandedIds: { '0': true } // Row 0 starts expanded
32
+ * })
33
+ * })
34
+ *
35
+ * // Toggle expansion
36
+ * const rowState = table.pluginStates.expand.getRowState(row)
37
+ * rowState.isExpanded.update(v => !v)
38
+ * ```
39
+ */
14
40
  export const addExpandedRows = ({ initialExpandedIds = {} } = {}) => () => {
15
41
  const expandedIds = recordSetStore(initialExpandedIds);
42
+ // LRU cache for memoized row state with automatic eviction.
43
+ // Prevents unbounded memory growth when row identities change.
44
+ const rowStateCache = new MemoryCache(DEFAULT_ROW_STATE_CACHE_CONFIG);
16
45
  const getRowState = (row) => {
46
+ const cached = rowStateCache.get(row.id);
47
+ if (cached !== undefined) {
48
+ return cached;
49
+ }
17
50
  const isExpanded = keyed(expandedIds, row.id);
18
51
  const canExpand = readable((row.subRows?.length ?? 0) > 0);
19
52
  const subRowExpandedIds = derived(expandedIds, ($expandedIds) => {
@@ -30,13 +63,26 @@ export const addExpandedRows = ({ initialExpandedIds = {} } = {}) => () => {
30
63
  const expandableSubRows = row.subRows.filter((subRow) => subRow.subRows !== undefined);
31
64
  return $subRowExpandedIds.length === expandableSubRows.length;
32
65
  });
33
- return {
66
+ const state = {
34
67
  isExpanded,
35
68
  canExpand,
36
69
  isAllSubRowsExpanded
37
70
  };
71
+ rowStateCache.set(row.id, state);
72
+ return state;
38
73
  };
39
- const pluginState = { expandedIds, getRowState };
74
+ // Clear cache when expandedIds store is cleared (data reset scenario)
75
+ const unsubscribeExpandedIds = expandedIds.subscribe(($expandedIds) => {
76
+ if (Object.keys($expandedIds).length === 0) {
77
+ rowStateCache.clear();
78
+ }
79
+ });
80
+ // Cleanup function to prevent subscription leaks when table is destroyed
81
+ const invalidate = () => {
82
+ unsubscribeExpandedIds();
83
+ rowStateCache.clear();
84
+ };
85
+ const pluginState = { expandedIds, getRowState, invalidate };
40
86
  const deriveRows = (rows) => {
41
87
  return derived([rows, expandedIds], ([$rows, $expandedIds]) => {
42
88
  return $rows.flatMap((row) => {
@@ -1,19 +1,64 @@
1
1
  import { type Writable } from 'svelte/store';
2
2
  import type { BodyRow } from '../bodyRows.js';
3
3
  import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
4
+ /**
5
+ * Configuration options for the addFlatten plugin.
6
+ */
4
7
  export interface FlattenConfig {
8
+ /** Initial depth to flatten. 0 means no flattening. Defaults to 0. */
5
9
  initialDepth?: number;
6
10
  }
11
+ /**
12
+ * State exposed by the addFlatten plugin.
13
+ */
7
14
  export interface FlattenState {
15
+ /** Writable store for the current flatten depth. */
8
16
  depth: Writable<number>;
9
17
  }
10
- export interface FlattenColumnOptions<Item> extends Record<string, never> {
11
- }
18
+ /**
19
+ * Column options for the flatten plugin (currently empty).
20
+ *
21
+ * @template _Item - The type of data items (unused).
22
+ */
23
+ export type FlattenColumnOptions<_Item> = Record<string, never>;
24
+ /**
25
+ * Props added to table cells by the flatten plugin.
26
+ */
12
27
  export type FlattenPropSet = NewTablePropSet<{
13
28
  'tbody.tr.td': {
14
- flatten: (depth: number) => void;
29
+ /** Function to set the flatten depth. */
30
+ flatten: (_depth: number) => void;
31
+ /** Function to reset flattening (set depth to 0). */
15
32
  unflatten: () => void;
16
33
  };
17
34
  }>;
35
+ /**
36
+ * Recursively extracts rows at a specific depth from the hierarchy.
37
+ *
38
+ * @template Item - The type of data items.
39
+ * @template Row - The row type.
40
+ * @param rows - The rows to flatten.
41
+ * @param depth - The depth to extract (0 returns current level).
42
+ * @returns The flattened rows array.
43
+ */
18
44
  export declare const getFlattenedRows: <Item, Row extends BodyRow<Item>>(rows: Row[], depth: number) => Row[];
45
+ /**
46
+ * Creates a flatten plugin that enables displaying rows at a specific depth level.
47
+ * Useful for showing only leaf nodes or a specific level of hierarchical data.
48
+ *
49
+ * @template Item - The type of data items in the table.
50
+ * @param config - Configuration options.
51
+ * @returns A TablePlugin that provides flattening functionality.
52
+ * @example
53
+ * ```typescript
54
+ * const table = createTable(data, {
55
+ * flatten: addFlatten({
56
+ * initialDepth: 0 // Start with no flattening
57
+ * })
58
+ * })
59
+ *
60
+ * // Flatten to show only first-level children
61
+ * table.pluginStates.flatten.depth.set(1)
62
+ * ```
63
+ */
19
64
  export declare const addFlatten: <Item>({ initialDepth }?: FlattenConfig) => TablePlugin<Item, FlattenState, FlattenColumnOptions<Item>, FlattenPropSet>;
@@ -1,4 +1,13 @@
1
1
  import { derived, writable } from 'svelte/store';
2
+ /**
3
+ * Recursively extracts rows at a specific depth from the hierarchy.
4
+ *
5
+ * @template Item - The type of data items.
6
+ * @template Row - The row type.
7
+ * @param rows - The rows to flatten.
8
+ * @param depth - The depth to extract (0 returns current level).
9
+ * @returns The flattened rows array.
10
+ */
2
11
  export const getFlattenedRows = (rows, depth) => {
3
12
  if (depth === 0)
4
13
  return rows;
@@ -11,6 +20,25 @@ export const getFlattenedRows = (rows, depth) => {
11
20
  }
12
21
  return flattenedRows;
13
22
  };
23
+ /**
24
+ * Creates a flatten plugin that enables displaying rows at a specific depth level.
25
+ * Useful for showing only leaf nodes or a specific level of hierarchical data.
26
+ *
27
+ * @template Item - The type of data items in the table.
28
+ * @param config - Configuration options.
29
+ * @returns A TablePlugin that provides flattening functionality.
30
+ * @example
31
+ * ```typescript
32
+ * const table = createTable(data, {
33
+ * flatten: addFlatten({
34
+ * initialDepth: 0 // Start with no flattening
35
+ * })
36
+ * })
37
+ *
38
+ * // Flatten to show only first-level children
39
+ * table.pluginStates.flatten.depth.set(1)
40
+ * ```
41
+ */
14
42
  export const addFlatten = ({ initialDepth = 0 } = {}) => () => {
15
43
  const depth = writable(initialDepth);
16
44
  const pluginState = { depth };
@@ -1,2 +1,15 @@
1
1
  import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
2
+ /**
3
+ * Creates a grid layout plugin that renders the table using CSS Grid.
4
+ * This allows for more flexible layouts and better handling of complex headers.
5
+ *
6
+ * @template Item - The type of data items in the table.
7
+ * @returns A TablePlugin that applies CSS Grid layout to the table.
8
+ * @example
9
+ * ```typescript
10
+ * const table = createTable(data, {
11
+ * grid: addGridLayout()
12
+ * })
13
+ * ```
14
+ */
2
15
  export declare const addGridLayout: <Item>() => TablePlugin<Item, Record<string, never>, Record<string, never>, NewTablePropSet<never>>;
@@ -1,4 +1,17 @@
1
1
  import { derived } from 'svelte/store';
2
+ /**
3
+ * Creates a grid layout plugin that renders the table using CSS Grid.
4
+ * This allows for more flexible layouts and better handling of complex headers.
5
+ *
6
+ * @template Item - The type of data items in the table.
7
+ * @returns A TablePlugin that applies CSS Grid layout to the table.
8
+ * @example
9
+ * ```typescript
10
+ * const table = createTable(data, {
11
+ * grid: addGridLayout()
12
+ * })
13
+ * ```
14
+ */
2
15
  export const addGridLayout = () => ({ tableState }) => {
3
16
  const pluginState = {};
4
17
  const deriveTableAttrs = (attrs) => {
@@ -2,39 +2,115 @@ import { BodyRow } from '../bodyRows.js';
2
2
  import type { DataLabel } from '../types/Label.js';
3
3
  import type { NewTablePropSet, TablePlugin } from '../types/TablePlugin.js';
4
4
  import { type ArraySetStore } from '../utils/store.js';
5
+ /**
6
+ * Configuration options for the addGroupBy plugin.
7
+ */
5
8
  export interface GroupByConfig {
9
+ /** Initial list of column IDs to group by. */
6
10
  initialGroupByIds?: string[];
11
+ /** If true, prevents grouping by multiple columns. Defaults to false. */
7
12
  disableMultiGroup?: boolean;
8
- isMultiGroupEvent?: (event: Event) => boolean;
13
+ /** Function to detect multi-group events (e.g., shift+click). Defaults to isShiftClick. */
14
+ isMultiGroupEvent?: (_event: Event) => boolean;
9
15
  }
16
+ /**
17
+ * State exposed by the addGroupBy plugin.
18
+ */
10
19
  export interface GroupByState {
20
+ /** Store containing the list of column IDs to group by. */
11
21
  groupByIds: ArraySetStore<string>;
12
22
  }
23
+ /**
24
+ * Per-column configuration options for grouping.
25
+ *
26
+ * @template Item - The type of data items.
27
+ * @template Value - The type of the cell value.
28
+ * @template GroupOn - The type to group on (must be string or number).
29
+ * @template Aggregate - The type of the aggregated value.
30
+ */
13
31
  export interface GroupByColumnOptions<Item, Value = any, GroupOn extends string | number = any, Aggregate = any> {
32
+ /** If true, grouping is disabled for this column. */
14
33
  disable?: boolean;
15
- getAggregateValue?: (values: GroupOn[]) => Aggregate;
16
- getGroupOn?: (value: Value) => GroupOn;
34
+ /** Function to compute an aggregate value from grouped values. */
35
+ getAggregateValue?: (_values: GroupOn[]) => Aggregate;
36
+ /** Function to extract the grouping key from a cell value. */
37
+ getGroupOn?: (_value: Value) => GroupOn;
38
+ /** Custom cell renderer for grouped rows. */
17
39
  cell?: DataLabel<Item>;
18
40
  }
41
+ /**
42
+ * Props added to table elements by the group by plugin.
43
+ */
19
44
  export type GroupByPropSet = NewTablePropSet<{
20
45
  'thead.tr.th': {
46
+ /** Whether this column is currently grouped. */
21
47
  grouped: boolean;
22
- toggle: (event: Event) => void;
48
+ /** Function to toggle grouping on this column. */
49
+ toggle: (_event: Event) => void;
50
+ /** Function to clear grouping on this column. */
23
51
  clear: () => void;
52
+ /** Whether grouping is disabled for this column. */
24
53
  disabled: boolean;
25
54
  };
26
55
  'tbody.tr.td': {
56
+ /** Whether this cell is a repeated group value (not the first in group). */
27
57
  repeated: boolean;
58
+ /** Whether this cell displays an aggregated value. */
28
59
  aggregated: boolean;
60
+ /** Whether this cell is the primary grouped column. */
29
61
  grouped: boolean;
30
62
  };
31
63
  }>;
64
+ /**
65
+ * Internal options for getGroupedRows.
66
+ * @internal
67
+ */
32
68
  interface GetGroupedRowsProps {
33
69
  repeatCellIds: Record<string, boolean>;
34
70
  aggregateCellIds: Record<string, boolean>;
35
71
  groupCellIds: Record<string, boolean>;
36
72
  allGroupByIds: string[];
37
73
  }
74
+ /**
75
+ * Groups rows by the specified column IDs, creating hierarchical grouped rows.
76
+ * Computes aggregate values for non-grouped columns.
77
+ *
78
+ * @template Item - The type of data items.
79
+ * @template Row - The row type.
80
+ * @template GroupOn - The grouping key type.
81
+ * @param rows - The rows to group.
82
+ * @param groupByIds - Column IDs to group by, in order.
83
+ * @param columnOptions - Per-column grouping configuration.
84
+ * @param props - Internal state tracking objects.
85
+ * @returns The grouped rows array.
86
+ */
38
87
  export declare const getGroupedRows: <Item, Row extends BodyRow<Item>, GroupOn extends string | number = any>(rows: Row[], groupByIds: string[], columnOptions: Record<string, GroupByColumnOptions<Item>>, { repeatCellIds, aggregateCellIds, groupCellIds, allGroupByIds }: GetGroupedRowsProps) => Row[];
88
+ /**
89
+ * Creates a group by plugin that enables grouping rows by column values.
90
+ * Groups are hierarchical - grouping by multiple columns creates nested groups.
91
+ *
92
+ * @template Item - The type of data items in the table.
93
+ * @param config - Configuration options.
94
+ * @returns A TablePlugin that provides grouping functionality.
95
+ * @example
96
+ * ```typescript
97
+ * const table = createTable(data, {
98
+ * group: addGroupBy({
99
+ * initialGroupByIds: ['department']
100
+ * })
101
+ * })
102
+ *
103
+ * // Configure aggregation for columns
104
+ * table.column({
105
+ * accessor: 'salary',
106
+ * header: 'Salary',
107
+ * plugins: {
108
+ * group: {
109
+ * getAggregateValue: (values) => values.reduce((a, b) => a + b, 0)
110
+ * }
111
+ * }
112
+ * })
113
+ * ```
114
+ */
39
115
  export declare const addGroupBy: <Item>({ initialGroupByIds, disableMultiGroup, isMultiGroupEvent }?: GroupByConfig) => TablePlugin<Item, GroupByState, GroupByColumnOptions<Item>, GroupByPropSet>;
40
116
  export {};