@guiexpert/table 1.1.90 → 1.1.92
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 +8 -2
- package/css/main.css +129 -4
- package/css/table-classes.css +93 -0
- package/css/table-color-classes.css +3 -1
- package/css/table-color-vars.css +20 -2
- package/css/table-tree.css +13 -1
- package/index.cjs +111 -96
- package/index.d.ts +203 -184
- package/index.js +4927 -2096
- package/lib/common/debounce.d.ts +1 -0
- package/lib/common/decorator/avoid-double-execution.decorator.d.ts +2 -0
- package/lib/common/escape-html.d.ts +22 -0
- package/lib/common/generator/column-def-generator-service.d.ts +2 -1
- package/lib/common/generator/domain/property-type.d.ts +19 -0
- package/lib/common/generator/domain/value-info.d.ts +2 -1
- package/lib/common/generator/json-service.d.ts +1 -0
- package/lib/common/generator/property-type.service.d.ts +3 -2
- package/lib/common/generator/scheme-generator-service.d.ts +3 -1
- package/lib/common/generator/string-util.d.ts +7 -0
- package/lib/common/throttle.d.ts +1 -0
- package/lib/table/action/action-id.type.d.ts +5 -1
- package/lib/table/action/on-action-triggered.if.d.ts +2 -1
- package/lib/table/action/osx-shortcut-actionId-mapping.d.ts +3 -1
- package/lib/table/action/shortcut-actionid-mapping.type.d.ts +3 -1
- package/lib/table/action/shortcut-util.d.ts +12 -0
- package/lib/table/action/shortcut.service.d.ts +5 -3
- package/lib/table/action/windows-shortcut-actionId-mapping.d.ts +3 -1
- package/lib/table/aria/aria-grid-info.d.ts +76 -0
- package/lib/table/aria/aria-ids.d.ts +56 -0
- package/lib/table/aria/aria-texts.d.ts +34 -0
- package/lib/table/aria/aria-texts.if.d.ts +88 -0
- package/lib/table/aria/live-announcer.d.ts +62 -0
- package/lib/table/aria/tree-aria-info.d.ts +58 -0
- package/lib/table/checkbox/all-rows-checkbox-model.d.ts +31 -0
- package/lib/table/checkbox/checkbox-model.d.ts +3 -2
- package/lib/table/checkbox/checkbox-model.if.d.ts +2 -1
- package/lib/table/checkbox/tree-checkbox-model.d.ts +19 -4
- package/lib/table/color/color-rgb.d.ts +2 -1
- package/lib/table/color/color-rgb.if.d.ts +2 -0
- package/lib/table/color/ge-css-color-util.d.ts +25 -2
- package/lib/table/color/three-color-gradient-arg.d.ts +3 -2
- package/lib/table/color/three-color-gradient-arg.if.d.ts +3 -1
- package/lib/table/color/two-color-gradient-arg.d.ts +3 -2
- package/lib/table/color/two-color-gradient-arg.if.d.ts +3 -1
- package/lib/table/crud/column-widths.d.ts +2 -1
- package/lib/table/crud/column-widths.if.d.ts +1 -0
- package/lib/table/crud/crud-action.d.ts +1 -0
- package/lib/table/crud/crud-object-edit.d.ts +25 -3
- package/lib/table/crud/crud-object-view.d.ts +6 -0
- package/lib/table/crud/crud-options.d.ts +35 -4
- package/lib/table/crud/crud-options.if.d.ts +3 -2
- package/lib/table/crud/crud-table-model-factory.d.ts +72 -8
- package/lib/table/crud/url-info.d.ts +2 -1
- package/lib/table/crud/url-info.if.d.ts +1 -0
- package/lib/table/crud/urls.if.d.ts +2 -1
- package/lib/table/css-vars.d.ts +1 -0
- package/lib/table/data/chunk/chunk.data-event.d.ts +3 -2
- package/lib/table/data/chunk/chunk.data-event.if.d.ts +2 -1
- package/lib/table/data/chunk/request-chunk.d.ts +2 -1
- package/lib/table/data/chunk/request-chunk.if.d.ts +1 -0
- package/lib/table/data/common/aligns.d.ts +18 -0
- package/lib/table/data/common/area-map-factory.d.ts +3 -2
- package/lib/table/data/common/area-map.d.ts +3 -1
- package/lib/table/data/common/area-map.type.d.ts +1 -0
- package/lib/table/data/common/args-adjust-columns-to-row-parent-params.d.ts +6 -4
- package/lib/table/data/common/args-render-cell-div.d.ts +5 -3
- package/lib/table/data/common/boolean-function.d.ts +10 -0
- package/lib/table/data/common/cell-range.d.ts +16 -7
- package/lib/table/data/common/checkbox-column-def.d.ts +6 -4
- package/lib/table/data/common/checked-type.d.ts +2 -0
- package/lib/table/data/common/event/ge-cell-indices.d.ts +2 -0
- package/lib/table/data/common/event/ge-key-event.d.ts +2 -0
- package/lib/table/data/common/event/ge-model-change-event.d.ts +16 -2
- package/lib/table/data/common/event/ge-mouse-event.d.ts +52 -4
- package/lib/table/data/common/event/ge-scroll-event.d.ts +27 -1
- package/lib/table/data/common/event/ge-state-change-event.d.ts +30 -0
- package/lib/table/data/common/event/input/table-cell-update-event.d.ts +14 -10
- package/lib/table/data/common/event/input/table-cell-update-event.if.d.ts +3 -1
- package/lib/table/data/common/filter-function.d.ts +2 -0
- package/lib/table/data/common/get-t.d.ts +2 -0
- package/lib/table/data/common/index-and-px.d.ts +2 -0
- package/lib/table/data/common/size-unit.type.d.ts +2 -0
- package/lib/table/data/common/size.d.ts +13 -2
- package/lib/table/data/common/size.if.d.ts +3 -1
- package/lib/table/data/common/sizes.d.ts +133 -1
- package/lib/table/data/common/sort-item.d.ts +16 -3
- package/lib/table/data/common/sort-state.type.d.ts +2 -0
- package/lib/table/data/common/tree-arrow.type.d.ts +2 -0
- package/lib/table/data/common/tree-row-if.d.ts +22 -1
- package/lib/table/data/common/tree-row.d.ts +3 -1
- package/lib/table/data/common/value-label.d.ts +2 -1
- package/lib/table/data/common/value-label.if.d.ts +1 -0
- package/lib/table/data/div-scope.type.d.ts +2 -0
- package/lib/table/data/event/mouse-target-data.d.ts +5 -3
- package/lib/table/data/geo-data.d.ts +2 -0
- package/lib/table/data/options/auto-restore-options.d.ts +44 -1
- package/lib/table/data/options/auto-restore-options.if.d.ts +95 -45
- package/lib/table/data/options/default-row-heights.d.ts +20 -2
- package/lib/table/data/options/default-row-heights.if.d.ts +4 -1
- package/lib/table/data/options/default-row-id.d.ts +4 -0
- package/lib/table/data/options/header-group-options.d.ts +3 -2
- package/lib/table/data/options/header-group-options.if.d.ts +3 -4
- package/lib/table/data/options/icon.d.ts +2 -1
- package/lib/table/data/options/icon.if.d.ts +2 -0
- package/lib/table/data/options/overlay-options.d.ts +30 -0
- package/lib/table/data/options/overlay-options.if.d.ts +79 -0
- package/lib/table/data/options/sorted-options.d.ts +3 -2
- package/lib/table/data/options/sorted-options.if.d.ts +3 -1
- package/lib/table/data/options/table-options.d.ts +40 -13
- package/lib/table/data/options/table-options.if.d.ts +152 -44
- package/lib/table/data/options/tree-options.d.ts +3 -2
- package/lib/table/data/options/tree-options.if.d.ts +3 -1
- package/lib/table/data/side-ident.type.d.ts +2 -0
- package/lib/table/data/table-model-and-options.d.ts +5 -3
- package/lib/table/data/table-model-and-options.if.d.ts +4 -2
- package/lib/table/data/tablemodel/area-ident.type.d.ts +4 -0
- package/lib/table/data/tablemodel/areamodel/abstract-area-model.d.ts +10 -9
- package/lib/table/data/tablemodel/areamodel/area-model-array-of-arrays.d.ts +13 -4
- package/lib/table/data/tablemodel/areamodel/area-model-cell-groups.d.ts +44 -12
- package/lib/table/data/tablemodel/areamodel/area-model-hidden.d.ts +9 -7
- package/lib/table/data/tablemodel/areamodel/area-model-object-array-with-columndefs.d.ts +16 -14
- package/lib/table/data/tablemodel/areamodel/area-model-object-array.d.ts +48 -31
- package/lib/table/data/tablemodel/areamodel/area-model-tree.d.ts +162 -11
- package/lib/table/data/tablemodel/areamodel/area-model.d.ts +66 -104
- package/lib/table/data/tablemodel/areamodel/area-model.if.d.ts +75 -50
- package/lib/table/data/tablemodel/areamodel/async-area-model-object-array.d.ts +5 -5
- package/lib/table/data/tablemodel/areamodel/col-and-rowspan-model.d.ts +14 -3
- package/lib/table/data/tablemodel/areamodel/cover-grid-body-model.d.ts +17 -8
- package/lib/table/data/tablemodel/areamodel/has-default-row-height-if.d.ts +1 -0
- package/lib/table/data/tablemodel/areamodel/object-array-holder.if.d.ts +1 -0
- package/lib/table/data/tablemodel/cellgroup/cell-group-ext.d.ts +3 -2
- package/lib/table/data/tablemodel/cellgroup/cell-group.d.ts +4 -1
- package/lib/table/data/tablemodel/cellgroup/cell-group.if.d.ts +34 -0
- package/lib/table/data/tablemodel/cellgroup/cellgroup-factory.d.ts +4 -3
- package/lib/table/data/tablemodel/column/column-def.d.ts +67 -10
- package/lib/table/data/tablemodel/column/column-def.if.d.ts +63 -96
- package/lib/table/data/tablemodel/column/column-visibility.d.ts +11 -0
- package/lib/table/data/tablemodel/cover-grid-table-model.d.ts +11 -10
- package/lib/table/data/tablemodel/padding.d.ts +2 -0
- package/lib/table/data/tablemodel/table-model.d.ts +75 -14
- package/lib/table/data/tablemodel/table-model.if.d.ts +52 -8
- package/lib/table/ele-scope.d.ts +53 -5
- package/lib/table/event-adapter.d.ts +20 -10
- package/lib/table/event-checkbox-changed-handler.d.ts +2 -1
- package/lib/table/event-listener.if.d.ts +50 -9
- package/lib/table/factory/cover-grid-factory.d.ts +4 -3
- package/lib/table/factory/table-factory.d.ts +103 -64
- package/lib/table/factory/tree-factory.d.ts +45 -3
- package/lib/table/focus/event-focus-changed-listener.if.d.ts +5 -3
- package/lib/table/focus/focus-model.d.ts +7 -5
- package/lib/table/focus/focus-model.if.d.ts +22 -1
- package/lib/table/focus/focus.type.d.ts +2 -0
- package/lib/table/input-handler.d.ts +5 -1
- package/lib/table/instanceof-workaround.d.ts +16 -0
- package/lib/table/license-manager.d.ts +2 -0
- package/lib/table/mouse-handler.d.ts +20 -9
- package/lib/table/overlay/calc-overlay-kind.d.ts +31 -0
- package/lib/table/overlay/ge-overlay-kind.type.d.ts +17 -0
- package/lib/table/overlay/table-overlay.d.ts +108 -0
- package/lib/table/render-scope.d.ts +141 -27
- package/lib/table/renderer/action/action-event-listener.if.d.ts +2 -1
- package/lib/table/renderer/action/action-event.d.ts +4 -3
- package/lib/table/renderer/action/action-event.if.d.ts +2 -1
- package/lib/table/renderer/action/actions-cell-renderer.d.ts +8 -7
- package/lib/table/renderer/cell-group-ext-cell-renderer.d.ts +8 -7
- package/lib/table/renderer/cell-render.if.d.ts +41 -4
- package/lib/table/renderer/checkbox-boolean-property-cell-renderer.d.ts +7 -5
- package/lib/table/renderer/checkbox-cell-renderer.d.ts +8 -5
- package/lib/table/renderer/date-to-int-date-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/date-to-iso-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/date-to-locale-date-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/date-to-tec-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/edit/edit-cell-renderer.type.d.ts +2 -1
- package/lib/table/renderer/edit/edit-input-pipe-for-number.d.ts +2 -1
- package/lib/table/renderer/edit/edit-input-pipe.if.d.ts +2 -0
- package/lib/table/renderer/edit/input-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/edit/select-cell-renderer.d.ts +7 -6
- package/lib/table/renderer/male-female-to-icon-cell-renderer.d.ts +19 -6
- package/lib/table/renderer/number-cell-progress-bar-cell-renderer.d.ts +11 -6
- package/lib/table/renderer/number-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/positive-and-negative-number-renderer.d.ts +6 -5
- package/lib/table/renderer/progress-bar-cell-renderer.d.ts +12 -6
- package/lib/table/renderer/renderer-cleanup-fn.type.d.ts +1 -0
- package/lib/table/renderer/renderer.d.ts +3 -2
- package/lib/table/renderer/simple-array-cell-renderer.d.ts +6 -5
- package/lib/table/renderer/star-rating-cell-renderer.d.ts +12 -6
- package/lib/table/renderer/true-false-cell-renderer.d.ts +17 -5
- package/lib/table/resize-handler.d.ts +3 -1
- package/lib/table/selection/event-selection-changed-listener.if.d.ts +2 -1
- package/lib/table/selection/multi-rows-selection-model.d.ts +7 -4
- package/lib/table/selection/selection-model.d.ts +112 -10
- package/lib/table/selection/selection-model.if.d.ts +48 -3
- package/lib/table/selection/selection-service.d.ts +35 -7
- package/lib/table/selection/selection.type.d.ts +3 -0
- package/lib/table/service/abstract-store-state.service.d.ts +1 -1
- package/lib/table/service/convenience-dom.service.d.ts +37 -14
- package/lib/table/service/copy-service.d.ts +18 -4
- package/lib/table/service/copy-service.if.d.ts +4 -3
- package/lib/table/service/data/collapsed-expanded.data.d.ts +1 -0
- package/lib/table/service/data/html-style.type.d.ts +1 -0
- package/lib/table/service/dom-service.if.d.ts +30 -0
- package/lib/table/service/excel-service.d.ts +24 -1
- package/lib/table/service/excel-service.if.d.ts +7 -0
- package/lib/table/service/ge-filter.service.d.ts +1 -0
- package/lib/table/service/simple-dom-service.d.ts +3 -1
- package/lib/table/service/store-state-collapsed-expand.service.d.ts +4 -3
- package/lib/table/service/store-state-scroll-pos.service.d.ts +3 -2
- package/lib/table/service/store-state-sorting.service.d.ts +4 -3
- package/lib/table/service/tree-row.service.d.ts +5 -1
- package/lib/table/state/state-storage.if.d.ts +39 -0
- package/lib/table/state/table-state-migration.d.ts +36 -0
- package/lib/table/state/table-state-part.d.ts +13 -0
- package/lib/table/state/table-state.if.d.ts +181 -0
- package/lib/table/state/table-state.service.d.ts +158 -0
- package/lib/table/table-api.d.ts +450 -550
- package/lib/table/table-scope.d.ts +288 -114
- package/package.json +23 -8
package/lib/table/table-api.d.ts
CHANGED
|
@@ -1,353 +1,76 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
1
|
+
import { GeOverlayKind } from './overlay/ge-overlay-kind.type.js';
|
|
2
|
+
import { TableStateIf, TableStatePart } from './state/table-state.if.js';
|
|
3
|
+
import { SortState } from './data/common/sort-state.type.js';
|
|
4
|
+
import { TableScope } from './table-scope.js';
|
|
5
|
+
import { ColumnDefIf } from './data/tablemodel/column/column-def.if.js';
|
|
6
|
+
import { TableCellUpdateEventIf } from './data/common/event/input/table-cell-update-event.if.js';
|
|
7
|
+
import { SelectionModel } from './selection/selection-model.js';
|
|
8
|
+
import { ActionId } from './action/action-id.type.js';
|
|
9
|
+
import { ShortcutActionIdMapping } from './action/shortcut-actionid-mapping.type.js';
|
|
10
|
+
import { SelectionModelIf } from './selection/selection-model.if.js';
|
|
11
|
+
import { TableModelIf } from './data/tablemodel/table-model.if.js';
|
|
12
|
+
import { AreaModelIf } from './data/tablemodel/areamodel/area-model.if.js';
|
|
11
13
|
|
|
12
14
|
/**
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
* The
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
* api.repaint();
|
|
73
|
-
* ```
|
|
74
|
-
*
|
|
75
|
-
* ### 2. Chaining Operations
|
|
76
|
-
*
|
|
77
|
-
* While the TableApi doesn't support method chaining directly (most methods return void),
|
|
78
|
-
* you can group related operations together:
|
|
79
|
-
*
|
|
80
|
-
* ```typescript
|
|
81
|
-
* // Perform a sequence of related operations
|
|
82
|
-
* function updateTableSection(api, newRows, startIndex) {
|
|
83
|
-
* api.addRowsAt(newRows, startIndex);
|
|
84
|
-
* api.ensureRowIsVisible(startIndex);
|
|
85
|
-
* api.repaint();
|
|
86
|
-
* }
|
|
87
|
-
* ```
|
|
88
|
-
*
|
|
89
|
-
* ### 3. Event-Driven Updates
|
|
90
|
-
*
|
|
91
|
-
* Use the TableApi to respond to external events:
|
|
92
|
-
*
|
|
93
|
-
* ```typescript
|
|
94
|
-
* // Update table in response to user input
|
|
95
|
-
* searchInput.addEventListener('input', (e) => {
|
|
96
|
-
* const searchText = e.target.value;
|
|
97
|
-
* tableOptions.externalFilterFunction = row => row.name.includes(searchText);
|
|
98
|
-
* tableApi.externalFilterChanged();
|
|
99
|
-
* });
|
|
100
|
-
* ```
|
|
101
|
-
*
|
|
102
|
-
* ### 4. Integration with Application State
|
|
103
|
-
*
|
|
104
|
-
* Synchronize table state with application state:
|
|
105
|
-
*
|
|
106
|
-
* ```typescript
|
|
107
|
-
* // In a state management effect or watcher
|
|
108
|
-
* function onAppStateChanged(newState) {
|
|
109
|
-
* if (newState.tableData !== currentTableData) {
|
|
110
|
-
* tableApi.setRows(newState.tableData);
|
|
111
|
-
* tableApi.repaint();
|
|
112
|
-
* currentTableData = newState.tableData;
|
|
113
|
-
* }
|
|
114
|
-
* }
|
|
115
|
-
* ```
|
|
116
|
-
*
|
|
117
|
-
* ## Performance Considerations
|
|
118
|
-
*
|
|
119
|
-
* The TableApi provides methods that are optimized for different performance scenarios:
|
|
120
|
-
*
|
|
121
|
-
* - For frequent small updates: Use `updateCells()` with `repaintAll=false`
|
|
122
|
-
* - For complete data replacement: Use `setRows()`
|
|
123
|
-
* - For structural changes: Follow with `repaintHard()`
|
|
124
|
-
* - For visual-only changes: Use `repaint()`
|
|
125
|
-
*
|
|
126
|
-
* ## Common Use Cases
|
|
127
|
-
*
|
|
128
|
-
* ### Real-time Data Updates
|
|
129
|
-
*
|
|
130
|
-
* ```typescript
|
|
131
|
-
* // Update specific cells with new values from a data stream
|
|
132
|
-
* dataStream.subscribe(update => {
|
|
133
|
-
* const cellUpdates = update.changes.map(change => ({
|
|
134
|
-
* area: 'body',
|
|
135
|
-
* rowIndex: change.rowIndex,
|
|
136
|
-
* columnIndex: change.columnIndex,
|
|
137
|
-
* value: change.newValue,
|
|
138
|
-
* cssClasses: { 'updated': true }
|
|
139
|
-
* }));
|
|
140
|
-
*
|
|
141
|
-
* tableApi.updateCells(cellUpdates);
|
|
142
|
-
* });
|
|
143
|
-
* ```
|
|
144
|
-
*
|
|
145
|
-
* ### Interactive Filtering
|
|
146
|
-
*
|
|
147
|
-
* ```typescript
|
|
148
|
-
* // Set up filter controls
|
|
149
|
-
* function applyFilters(filters) {
|
|
150
|
-
* tableOptions.externalFilterFunction = row => {
|
|
151
|
-
* return Object.entries(filters).every(([key, value]) => {
|
|
152
|
-
* if (!value) return true; // Skip empty filters
|
|
153
|
-
* return row[key].toString().includes(value);
|
|
154
|
-
* });
|
|
155
|
-
* };
|
|
156
|
-
*
|
|
157
|
-
* tableApi.externalFilterChanged();
|
|
158
|
-
* }
|
|
159
|
-
* ```
|
|
160
|
-
*
|
|
161
|
-
* ### Custom Sorting
|
|
162
|
-
*
|
|
163
|
-
* ```typescript
|
|
164
|
-
* // Apply multi-column sorting
|
|
165
|
-
* function sortByMultipleColumns(sortConfig) {
|
|
166
|
-
* tableApi.sort((a, b) => {
|
|
167
|
-
* for (const {column, direction} of sortConfig) {
|
|
168
|
-
* const aValue = a[column];
|
|
169
|
-
* const bValue = b[column];
|
|
170
|
-
* const comparison = compare(aValue, bValue);
|
|
171
|
-
*
|
|
172
|
-
* if (comparison !== 0) {
|
|
173
|
-
* return direction === 'asc' ? comparison : -comparison;
|
|
174
|
-
* }
|
|
175
|
-
* }
|
|
176
|
-
* return 0;
|
|
177
|
-
* });
|
|
178
|
-
* }
|
|
179
|
-
*
|
|
180
|
-
* function compare(a, b) {
|
|
181
|
-
* if (typeof a === 'string' && typeof b === 'string') {
|
|
182
|
-
* return a.localeCompare(b);
|
|
183
|
-
* }
|
|
184
|
-
* return a < b ? -1 : a > b ? 1 : 0;
|
|
185
|
-
* }
|
|
186
|
-
* ```
|
|
187
|
-
*
|
|
188
|
-
* ### Row Management
|
|
189
|
-
*
|
|
190
|
-
* ```typescript
|
|
191
|
-
* // Add, update, and remove rows based on user interactions
|
|
192
|
-
* function onAddRow(newRow) {
|
|
193
|
-
* tableApi.addRows([newRow]);
|
|
194
|
-
* tableApi.ensureRowIsVisible(tableApi.getDisplayedRowCount() - 1);
|
|
195
|
-
* }
|
|
196
|
-
*
|
|
197
|
-
* function onUpdateRow(updatedRow) {
|
|
198
|
-
* tableApi.updateRows([updatedRow], (a, b) => a.id === b.id);
|
|
199
|
-
* }
|
|
200
|
-
*
|
|
201
|
-
* function onDeleteRow(rowToDelete) {
|
|
202
|
-
* tableApi.removeRows([rowToDelete], (a, b) => a.id === b.id);
|
|
203
|
-
* }
|
|
204
|
-
* ```
|
|
205
|
-
*
|
|
206
|
-
* ### Export and Reporting
|
|
207
|
-
*
|
|
208
|
-
* ```typescript
|
|
209
|
-
* // Set up export buttons
|
|
210
|
-
* exportButton.addEventListener('click', () => {
|
|
211
|
-
* tableApi.downloadExcel('report.xlsx', 'Report Generator');
|
|
212
|
-
* });
|
|
213
|
-
*
|
|
214
|
-
* copyButton.addEventListener('click', () => {
|
|
215
|
-
* tableApi.copyToClipboard()
|
|
216
|
-
* .then(() => showNotification('Data copied to clipboard'))
|
|
217
|
-
* .catch(err => showError('Failed to copy data', err));
|
|
218
|
-
* });
|
|
219
|
-
* ```
|
|
220
|
-
*
|
|
221
|
-
* ### Responsive Behavior
|
|
222
|
-
*
|
|
223
|
-
* ```typescript
|
|
224
|
-
* // Handle window resize events
|
|
225
|
-
* window.addEventListener('resize', () => {
|
|
226
|
-
* tableApi.autoResizeColumns();
|
|
227
|
-
* tableApi.repaintHard();
|
|
228
|
-
* });
|
|
229
|
-
* ```
|
|
230
|
-
*
|
|
231
|
-
* ## Integration with Frameworks
|
|
232
|
-
*
|
|
233
|
-
* ### React
|
|
234
|
-
*
|
|
235
|
-
* ```jsx
|
|
236
|
-
* function DataTable({ data, onRowSelect }) {
|
|
237
|
-
* const tableRef = useRef(null);
|
|
238
|
-
*
|
|
239
|
-
* useEffect(() => {
|
|
240
|
-
* if (tableRef.current && tableRef.current.api) {
|
|
241
|
-
* tableRef.current.api.setRows(data);
|
|
242
|
-
* tableRef.current.api.repaint();
|
|
243
|
-
* }
|
|
244
|
-
* }, [data]);
|
|
245
|
-
*
|
|
246
|
-
* return <div ref={tableRef} className="table-container" />;
|
|
247
|
-
* }
|
|
248
|
-
* ```
|
|
249
|
-
*
|
|
250
|
-
* ### Vue
|
|
251
|
-
*
|
|
252
|
-
* ```vue
|
|
253
|
-
* <template>
|
|
254
|
-
* <div ref="tableContainer"></div>
|
|
255
|
-
* </template>
|
|
256
|
-
*
|
|
257
|
-
* <script>
|
|
258
|
-
* export default {
|
|
259
|
-
* props: ['tableData'],
|
|
260
|
-
* watch: {
|
|
261
|
-
* tableData(newData) {
|
|
262
|
-
* if (this.tableApi) {
|
|
263
|
-
* this.tableApi.setRows(newData);
|
|
264
|
-
* this.tableApi.repaint();
|
|
265
|
-
* }
|
|
266
|
-
* }
|
|
267
|
-
* },
|
|
268
|
-
* mounted() {
|
|
269
|
-
* // Initialize table and get API reference
|
|
270
|
-
* this.tableApi = initializeTable(this.$refs.tableContainer).api;
|
|
271
|
-
* }
|
|
272
|
-
* }
|
|
273
|
-
* </script>
|
|
274
|
-
* ```
|
|
275
|
-
*
|
|
276
|
-
* ### Angular
|
|
277
|
-
*
|
|
278
|
-
* ```typescript
|
|
279
|
-
* @Component({
|
|
280
|
-
* selector: 'app-data-table',
|
|
281
|
-
* template: '<div #tableContainer></div>'
|
|
282
|
-
* })
|
|
283
|
-
* export class DataTableComponent implements OnInit, OnChanges {
|
|
284
|
-
* @Input() data: any[];
|
|
285
|
-
* @ViewChild('tableContainer') tableContainer: ElementRef;
|
|
286
|
-
*
|
|
287
|
-
* private tableApi: TableApi;
|
|
288
|
-
*
|
|
289
|
-
* ngOnInit() {
|
|
290
|
-
* this.tableApi = initializeTable(this.tableContainer.nativeElement).api;
|
|
291
|
-
* }
|
|
292
|
-
*
|
|
293
|
-
* ngOnChanges(changes) {
|
|
294
|
-
* if (changes.data && this.tableApi) {
|
|
295
|
-
* this.tableApi.setRows(this.data);
|
|
296
|
-
* this.tableApi.repaint();
|
|
297
|
-
* }
|
|
298
|
-
* }
|
|
299
|
-
* }
|
|
300
|
-
* ```
|
|
301
|
-
*
|
|
302
|
-
* ## Error Handling
|
|
303
|
-
*
|
|
304
|
-
* The TableApi methods generally don't throw exceptions, but instead log warnings to the console
|
|
305
|
-
* when operations cannot be completed (e.g., when trying to use row operations on an incompatible
|
|
306
|
-
* area model type). It's good practice to check console warnings during development.
|
|
307
|
-
*
|
|
308
|
-
* For asynchronous operations like clipboard access, proper error handling should be used:
|
|
309
|
-
*
|
|
310
|
-
* ```typescript
|
|
311
|
-
* tableApi.copyToClipboard()
|
|
312
|
-
* .then(content => {
|
|
313
|
-
* console.log('Copied to clipboard:', content);
|
|
314
|
-
* })
|
|
315
|
-
* .catch(error => {
|
|
316
|
-
* console.error('Failed to copy to clipboard:', error);
|
|
317
|
-
* // Show user-friendly error message
|
|
318
|
-
* });
|
|
319
|
-
* ```
|
|
320
|
-
*
|
|
321
|
-
* ## Debugging
|
|
322
|
-
*
|
|
323
|
-
* For troubleshooting complex table behavior, the logging system can be enabled:
|
|
324
|
-
*
|
|
325
|
-
* ```typescript
|
|
326
|
-
* // Enable detailed logging
|
|
327
|
-
* tableApi.setLoggingActive(true);
|
|
328
|
-
*
|
|
329
|
-
* // Perform operations that need debugging
|
|
330
|
-
* tableApi.updateCells([...]);
|
|
331
|
-
* tableApi.scrollToIndex(5, 10);
|
|
332
|
-
*
|
|
333
|
-
* // Check if logging is active
|
|
334
|
-
* const isLogging = tableApi.isLoggingActive();
|
|
335
|
-
*
|
|
336
|
-
* // Disable logging when done
|
|
337
|
-
* tableApi.setLoggingActive(false);
|
|
338
|
-
* ```
|
|
339
|
-
*
|
|
340
|
-
* ## Advanced Usage
|
|
341
|
-
*
|
|
342
|
-
* For advanced scenarios, you can access the underlying TableScope:
|
|
343
|
-
*
|
|
344
|
-
* ```typescript
|
|
345
|
-
* const tableScope = tableApi.getTableScope();
|
|
346
|
-
* // Now you can access internal implementation details
|
|
347
|
-
* // Note: This is generally not recommended unless absolutely necessary
|
|
348
|
-
* ```
|
|
349
|
-
*
|
|
350
|
-
* @class TableApi
|
|
15
|
+
* The public API of one table – everything you do with a table after it has been created:
|
|
16
|
+
* scrolling, sorting, filtering, selection, copy, Excel export, updating cells and rows, repainting.
|
|
17
|
+
*
|
|
18
|
+
* Every table has exactly one `TableApi`. You never create it yourself – you get it:
|
|
19
|
+
*
|
|
20
|
+
* | Where | How |
|
|
21
|
+
* |---|---|
|
|
22
|
+
* | Plain TypeScript | `new TableScope(host, model, new SimpleDomService(), options, listener).firstInit().getApi()` |
|
|
23
|
+
* | Web Component | `el.addEventListener("tableReady", e => e.detail)` |
|
|
24
|
+
* | React / Preact / Solid | `<GuiexpertTable tableReady={api => …} />` |
|
|
25
|
+
* | Vue 3 | `<GuiexpertTable @tableReady="api => …" />` |
|
|
26
|
+
* | Svelte 5 | `<GuiexpertTable onTableReady={api => …} />` |
|
|
27
|
+
* | Angular | `<guiexpert-table (tableReady)="onReady($event)" />` |
|
|
28
|
+
*
|
|
29
|
+
* ## The most important methods
|
|
30
|
+
*
|
|
31
|
+
* | Task | Methods |
|
|
32
|
+
* |---|---|
|
|
33
|
+
* | scroll | {@link scrollToIndex}, {@link ensureRowIsVisible}, {@link ensureColumnIsVisible}, {@link scrollToPixel}, {@link getFirstVisibleRowIndex} |
|
|
34
|
+
* | sort | {@link sortByColumn}, {@link sort}, {@link reSort} |
|
|
35
|
+
* | filter | {@link externalFilterChanged} (with {@link TableOptionsIf.externalFilterFunction}) |
|
|
36
|
+
* | export | {@link copyToClipboard}, {@link downloadExcel} |
|
|
37
|
+
* | change data | {@link updateCells}, {@link setRows}, {@link addRows}, {@link updateRows}, {@link removeRows} |
|
|
38
|
+
* | redraw | {@link repaint} (same row count), {@link repaintHard} (row count or heights changed) |
|
|
39
|
+
* | columns | {@link autoResizeColumns}, {@link setColumnWidth}, {@link recalcColumnWidths} |
|
|
40
|
+
* | tree | {@link expandAll}, {@link collapseAll}, {@link setRowExpanded} |
|
|
41
|
+
* | state | {@link getState}, {@link applyState}, {@link resetState} (with {@link TableOptionsIf.autoRestoreOptions}) |
|
|
42
|
+
* | lifecycle | {@link destroy} |
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* // plain TypeScript: create a table and talk to it
|
|
46
|
+
* const tableModel = TableFactory.createTableModel({ rows: orders });
|
|
47
|
+
* const tableApi = new TableScope(host, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter())
|
|
48
|
+
* .firstInit()
|
|
49
|
+
* .getApi();
|
|
50
|
+
*
|
|
51
|
+
* tableApi.scrollToIndex(0, 50_000); // column 0, row 50,000
|
|
52
|
+
* tableApi.sortByColumn("total", "desc"); // like a double-click on the header
|
|
53
|
+
* await tableApi.copyToClipboard(); // the current selection, tab-separated
|
|
54
|
+
* await tableApi.downloadExcel("orders.xlsx"); // the current view as .xlsx
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* // live data: change single cells, only the visible ones are redrawn
|
|
58
|
+
* tableApi.updateCells([
|
|
59
|
+
* new TableCellUpdateEvent("body", 3, 2, 101.5, { "tick-up": true }),
|
|
60
|
+
* new TableCellUpdateEvent("body", 3, 3, 0.42)
|
|
61
|
+
* ]);
|
|
62
|
+
*
|
|
63
|
+
* @example
|
|
64
|
+
* // replace the rows of an object-array table – the row count changes, so repaint hard
|
|
65
|
+
* tableApi.setRows(newOrders);
|
|
66
|
+
* tableApi.externalFilterChanged(); // only if a filter function is set
|
|
67
|
+
* tableApi.repaintHard();
|
|
68
|
+
*
|
|
69
|
+
* @see Training: [Your first table](https://gui.expert/training/first-table/),
|
|
70
|
+
* [Sorting](https://gui.expert/training/sorting/), [Filtering](https://gui.expert/training/filtering/),
|
|
71
|
+
* [Excel export](https://gui.expert/training/excel-export/), [Live data](https://gui.expert/training/live-data/)
|
|
72
|
+
*
|
|
73
|
+
* @category Table & API
|
|
351
74
|
*/
|
|
352
75
|
export declare class TableApi {
|
|
353
76
|
readonly tableScope: TableScope;
|
|
@@ -496,7 +219,8 @@ export declare class TableApi {
|
|
|
496
219
|
*
|
|
497
220
|
* @example
|
|
498
221
|
* // Scroll only vertically, keeping the current horizontal position
|
|
499
|
-
*
|
|
222
|
+
* // (an omitted or undefined px means 0; for rows use scrollToIndex(-1, rowIndex))
|
|
223
|
+
* tableApi.scrollToPixel(tableApi.getTableScope().scrollViewport.scrollLeft, 300);
|
|
500
224
|
*
|
|
501
225
|
* @example
|
|
502
226
|
* // Example in a component that needs precise scrolling control
|
|
@@ -522,58 +246,6 @@ export declare class TableApi {
|
|
|
522
246
|
* }
|
|
523
247
|
* }
|
|
524
248
|
*
|
|
525
|
-
* @example
|
|
526
|
-
* // Advanced usage with animated scrolling
|
|
527
|
-
* class SmoothScroller {
|
|
528
|
-
* private tableApi: TableApi;
|
|
529
|
-
* private animationFrameId: number | null = null;
|
|
530
|
-
*
|
|
531
|
-
* constructor(tableApi: TableApi) {
|
|
532
|
-
* this.tableApi = tableApi;
|
|
533
|
-
* }
|
|
534
|
-
*
|
|
535
|
-
* smoothScrollTo(targetX: number, targetY: number, duration: number = 500) {
|
|
536
|
-
* // Cancel any ongoing animation
|
|
537
|
-
* if (this.animationFrameId !== null) {
|
|
538
|
-
* cancelAnimationFrame(this.animationFrameId);
|
|
539
|
-
* }
|
|
540
|
-
*
|
|
541
|
-
* const startTime = performance.now();
|
|
542
|
-
* const startX = this.tableApi.getTableScope().getScrollLeft();
|
|
543
|
-
* const startY = this.tableApi.getTableScope().getScrollTop();
|
|
544
|
-
* const distanceX = targetX - startX;
|
|
545
|
-
* const distanceY = targetY - startY;
|
|
546
|
-
*
|
|
547
|
-
* const step = (currentTime: number) => {
|
|
548
|
-
* const elapsed = currentTime - startTime;
|
|
549
|
-
* const progress = Math.min(elapsed / duration, 1);
|
|
550
|
-
*
|
|
551
|
-
* // Use easing function for smooth animation
|
|
552
|
-
* const easeProgress = 1 - Math.pow(1 - progress, 3); // Cubic ease-out
|
|
553
|
-
*
|
|
554
|
-
* const currentX = startX + distanceX * easeProgress;
|
|
555
|
-
* const currentY = startY + distanceY * easeProgress;
|
|
556
|
-
*
|
|
557
|
-
* this.tableApi.scrollToPixel(currentX, currentY);
|
|
558
|
-
*
|
|
559
|
-
* if (progress < 1) {
|
|
560
|
-
* this.animationFrameId = requestAnimationFrame(step);
|
|
561
|
-
* } else {
|
|
562
|
-
* this.animationFrameId = null;
|
|
563
|
-
* }
|
|
564
|
-
* };
|
|
565
|
-
*
|
|
566
|
-
* this.animationFrameId = requestAnimationFrame(step);
|
|
567
|
-
* }
|
|
568
|
-
*
|
|
569
|
-
* cancelAnimation() {
|
|
570
|
-
* if (this.animationFrameId !== null) {
|
|
571
|
-
* cancelAnimationFrame(this.animationFrameId);
|
|
572
|
-
* this.animationFrameId = null;
|
|
573
|
-
* }
|
|
574
|
-
* }
|
|
575
|
-
* }
|
|
576
|
-
*
|
|
577
249
|
* @see {@link scrollToIndex} - For scrolling based on row and column indices
|
|
578
250
|
* @see {@link ensureRowIsVisible} - For scrolling to make a specific row visible
|
|
579
251
|
*/
|
|
@@ -581,112 +253,130 @@ export declare class TableApi {
|
|
|
581
253
|
/**
|
|
582
254
|
* Scrolls the table to display the specified row and column indices at the top-left corner of the viewport.
|
|
583
255
|
*
|
|
584
|
-
*
|
|
585
|
-
*
|
|
256
|
+
* The row becomes the first row of the body, the column the first column of the scrollable (center) part –
|
|
257
|
+
* as far as the scroll range allows: the last columns and rows cannot move further than to the right/bottom edge.
|
|
586
258
|
*
|
|
587
|
-
*
|
|
259
|
+
* Fixed columns (`fixedLeftColumnCount` / `fixedRightColumnCount`) are always visible: a fixed west column scrolls
|
|
260
|
+
* back to the start (x = 0), a fixed east column – and `-1` or any other index outside the columns – keeps the
|
|
261
|
+
* current horizontal position.
|
|
262
|
+
*
|
|
263
|
+
* @param {number} indexX - The column index (model index, fixed columns included) to scroll to.
|
|
264
|
+
* Defaults to 0 (first column). `-1` keeps the horizontal position.
|
|
588
265
|
* @param {number} indexY - The vertical index (row) to scroll to. Defaults to 0 (topmost row).
|
|
589
266
|
* @returns {void}
|
|
590
267
|
*
|
|
591
268
|
* @example
|
|
592
269
|
* // Scroll to the 5th row, keeping the current horizontal scroll position
|
|
593
|
-
* tableApi.scrollToIndex(
|
|
270
|
+
* tableApi.scrollToIndex(-1, 5);
|
|
594
271
|
*
|
|
595
272
|
* @example
|
|
596
273
|
* // Scroll to column 3, row 10
|
|
597
274
|
* tableApi.scrollToIndex(3, 10);
|
|
598
275
|
*
|
|
599
276
|
* @example
|
|
600
|
-
* //
|
|
601
|
-
*
|
|
602
|
-
* private tableApi: TableApi;
|
|
603
|
-
*
|
|
604
|
-
* constructor(tableApi: TableApi) {
|
|
605
|
-
* this.tableApi = tableApi;
|
|
606
|
-
* }
|
|
607
|
-
*
|
|
608
|
-
* goToCell(columnIndex: number, rowIndex: number) {
|
|
609
|
-
* // Navigate directly to the specified cell position
|
|
610
|
-
* this.tableApi.scrollToIndex(columnIndex, rowIndex);
|
|
611
|
-
*
|
|
612
|
-
* // Optional: Select the cell after navigating to it
|
|
613
|
-
* const selectionModel = this.tableApi.getSelectionModel();
|
|
614
|
-
* if (selectionModel) {
|
|
615
|
-
* selectionModel.selectCell(rowIndex, columnIndex);
|
|
616
|
-
* }
|
|
617
|
-
* }
|
|
618
|
-
* }
|
|
619
|
-
*
|
|
620
|
-
* @example
|
|
621
|
-
* // Advanced usage with search functionality
|
|
622
|
-
* class TableSearcher {
|
|
623
|
-
* findAndScrollToMatch(searchTerm: string) {
|
|
624
|
-
* const tableModel = this.tableApi.getTableModel();
|
|
625
|
-
* const bodyModel = tableModel.getAreaModel('body');
|
|
626
|
-
*
|
|
627
|
-
* // Search for the term in the table data
|
|
628
|
-
* for (let row = 0; row < bodyModel.getRowCount(); row++) {
|
|
629
|
-
* for (let col = 0; col < tableModel.getColumnCount(); col++) {
|
|
630
|
-
* const cellContent = bodyModel.getValueAt(row, col)?.toString() || '';
|
|
631
|
-
*
|
|
632
|
-
* if (cellContent.includes(searchTerm)) {
|
|
633
|
-
* // Found a match, scroll to it
|
|
634
|
-
* this.tableApi.scrollToIndex(col, row);
|
|
635
|
-
* return true;
|
|
636
|
-
* }
|
|
637
|
-
* }
|
|
638
|
-
* }
|
|
639
|
-
*
|
|
640
|
-
* return false; // No match found
|
|
641
|
-
* }
|
|
642
|
-
* }
|
|
277
|
+
* // Scroll to column 3, keeping the rows that are currently shown
|
|
278
|
+
* tableApi.scrollToIndex(3, tableApi.getFirstVisibleRowIndex());
|
|
643
279
|
*
|
|
644
280
|
* @see {@link scrollToPixel} - For scrolling to specific pixel coordinates
|
|
645
281
|
* @see {@link ensureRowIsVisible} - For scrolling to make a specific row visible
|
|
646
282
|
*/
|
|
647
283
|
scrollToIndex(indexX?: number, indexY?: number): void;
|
|
648
284
|
/**
|
|
649
|
-
*
|
|
285
|
+
* Shows or hides the header and repaints the table.
|
|
650
286
|
*
|
|
651
|
-
*
|
|
287
|
+
* A hidden header takes no space – the body moves up and shows more rows. The header rows stay in the model
|
|
288
|
+
* (labels, sort icons, header groups), so `setHeaderVisible(true)` brings them back unchanged.
|
|
289
|
+
* Requires a {@link TableModel} (what all factories create).
|
|
652
290
|
*
|
|
653
|
-
* @
|
|
291
|
+
* @param {boolean} [visible=true] - false hides the header
|
|
292
|
+
* @returns {void}
|
|
293
|
+
*
|
|
294
|
+
* @example
|
|
295
|
+
* // a compact view without column headers
|
|
296
|
+
* tableApi.setHeaderVisible(false);
|
|
297
|
+
*
|
|
298
|
+
* @example
|
|
299
|
+
* // toggle from a button
|
|
300
|
+
* document.querySelector("#toggle-header")!.addEventListener("click", () =>
|
|
301
|
+
* tableApi.setHeaderVisible(!tableApi.isHeaderVisible()));
|
|
654
302
|
*/
|
|
655
|
-
setHeaderVisible(
|
|
303
|
+
setHeaderVisible(visible?: boolean): void;
|
|
656
304
|
/**
|
|
657
|
-
*
|
|
305
|
+
* Shows or hides a column and repaints the table.
|
|
306
|
+
*
|
|
307
|
+
* The column keeps its definition, its position (also when other columns are dragged) and its width:
|
|
308
|
+
* a hidden column is just not rendered (width 0), not copied ({@link copyToClipboard}) and not exported
|
|
309
|
+
* ({@link downloadExcel}). Showing it again restores the previous width. Works for fixed columns, too.
|
|
310
|
+
*
|
|
311
|
+
* The same as {@link ColumnDefIf.isVisible} – this method sets it to {@link TrueFn} / {@link FalseFn} (an own
|
|
312
|
+
* `isVisible` function of the column is replaced). Columns without a column definition (e.g. `bodyData` +
|
|
313
|
+
* `columnSizes` without `columnDefs`) can't be hidden.
|
|
314
|
+
*
|
|
315
|
+
* @param {number | string | ColumnDefIf} column - column index (fixed columns included), property (e.g. `"category"`)
|
|
316
|
+
* or the column definition
|
|
317
|
+
* @param {boolean} [visible=true] - false hides the column
|
|
318
|
+
* @returns {boolean} false if the column (definition) does not exist
|
|
658
319
|
*
|
|
659
|
-
* @
|
|
660
|
-
*
|
|
320
|
+
* @example
|
|
321
|
+
* // hide a column by property, show it again later
|
|
322
|
+
* tableApi.setColumnVisible("category", false);
|
|
323
|
+
* tableApi.setColumnVisible("category", true);
|
|
661
324
|
*
|
|
662
|
-
* @
|
|
325
|
+
* @example
|
|
326
|
+
* // a checkbox list "visible columns"
|
|
327
|
+
* tableApi.getTableModel().getColumnDefs()?.forEach((columnDef, index) => {
|
|
328
|
+
* const checkbox = document.createElement("input");
|
|
329
|
+
* checkbox.type = "checkbox";
|
|
330
|
+
* checkbox.checked = tableApi.isColumnVisible(index);
|
|
331
|
+
* checkbox.addEventListener("change", () => tableApi.setColumnVisible(columnDef, checkbox.checked));
|
|
332
|
+
* document.body.append(checkbox, columnDef.headerLabel);
|
|
333
|
+
* });
|
|
663
334
|
*/
|
|
664
|
-
setColumnVisible(
|
|
335
|
+
setColumnVisible(column: number | string | ColumnDefIf, visible?: boolean): boolean;
|
|
665
336
|
/**
|
|
666
|
-
* Returns whether a column is visible
|
|
337
|
+
* Returns whether a column is visible ({@link ColumnDefIf.isVisible}, see {@link setColumnVisible}).
|
|
338
|
+
* Columns without a column definition are always visible.
|
|
339
|
+
*
|
|
340
|
+
* @param {number | string | ColumnDefIf} column - column index, property or column definition
|
|
341
|
+
* @return {boolean} - True if the column is visible, false if it is hidden or does not exist.
|
|
667
342
|
*
|
|
668
|
-
* @
|
|
669
|
-
*
|
|
343
|
+
* @example
|
|
344
|
+
* if (!tableApi.isColumnVisible("category")) {
|
|
345
|
+
* tableApi.setColumnVisible("category", true);
|
|
346
|
+
* }
|
|
670
347
|
*/
|
|
671
|
-
isColumnVisible(
|
|
348
|
+
isColumnVisible(column: number | string | ColumnDefIf): boolean;
|
|
672
349
|
/**
|
|
673
|
-
* Checks if the header is visible.
|
|
350
|
+
* Checks if the header is visible: it has at least one row and is not hidden with {@link setHeaderVisible}.
|
|
674
351
|
*
|
|
675
352
|
* @return {boolean} - Returns true if the header is visible, otherwise returns false.
|
|
353
|
+
*
|
|
354
|
+
* @example
|
|
355
|
+
* const headerShown = tableApi.isHeaderVisible();
|
|
676
356
|
*/
|
|
677
357
|
isHeaderVisible(): boolean;
|
|
678
358
|
/**
|
|
679
|
-
*
|
|
359
|
+
* Shows or hides the footer and repaints the table.
|
|
680
360
|
*
|
|
681
|
-
*
|
|
361
|
+
* A hidden footer takes no space – the body gets taller. Its rows stay in the model, so `setFooterVisible(true)`
|
|
362
|
+
* brings them back (an own footer model, e.g. totals, is asked for its values again).
|
|
363
|
+
* Requires a {@link TableModel} (what all factories create).
|
|
682
364
|
*
|
|
683
|
-
* @
|
|
365
|
+
* @param {boolean} [visible=true] - false hides the footer
|
|
366
|
+
* @returns {void}
|
|
367
|
+
*
|
|
368
|
+
* @example
|
|
369
|
+
* // show the totals footer only while a filter is active
|
|
370
|
+
* tableApi.setFooterVisible(!!tableOptions.externalFilterFunction);
|
|
684
371
|
*/
|
|
685
|
-
setFooterVisible(
|
|
372
|
+
setFooterVisible(visible?: boolean): void;
|
|
686
373
|
/**
|
|
687
|
-
* Determines if the footer is visible.
|
|
374
|
+
* Determines if the footer is visible: it has at least one row and is not hidden with {@link setFooterVisible}.
|
|
688
375
|
*
|
|
689
376
|
* @returns {boolean} True if the footer is visible, false otherwise.
|
|
377
|
+
*
|
|
378
|
+
* @example
|
|
379
|
+
* const footerShown = tableApi.isFooterVisible();
|
|
690
380
|
*/
|
|
691
381
|
isFooterVisible(): boolean;
|
|
692
382
|
/**
|
|
@@ -708,12 +398,12 @@ export declare class TableApi {
|
|
|
708
398
|
*
|
|
709
399
|
* @example
|
|
710
400
|
* // Update selection and repaint to show the visual change
|
|
711
|
-
* tableApi.getSelectionModel()
|
|
401
|
+
* tableApi.getSelectionModel()?.togglePoint(2, 3);
|
|
712
402
|
* tableApi.repaint();
|
|
713
403
|
*
|
|
714
404
|
* @example
|
|
715
|
-
* // After changing
|
|
716
|
-
*
|
|
405
|
+
* // After changing values in the row objects yourself, repaint to show them
|
|
406
|
+
* orders[0].status = "paid";
|
|
717
407
|
* tableApi.repaint();
|
|
718
408
|
*
|
|
719
409
|
* @returns {void}
|
|
@@ -764,8 +454,9 @@ export declare class TableApi {
|
|
|
764
454
|
* });
|
|
765
455
|
*
|
|
766
456
|
* @example
|
|
767
|
-
* // Example 4: Using after changing
|
|
768
|
-
*
|
|
457
|
+
* // Example 4: Using after changing ColumnDefIf.isVisible yourself
|
|
458
|
+
* // (setColumnVisible() does this on its own)
|
|
459
|
+
* column.isVisible = FalseFn;
|
|
769
460
|
* tableApi.repaintHard();
|
|
770
461
|
*
|
|
771
462
|
* @returns {void} This method doesn't return a value
|
|
@@ -791,20 +482,9 @@ export declare class TableApi {
|
|
|
791
482
|
* the selection is cleared.
|
|
792
483
|
*
|
|
793
484
|
* @example
|
|
794
|
-
* // Clear all selections in the table
|
|
485
|
+
* // Clear all selections in the table (e.g. from a "reset" button)
|
|
795
486
|
* tableApi.clearSelection();
|
|
796
487
|
*
|
|
797
|
-
* // Example usage in a component
|
|
798
|
-
* class MyComponent {
|
|
799
|
-
* @ViewChild('tableComponent') tableComponent: TableComponent;
|
|
800
|
-
*
|
|
801
|
-
* resetTableSelection(): void {
|
|
802
|
-
* if (this.tableComponent?.api) {
|
|
803
|
-
* this.tableComponent.api.clearSelection();
|
|
804
|
-
* }
|
|
805
|
-
* }
|
|
806
|
-
* }
|
|
807
|
-
*
|
|
808
488
|
* @returns {void}
|
|
809
489
|
*/
|
|
810
490
|
clearSelection(): void;
|
|
@@ -886,6 +566,7 @@ export declare class TableApi {
|
|
|
886
566
|
*
|
|
887
567
|
* The copied data is formatted as tab-separated text that can be pasted into spreadsheet
|
|
888
568
|
* applications like Excel or text editors while maintaining the tabular structure.
|
|
569
|
+
* Screen readers hear "12 cells copied" ({@link AriaTextsIf.copied}).
|
|
889
570
|
*
|
|
890
571
|
* @example
|
|
891
572
|
* // Copy the currently selected data to clipboard
|
|
@@ -911,6 +592,189 @@ export declare class TableApi {
|
|
|
911
592
|
* The string contains the tab-separated representation of the selected table data.
|
|
912
593
|
*/
|
|
913
594
|
copyToClipboard(): Promise<string>;
|
|
595
|
+
/**
|
|
596
|
+
* Speaks a message to screen reader users through the live region of the table (`role="status"`,
|
|
597
|
+
* polite – it does not interrupt). The table itself announces sorting, filter results, copying and
|
|
598
|
+
* "select all"; use this for your own events, e.g. after loading or saving data.
|
|
599
|
+
*
|
|
600
|
+
* @example
|
|
601
|
+
* fetch("/api/orders").then(r => r.json()).then(orders => {
|
|
602
|
+
* tableApi.setRows(orders);
|
|
603
|
+
* tableApi.announce(`${orders.length} orders loaded`);
|
|
604
|
+
* });
|
|
605
|
+
*
|
|
606
|
+
* @param {string} text - plain text (not HTML)
|
|
607
|
+
* @since 1.1.91
|
|
608
|
+
* @see Training: [Accessible tables: keyboard and screen readers](https://gui.expert/training/accessibility/)
|
|
609
|
+
*/
|
|
610
|
+
announce(text: string): void;
|
|
611
|
+
/**
|
|
612
|
+
* Shows "Loading…" with a CSS spinner over the body – e.g. while a server answers. The header and footer stay
|
|
613
|
+
* readable; rows already shown stay visible under a semi-transparent layer. By default mouse and editing on the
|
|
614
|
+
* body are blocked until {@link hideOverlay} ({@link OverlayOptionsIf.blockInteractionWhileLoading}).
|
|
615
|
+
* Screen readers: the host gets `aria-busy="true"`, the text is announced.
|
|
616
|
+
*
|
|
617
|
+
* Texts, delay and own content: {@link TableOptionsIf.overlayOptions}. Framework wrappers have a `loading` prop
|
|
618
|
+
* that calls this method (no re-creation of the table).
|
|
619
|
+
*
|
|
620
|
+
* @example
|
|
621
|
+
* tableApi.showLoadingOverlay();
|
|
622
|
+
* fetch("/api/orders")
|
|
623
|
+
* .then(response => response.json())
|
|
624
|
+
* .then((orders: object[]) => {
|
|
625
|
+
* tableApi.setRows(orders);
|
|
626
|
+
* tableApi.repaintHard();
|
|
627
|
+
* })
|
|
628
|
+
* .finally(() => tableApi.hideOverlay()); // 0 rows? "No rows to show" appears by itself
|
|
629
|
+
*
|
|
630
|
+
* @param {string} [text] - text for this overlay only, e.g. `"Saving…"`; default {@link OverlayOptionsIf.loadingText}
|
|
631
|
+
* @since 1.1.92
|
|
632
|
+
* @see Training: [Live data](https://gui.expert/training/live-data/)
|
|
633
|
+
*/
|
|
634
|
+
showLoadingOverlay(text?: string): void;
|
|
635
|
+
/**
|
|
636
|
+
* Shows the "no rows" overlay, also over rows – e.g. when the server says "no permission". An empty body shows
|
|
637
|
+
* "No rows to show" anyway ({@link OverlayOptionsIf.autoNoRows}); this method is for other cases.
|
|
638
|
+
* Ends with {@link hideOverlay}.
|
|
639
|
+
*
|
|
640
|
+
* @example
|
|
641
|
+
* tableApi.showNoRowsOverlay("You may not see these orders");
|
|
642
|
+
*
|
|
643
|
+
* @param {string} [text] - text for this overlay only; default {@link OverlayOptionsIf.noRowsText}
|
|
644
|
+
* @since 1.1.92
|
|
645
|
+
*/
|
|
646
|
+
showNoRowsOverlay(text?: string): void;
|
|
647
|
+
/**
|
|
648
|
+
* Ends the overlay shown by {@link showLoadingOverlay} or {@link showNoRowsOverlay}.
|
|
649
|
+
* "No rows to show" / "No matching rows" are not ended: they show the state of the body and stay as long as it
|
|
650
|
+
* is empty (switch them off with `overlayOptions: { autoNoRows: false }`).
|
|
651
|
+
*
|
|
652
|
+
* @example
|
|
653
|
+
* tableApi.showLoadingOverlay("Saving…");
|
|
654
|
+
* save(order).finally(() => tableApi.hideOverlay());
|
|
655
|
+
*
|
|
656
|
+
* @since 1.1.92
|
|
657
|
+
*/
|
|
658
|
+
hideOverlay(): void;
|
|
659
|
+
/**
|
|
660
|
+
* The overlay shown now: `"none"`, `"loading"`, `"noRows"` or `"noMatches"`. During
|
|
661
|
+
* {@link OverlayOptionsIf.loadingDelayInMs} the loading overlay is requested but not shown yet – the automatic
|
|
662
|
+
* overlay stays meanwhile (e.g. `"noRows"` of an empty table), so a fast answer causes no flicker.
|
|
663
|
+
*
|
|
664
|
+
* @example
|
|
665
|
+
* if (tableApi.getOverlayState() === "noMatches") {
|
|
666
|
+
* resetFilterButton.hidden = false;
|
|
667
|
+
* }
|
|
668
|
+
*
|
|
669
|
+
* @returns {GeOverlayKind} the shown overlay
|
|
670
|
+
* @since 1.1.92
|
|
671
|
+
*/
|
|
672
|
+
getOverlayState(): GeOverlayKind;
|
|
673
|
+
/**
|
|
674
|
+
* The state of the table as plain JSON: column layout (order, widths, visibility), sorting, scroll position,
|
|
675
|
+
* expanded tree nodes, checked and selected rows, header groups and your own data ({@link setCustomState}).
|
|
676
|
+
* Columns are identified by property and rows by id ({@link AutoRestoreOptionsIf.getRowId}), never by index.
|
|
677
|
+
* Parts that do not apply to this table are left out (e.g. `tree` for a flat table).
|
|
678
|
+
*
|
|
679
|
+
* Store it wherever you like and give it back with {@link applyState} or {@link TableOptionsIf.initialState};
|
|
680
|
+
* {@link TableOptionsIf.autoRestoreOptions} does this for you in `localStorage`.
|
|
681
|
+
*
|
|
682
|
+
* @param {TableStatePart[]} [parts] - only these parts, default: all
|
|
683
|
+
* @returns {TableStateIf} the state
|
|
684
|
+
*
|
|
685
|
+
* @example
|
|
686
|
+
* const state = tableApi.getState(); // { version: 1, columns: [...], sort: [...], ... }
|
|
687
|
+
* await fetch("/api/prefs/orders", { method: "PUT", body: JSON.stringify(state) });
|
|
688
|
+
*
|
|
689
|
+
* @example
|
|
690
|
+
* const layout = tableApi.getState(["columns", "sort"]); // only the layout, no scroll position or selection
|
|
691
|
+
*
|
|
692
|
+
* @see Training: [Remember the state](https://gui.expert/training/persist-state/)
|
|
693
|
+
* @since 1.1.92
|
|
694
|
+
*/
|
|
695
|
+
getState(parts?: TableStatePart[]): TableStateIf;
|
|
696
|
+
/**
|
|
697
|
+
* Applies a state from {@link getState} (or one written by hand) and repaints. Only the parts contained in the
|
|
698
|
+
* state are applied (optionally only the given ones); the others stay as they are – pass a part empty to reset it,
|
|
699
|
+
* e.g. `sort: []` (clears the sort icons; the rows keep their current order). Unknown columns and rows are ignored. The change is stored ({@link TableOptionsIf.autoRestoreOptions})
|
|
700
|
+
* and reported ({@link EventListenerIf.onStateChanged}).
|
|
701
|
+
*
|
|
702
|
+
* @param {Partial<TableStateIf>} state - the state
|
|
703
|
+
* @param {TableStatePart[]} [parts] - only these parts, default: all parts of the state
|
|
704
|
+
*
|
|
705
|
+
* @example
|
|
706
|
+
* // two saved views of the same table
|
|
707
|
+
* const views: Record<string, TableStateIf> = {};
|
|
708
|
+
* views["compact"] = tableApi.getState(["columns"]);
|
|
709
|
+
* tableApi.applyState(views["compact"]);
|
|
710
|
+
*
|
|
711
|
+
* @example
|
|
712
|
+
* tableApi.applyState({ sort: [{ property: "total", sortState: "desc" }] });
|
|
713
|
+
*
|
|
714
|
+
* @since 1.1.92
|
|
715
|
+
*/
|
|
716
|
+
applyState(state: Partial<TableStateIf>, parts?: TableStatePart[]): void;
|
|
717
|
+
/**
|
|
718
|
+
* Back to the state of the code: column layout, sort icons and header groups as they were right after the table was
|
|
719
|
+
* built (before a stored state was applied) – tree, checked and selected rows too when they are remembered
|
|
720
|
+
* ({@link TableOptionsIf.autoRestoreOptions}) or given as {@link TableOptionsIf.initialState} –, scrolled to the top,
|
|
721
|
+
* custom data removed. Deletes the stored state. The rows keep their current order (a table has no "unsorted" order
|
|
722
|
+
* to go back to); only the sort icons of the code come back.
|
|
723
|
+
*
|
|
724
|
+
* @example
|
|
725
|
+
* document.querySelector("#reset-layout")!.addEventListener("click", () => tableApi.resetState());
|
|
726
|
+
*
|
|
727
|
+
* @since 1.1.92
|
|
728
|
+
*/
|
|
729
|
+
resetState(): void;
|
|
730
|
+
/**
|
|
731
|
+
* Stores data of your application with the table state (part `custom`), e.g. the text of a filter field. It is
|
|
732
|
+
* reported with {@link EventListenerIf.onStateChanged}, stored with `autoRestoreCustomState` and returned by
|
|
733
|
+
* {@link getState} – also after a reload, so you can restore your filter in `tableReady`. Must be JSON.
|
|
734
|
+
*
|
|
735
|
+
* @param {unknown} custom - your data (JSON)
|
|
736
|
+
*
|
|
737
|
+
* @example
|
|
738
|
+
* filterInput.addEventListener("input", () => {
|
|
739
|
+
* tableApi.setCustomState({ filter: filterInput.value });
|
|
740
|
+
* tableApi.externalFilterChanged();
|
|
741
|
+
* });
|
|
742
|
+
* // after a reload (tableReady):
|
|
743
|
+
* const custom = tableApi.getState(["custom"]).custom as { filter?: string } | undefined;
|
|
744
|
+
* filterInput.value = custom?.filter ?? "";
|
|
745
|
+
*
|
|
746
|
+
* @since 1.1.92
|
|
747
|
+
*/
|
|
748
|
+
setCustomState(custom: unknown): void;
|
|
749
|
+
/**
|
|
750
|
+
* Collapses or expands a header group ({@link CellGroupIf} with `toggle: true`) – like a click on its toggle.
|
|
751
|
+
*
|
|
752
|
+
* @param {string} id - {@link CellGroupIf.id}, otherwise the path of the labels, e.g. `"Customer"` or `"2026/Q1"`
|
|
753
|
+
* @param {boolean} collapsed - true = collapse
|
|
754
|
+
* @returns {boolean} false if the header has no such group
|
|
755
|
+
*
|
|
756
|
+
* @example
|
|
757
|
+
* tableApi.setHeaderGroupCollapsed("Customer", true);
|
|
758
|
+
*
|
|
759
|
+
* @since 1.1.92
|
|
760
|
+
*/
|
|
761
|
+
setHeaderGroupCollapsed(id: string, collapsed?: boolean): boolean;
|
|
762
|
+
/**
|
|
763
|
+
* The header cell that has the keyboard focus. Arrow up in the first body row moves the focus into the header
|
|
764
|
+
* (Enter sorts or opens/closes a header group there); arrow down leaves it. The {@link FocusModelIf} holds
|
|
765
|
+
* the body focus only and is not changed by this.
|
|
766
|
+
*
|
|
767
|
+
* @example
|
|
768
|
+
* const headerFocus = tableApi.getHeaderFocus();
|
|
769
|
+
* if (headerFocus) {
|
|
770
|
+
* const [headerRow, column] = headerFocus;
|
|
771
|
+
* console.log(`header cell ${headerRow}/${column} has the focus`);
|
|
772
|
+
* }
|
|
773
|
+
*
|
|
774
|
+
* @returns {[number, number] | undefined} header row index and column index, `undefined` if the focus is in the body
|
|
775
|
+
* @since 1.1.91
|
|
776
|
+
*/
|
|
777
|
+
getHeaderFocus(): [number, number] | undefined;
|
|
914
778
|
/**
|
|
915
779
|
* Downloads the current table data as an Excel file.
|
|
916
780
|
*
|
|
@@ -940,7 +804,7 @@ export declare class TableApi {
|
|
|
940
804
|
* // Download table data with custom filename only
|
|
941
805
|
* tableApi.downloadExcel('quarterly-data.xlsx');
|
|
942
806
|
*/
|
|
943
|
-
downloadExcel(fileName?: string, author?: string):
|
|
807
|
+
downloadExcel(fileName?: string, author?: string): Promise<void>;
|
|
944
808
|
/**
|
|
945
809
|
* Returns the TableScope instance associated with this TableApi.
|
|
946
810
|
*
|
|
@@ -996,7 +860,7 @@ export declare class TableApi {
|
|
|
996
860
|
*
|
|
997
861
|
* // Add a selection change listener
|
|
998
862
|
* selectionModel?.addEventSelectionChangedListener({
|
|
999
|
-
*
|
|
863
|
+
* onSelectionChanged: () => {
|
|
1000
864
|
* console.log('Selection has changed');
|
|
1001
865
|
* }
|
|
1002
866
|
* });
|
|
@@ -1047,6 +911,10 @@ export declare class TableApi {
|
|
|
1047
911
|
/**
|
|
1048
912
|
* Sets the rows data for the table body, replacing any existing rows.
|
|
1049
913
|
*
|
|
914
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
915
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
916
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
917
|
+
*
|
|
1050
918
|
* @template T - The type of elements in the rows array
|
|
1051
919
|
* @param {T[]} rows - An array of data objects to set as the table's rows
|
|
1052
920
|
*
|
|
@@ -1055,13 +923,15 @@ export declare class TableApi {
|
|
|
1055
923
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1056
924
|
*
|
|
1057
925
|
* @return {void} - This method doesn't return anything.
|
|
1058
|
-
*
|
|
1059
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1060
926
|
*/
|
|
1061
927
|
setRows<T>(rows: T[]): void;
|
|
1062
928
|
/**
|
|
1063
929
|
* Adds new rows to the end of the table body.
|
|
1064
930
|
*
|
|
931
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
932
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
933
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
934
|
+
*
|
|
1065
935
|
* @template T - The type of elements in the rows array
|
|
1066
936
|
* @param {T[]} rows - An array of data objects to append to the table's existing rows
|
|
1067
937
|
*
|
|
@@ -1071,12 +941,20 @@ export declare class TableApi {
|
|
|
1071
941
|
*
|
|
1072
942
|
* @return {void} - This method doesn't return anything.
|
|
1073
943
|
*
|
|
1074
|
-
*
|
|
944
|
+
*
|
|
945
|
+
* @example
|
|
946
|
+
* tableApi.addRows([{ id: 100_001, customer: "New GmbH" }]);
|
|
947
|
+
* tableApi.repaintHard();
|
|
948
|
+
* tableApi.ensureRowIsVisible(tableApi.getDisplayedRowCount() - 1);
|
|
1075
949
|
*/
|
|
1076
950
|
addRows<T>(rows: T[]): void;
|
|
1077
951
|
/**
|
|
1078
952
|
* Inserts new rows at a specific position in the table body.
|
|
1079
953
|
*
|
|
954
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
955
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
956
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
957
|
+
*
|
|
1080
958
|
* @template T - The type of elements in the rows array
|
|
1081
959
|
* @param {T[]} rows - An array of data objects to insert into the table
|
|
1082
960
|
* @param {number} rowIndex - The index position where the new rows should be inserted
|
|
@@ -1087,13 +965,15 @@ export declare class TableApi {
|
|
|
1087
965
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1088
966
|
*
|
|
1089
967
|
* @return {void} - This method doesn't return anything.
|
|
1090
|
-
*
|
|
1091
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1092
968
|
*/
|
|
1093
969
|
addRowsAt<T>(rows: T[], rowIndex: number): void;
|
|
1094
970
|
/**
|
|
1095
971
|
* Removes specified rows from the table body.
|
|
1096
972
|
*
|
|
973
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
974
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
975
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
976
|
+
*
|
|
1097
977
|
* @template T - The type of elements in the rows array
|
|
1098
978
|
* @param {T[]} rows - An array of data objects to remove from the table
|
|
1099
979
|
* @param {(a: T, b: T) => boolean} predicate - A comparison function that determines if two rows match
|
|
@@ -1105,13 +985,13 @@ export declare class TableApi {
|
|
|
1105
985
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1106
986
|
*
|
|
1107
987
|
* @return {void} - This method doesn't return anything.
|
|
1108
|
-
*
|
|
1109
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1110
988
|
*/
|
|
1111
989
|
removeRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): void;
|
|
1112
990
|
/**
|
|
1113
991
|
* Searches for and returns rows from the table body that match the given criteria.
|
|
1114
992
|
*
|
|
993
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
994
|
+
*
|
|
1115
995
|
* @template T - The type of elements in the rows array
|
|
1116
996
|
*
|
|
1117
997
|
* @description
|
|
@@ -1134,13 +1014,11 @@ export declare class TableApi {
|
|
|
1134
1014
|
*
|
|
1135
1015
|
* @example
|
|
1136
1016
|
* // Find rows with simple equality comparison
|
|
1137
|
-
* const matchingRows =
|
|
1017
|
+
* const matchingRows = tableApi.findRows([orders[0], orders[1]]);
|
|
1138
1018
|
*
|
|
1139
1019
|
* @example
|
|
1140
1020
|
* // Find rows with custom comparison logic
|
|
1141
|
-
* const matchingRows =
|
|
1142
|
-
*
|
|
1143
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1021
|
+
* const matchingRows = tableApi.findRows<Order>([{ ...orders[0] }], (a, b) => a.id === b.id);
|
|
1144
1022
|
*/
|
|
1145
1023
|
findRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): T[];
|
|
1146
1024
|
/**
|
|
@@ -1180,12 +1058,6 @@ export declare class TableApi {
|
|
|
1180
1058
|
* (criteria, row) => row.name.toLowerCase().includes(criteria.name!.toLowerCase())
|
|
1181
1059
|
* );
|
|
1182
1060
|
*
|
|
1183
|
-
* // Find a person within age range
|
|
1184
|
-
* const ageCriteria = { minAge: 25, maxAge: 35 };
|
|
1185
|
-
* const person3 = tableApi.findRowFromFilteredRowsByAllCriteria<Person>(
|
|
1186
|
-
* ageCriteria,
|
|
1187
|
-
* (criteria, row) => row.age >= criteria.minAge! && row.age <= criteria.maxAge!
|
|
1188
|
-
* );
|
|
1189
1061
|
* ```
|
|
1190
1062
|
*
|
|
1191
1063
|
* @throws {Warning} Logs a warning to console if the body model is not an instance of AreaModelObjectArray
|
|
@@ -1222,17 +1094,16 @@ export declare class TableApi {
|
|
|
1222
1094
|
* // Find a product row with partial match on name
|
|
1223
1095
|
* const criteria = { name: "Phone" };
|
|
1224
1096
|
* const product = tableApi.findRowFromAllRowsByAllCriteria(criteria,
|
|
1225
|
-
* (criteria, row) => row.name.includes(criteria.name)
|
|
1097
|
+
* (criteria, row) => row.name.includes(criteria.name!)
|
|
1226
1098
|
* );
|
|
1227
1099
|
*
|
|
1228
1100
|
* @example
|
|
1229
1101
|
* // Find an order with complex matching logic
|
|
1230
|
-
* const criteria = { total: 100, status: "
|
|
1231
|
-
* const order = tableApi.findRowFromAllRowsByAllCriteria(criteria,
|
|
1102
|
+
* const criteria = { total: 100, status: "paid" as const };
|
|
1103
|
+
* const order = tableApi.findRowFromAllRowsByAllCriteria<Order>(criteria,
|
|
1232
1104
|
* (criteria, row) => {
|
|
1233
|
-
* return row.total > criteria.total &&
|
|
1234
|
-
* row.status === criteria.status
|
|
1235
|
-
* row.items.length > 0;
|
|
1105
|
+
* return row.total > criteria.total! &&
|
|
1106
|
+
* row.status === criteria.status;
|
|
1236
1107
|
* }
|
|
1237
1108
|
* );
|
|
1238
1109
|
*
|
|
@@ -1242,6 +1113,9 @@ export declare class TableApi {
|
|
|
1242
1113
|
/**
|
|
1243
1114
|
* Updates existing rows in the table body with new data.
|
|
1244
1115
|
*
|
|
1116
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
1117
|
+
* The properties are copied into the existing objects; nothing is repainted – call {@link repaint} afterwards.
|
|
1118
|
+
*
|
|
1245
1119
|
* @template T - The type of elements in the rows array
|
|
1246
1120
|
* @param {T[]} rows - An array of data objects containing the updated values
|
|
1247
1121
|
* @param {(a: T, b: T) => boolean} predicate - A comparison function that determines which rows to update
|
|
@@ -1255,8 +1129,6 @@ export declare class TableApi {
|
|
|
1255
1129
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1256
1130
|
*
|
|
1257
1131
|
* @return {void} - This method doesn't return anything.
|
|
1258
|
-
*
|
|
1259
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1260
1132
|
*/
|
|
1261
1133
|
updateRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): void;
|
|
1262
1134
|
/**
|
|
@@ -1272,16 +1144,48 @@ export declare class TableApi {
|
|
|
1272
1144
|
*/
|
|
1273
1145
|
sortByColumn(column: number | string, sortState?: SortState): boolean;
|
|
1274
1146
|
/**
|
|
1275
|
-
* Re-applies the current sorting configuration to the table data.
|
|
1147
|
+
* Re-applies the current sorting configuration to the table data and repaints.
|
|
1276
1148
|
*
|
|
1277
1149
|
* @description
|
|
1278
|
-
*
|
|
1279
|
-
*
|
|
1280
|
-
* the sort columns or direction.
|
|
1150
|
+
* The current sorting is the last {@link sort} function, otherwise the columns with a sort state (the header icons,
|
|
1151
|
+
* also restored by `autoRestoreOptions`). Useful when the underlying data has changed and needs to be re-sorted
|
|
1152
|
+
* without changing the sort columns or direction. (Before 1.1.91 only the sort items stored by `autoRestoreOptions`
|
|
1153
|
+
* were used – without them `reSort()` did nothing.)
|
|
1154
|
+
*
|
|
1155
|
+
* @example
|
|
1156
|
+
* orders[0].total = 999_999;
|
|
1157
|
+
* tableApi.reSort();
|
|
1281
1158
|
*
|
|
1282
1159
|
* @return {void} - This method doesn't return anything.
|
|
1283
1160
|
*/
|
|
1284
1161
|
reSort(): void;
|
|
1162
|
+
/**
|
|
1163
|
+
* Tree tables: expands every row on every level (like the "expand all" icon in the header) and repaints.
|
|
1164
|
+
* No effect for other tables.
|
|
1165
|
+
*
|
|
1166
|
+
* @example
|
|
1167
|
+
* document.querySelector("#expand")!.addEventListener("click", () => tableApi.expandAll());
|
|
1168
|
+
*/
|
|
1169
|
+
expandAll(): void;
|
|
1170
|
+
/**
|
|
1171
|
+
* Tree tables: collapses every row on every level and repaints. No effect for other tables.
|
|
1172
|
+
*
|
|
1173
|
+
* @example
|
|
1174
|
+
* tableApi.collapseAll();
|
|
1175
|
+
*/
|
|
1176
|
+
collapseAll(): void;
|
|
1177
|
+
/**
|
|
1178
|
+
* Tree tables: expands or collapses the displayed body row `rowIndex` (like a click on its arrow), repaints and
|
|
1179
|
+
* remembers the state with `autoRestoreOptions`.
|
|
1180
|
+
*
|
|
1181
|
+
* @param {number} rowIndex - index of the displayed body row
|
|
1182
|
+
* @param {boolean} expanded - the new state
|
|
1183
|
+
* @returns {boolean} false if the table is no tree, the row does not exist or already has this state
|
|
1184
|
+
*
|
|
1185
|
+
* @example
|
|
1186
|
+
* tableApi.setRowExpanded(0, true); // expand the first row
|
|
1187
|
+
*/
|
|
1188
|
+
setRowExpanded(rowIndex: number, expanded: boolean): boolean;
|
|
1285
1189
|
/**
|
|
1286
1190
|
* Sorts the table data using a custom comparison function.
|
|
1287
1191
|
*
|
|
@@ -1299,7 +1203,7 @@ export declare class TableApi {
|
|
|
1299
1203
|
*
|
|
1300
1204
|
* @example
|
|
1301
1205
|
* // Sort table rows by a specific property in ascending order
|
|
1302
|
-
*
|
|
1206
|
+
* tableApi.sort((a: Person, b: Person) => {
|
|
1303
1207
|
* if (a.name < b.name) return -1;
|
|
1304
1208
|
* if (a.name > b.name) return 1;
|
|
1305
1209
|
* return 0;
|
|
@@ -1307,24 +1211,29 @@ export declare class TableApi {
|
|
|
1307
1211
|
*
|
|
1308
1212
|
* @example
|
|
1309
1213
|
* // Sort numbers in descending order
|
|
1310
|
-
*
|
|
1214
|
+
* tableApi.sort((a: { value: number }, b: { value: number }) => b.value - a.value);
|
|
1311
1215
|
*
|
|
1312
1216
|
* @example
|
|
1313
1217
|
* // Sort with multiple criteria
|
|
1314
|
-
*
|
|
1218
|
+
* tableApi.sort((a: Order, b: Order) => {
|
|
1315
1219
|
* // First sort by status
|
|
1316
1220
|
* const statusCompare = a.status.localeCompare(b.status);
|
|
1317
1221
|
* if (statusCompare !== 0) return statusCompare;
|
|
1318
1222
|
*
|
|
1319
1223
|
* // Then sort by name if status is equal
|
|
1320
|
-
* return a.
|
|
1224
|
+
* return a.customer.localeCompare(b.customer);
|
|
1321
1225
|
* });
|
|
1322
1226
|
*
|
|
1323
1227
|
* @example
|
|
1324
1228
|
* // Case-insensitive string sorting
|
|
1325
|
-
*
|
|
1229
|
+
* tableApi.sort((a: Person, b: Person) =>
|
|
1326
1230
|
* a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
|
1327
1231
|
* );
|
|
1232
|
+
*
|
|
1233
|
+
* @example
|
|
1234
|
+
* // Tree tables: the function compares the tree rows of siblings (your objects: a.data / b.data),
|
|
1235
|
+
* // children stay below their parent
|
|
1236
|
+
* tableApi.sort((a: TreeRowIf<OrderNode>, b: TreeRowIf<OrderNode>) => b.data.total - a.data.total);
|
|
1328
1237
|
*/
|
|
1329
1238
|
sort(compareFn: (a: any, b: any) => number): void;
|
|
1330
1239
|
/**
|
|
@@ -1344,41 +1253,32 @@ export declare class TableApi {
|
|
|
1344
1253
|
* // Ensure row 5 is visible in the viewport
|
|
1345
1254
|
* tableApi.ensureRowIsVisible(5);
|
|
1346
1255
|
*
|
|
1347
|
-
* @example
|
|
1348
|
-
* // Example usage in a component
|
|
1349
|
-
* class MyTableComponent {
|
|
1350
|
-
* private tableApi: TableApi;
|
|
1351
|
-
*
|
|
1352
|
-
* scrollToSpecificRow(rowIndex: number) {
|
|
1353
|
-
* // This will scroll the row into view if it's not visible
|
|
1354
|
-
* const didScroll = this.tableApi.ensureRowIsVisible(rowIndex);
|
|
1355
|
-
*
|
|
1356
|
-
* if (didScroll) {
|
|
1357
|
-
* console.log(`Table scrolled to show row ${rowIndex}`);
|
|
1358
|
-
* } else {
|
|
1359
|
-
* console.log(`Row ${rowIndex} was already visible`);
|
|
1360
|
-
* }
|
|
1361
|
-
* }
|
|
1362
|
-
* }
|
|
1363
|
-
*
|
|
1364
|
-
* @example
|
|
1365
|
-
* // Example with row selection
|
|
1366
|
-
* class TableHandler {
|
|
1367
|
-
* selectAndShowRow(rowIndex: number) {
|
|
1368
|
-
* // First ensure the row is visible
|
|
1369
|
-
* this.tableApi.ensureRowIsVisible(rowIndex);
|
|
1370
|
-
*
|
|
1371
|
-
* // Then perform selection
|
|
1372
|
-
* this.selectionModel.selectRow(rowIndex);
|
|
1373
|
-
* }
|
|
1374
|
-
* }
|
|
1375
|
-
*
|
|
1376
1256
|
* @throws {Error} Implicitly may throw if rowIndex is not a number or if required properties are undefined
|
|
1377
1257
|
*
|
|
1378
1258
|
* @see {@link scrollToIndex} - The underlying method used for scrolling
|
|
1379
1259
|
* @see {@link getDisplayedRowCount} - Related method for getting visible row count
|
|
1380
1260
|
*/
|
|
1381
1261
|
ensureRowIsVisible(rowIndex: number): boolean;
|
|
1262
|
+
/**
|
|
1263
|
+
* Ensures that a column is fully visible by scrolling horizontally if necessary – the counterpart of
|
|
1264
|
+
* {@link ensureRowIsVisible}. A column left of the viewport becomes the first visible column, a column right of it
|
|
1265
|
+
* the last one. The vertical position is kept. The arrow keys use it for the focused cell.
|
|
1266
|
+
*
|
|
1267
|
+
* Fixed columns (`fixedLeftColumnCount` / `fixedRightColumnCount`) are always visible, hidden columns
|
|
1268
|
+
* ({@link setColumnVisible}) can't be scrolled to: both return `false`.
|
|
1269
|
+
*
|
|
1270
|
+
* @param {number} columnIndex - The column index (model index over west + center + east)
|
|
1271
|
+
* @returns {boolean} true if the table was scrolled, false if the column was already visible
|
|
1272
|
+
*
|
|
1273
|
+
* @example
|
|
1274
|
+
* // show the column of a search hit (rowIndex/columnIndex from your own search)
|
|
1275
|
+
* const rowIndex = 1200, columnIndex = 14;
|
|
1276
|
+
* tableApi.ensureColumnIsVisible(columnIndex);
|
|
1277
|
+
* tableApi.ensureRowIsVisible(rowIndex);
|
|
1278
|
+
*
|
|
1279
|
+
* @see {@link scrollToIndex} - scrolls a column and row to the top left
|
|
1280
|
+
*/
|
|
1281
|
+
ensureColumnIsVisible(columnIndex: number): boolean;
|
|
1382
1282
|
/**
|
|
1383
1283
|
* Retrieves the number of rows currently displayed in the table.
|
|
1384
1284
|
*
|
|
@@ -1438,7 +1338,7 @@ export declare class TableApi {
|
|
|
1438
1338
|
* const firstFullVisibleRow = tableApi.getFirstFullVisibleRowIndex();
|
|
1439
1339
|
*
|
|
1440
1340
|
* // Check if a specific row is fully visible
|
|
1441
|
-
* const isRowFullyVisible = (rowIndex) => {
|
|
1341
|
+
* const isRowFullyVisible = (rowIndex: number) => {
|
|
1442
1342
|
* const firstFullVisible = tableApi.getFirstFullVisibleRowIndex();
|
|
1443
1343
|
* const lastFullVisible = tableApi.getLastFullVisibleRowIndex();
|
|
1444
1344
|
* return rowIndex >= firstFullVisible && rowIndex <= lastFullVisible;
|