@guiexpert/table 1.1.89 → 1.1.91
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/css/main.css +50 -4
- package/css/table-classes.css +30 -0
- package/css/table-color-classes.css +3 -1
- package/css/table-color-vars.css +4 -2
- package/css/table-tree.css +13 -1
- package/index.cjs +88 -97
- package/index.d.ts +192 -184
- package/index.js +3616 -1879
- 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 +53 -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 +64 -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/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 +32 -1
- package/lib/table/data/options/auto-restore-options.if.d.ts +8 -0
- 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/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/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 +44 -13
- package/lib/table/data/options/table-options.if.d.ts +117 -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 +6 -4
- package/lib/table/data/tablemodel/areamodel/area-model-cell-groups.d.ts +13 -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 +35 -31
- package/lib/table/data/tablemodel/areamodel/area-model-tree.d.ts +153 -11
- package/lib/table/data/tablemodel/areamodel/area-model.d.ts +66 -104
- package/lib/table/data/tablemodel/areamodel/area-model.if.d.ts +56 -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 +10 -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 +2 -1
- package/lib/table/data/tablemodel/cellgroup/cell-group.if.d.ts +28 -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 +6 -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 +36 -5
- package/lib/table/event-adapter.d.ts +17 -10
- package/lib/table/event-checkbox-changed-handler.d.ts +2 -1
- package/lib/table/event-listener.if.d.ts +42 -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 +81 -4
- 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 +18 -9
- package/lib/table/render-scope.d.ts +115 -25
- 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 +36 -13
- 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 +43 -3
- package/lib/table/service/excel-service.if.d.ts +8 -1
- 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/table-api.d.ts +309 -550
- package/lib/table/table-scope.d.ts +223 -85
- package/package.json +23 -8
package/lib/table/table-api.d.ts
CHANGED
|
@@ -1,352 +1,73 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
1
|
+
import { SortState } from './data/common/sort-state.type.js';
|
|
2
|
+
import { TableScope } from './table-scope.js';
|
|
3
|
+
import { ColumnDefIf } from './data/tablemodel/column/column-def.if.js';
|
|
4
|
+
import { TableCellUpdateEventIf } from './data/common/event/input/table-cell-update-event.if.js';
|
|
5
|
+
import { SelectionModel } from './selection/selection-model.js';
|
|
6
|
+
import { ActionId } from './action/action-id.type.js';
|
|
7
|
+
import { ShortcutActionIdMapping } from './action/shortcut-actionid-mapping.type.js';
|
|
8
|
+
import { SelectionModelIf } from './selection/selection-model.if.js';
|
|
9
|
+
import { TableModelIf } from './data/tablemodel/table-model.if.js';
|
|
10
|
+
import { AreaModelIf } from './data/tablemodel/areamodel/area-model.if.js';
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* The
|
|
27
|
-
*
|
|
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
|
-
* api.scrollToIndex(0, 10);
|
|
71
|
-
* api.repaint();
|
|
72
|
-
* ```
|
|
73
|
-
*
|
|
74
|
-
* ### 2. Chaining Operations
|
|
75
|
-
*
|
|
76
|
-
* While the TableApi doesn't support method chaining directly (most methods return void),
|
|
77
|
-
* you can group related operations together:
|
|
78
|
-
*
|
|
79
|
-
* ```typescript
|
|
80
|
-
* // Perform a sequence of related operations
|
|
81
|
-
* function updateTableSection(api, newRows, startIndex) {
|
|
82
|
-
* api.addRowsAt(newRows, startIndex);
|
|
83
|
-
* api.ensureRowIsVisible(startIndex);
|
|
84
|
-
* api.repaint();
|
|
85
|
-
* }
|
|
86
|
-
* ```
|
|
87
|
-
*
|
|
88
|
-
* ### 3. Event-Driven Updates
|
|
89
|
-
*
|
|
90
|
-
* Use the TableApi to respond to external events:
|
|
91
|
-
*
|
|
92
|
-
* ```typescript
|
|
93
|
-
* // Update table in response to user input
|
|
94
|
-
* searchInput.addEventListener('input', (e) => {
|
|
95
|
-
* const searchText = e.target.value;
|
|
96
|
-
* tableOptions.externalFilterFunction = row => row.name.includes(searchText);
|
|
97
|
-
* tableApi.externalFilterChanged();
|
|
98
|
-
* });
|
|
99
|
-
* ```
|
|
100
|
-
*
|
|
101
|
-
* ### 4. Integration with Application State
|
|
102
|
-
*
|
|
103
|
-
* Synchronize table state with application state:
|
|
104
|
-
*
|
|
105
|
-
* ```typescript
|
|
106
|
-
* // In a state management effect or watcher
|
|
107
|
-
* function onAppStateChanged(newState) {
|
|
108
|
-
* if (newState.tableData !== currentTableData) {
|
|
109
|
-
* tableApi.setRows(newState.tableData);
|
|
110
|
-
* tableApi.repaint();
|
|
111
|
-
* currentTableData = newState.tableData;
|
|
112
|
-
* }
|
|
113
|
-
* }
|
|
114
|
-
* ```
|
|
115
|
-
*
|
|
116
|
-
* ## Performance Considerations
|
|
117
|
-
*
|
|
118
|
-
* The TableApi provides methods that are optimized for different performance scenarios:
|
|
119
|
-
*
|
|
120
|
-
* - For frequent small updates: Use `updateCells()` with `repaintAll=false`
|
|
121
|
-
* - For complete data replacement: Use `setRows()`
|
|
122
|
-
* - For structural changes: Follow with `repaintHard()`
|
|
123
|
-
* - For visual-only changes: Use `repaint()`
|
|
124
|
-
*
|
|
125
|
-
* ## Common Use Cases
|
|
126
|
-
*
|
|
127
|
-
* ### Real-time Data Updates
|
|
128
|
-
*
|
|
129
|
-
* ```typescript
|
|
130
|
-
* // Update specific cells with new values from a data stream
|
|
131
|
-
* dataStream.subscribe(update => {
|
|
132
|
-
* const cellUpdates = update.changes.map(change => ({
|
|
133
|
-
* area: 'body',
|
|
134
|
-
* rowIndex: change.rowIndex,
|
|
135
|
-
* columnIndex: change.columnIndex,
|
|
136
|
-
* value: change.newValue,
|
|
137
|
-
* cssClasses: { 'updated': true }
|
|
138
|
-
* }));
|
|
139
|
-
*
|
|
140
|
-
* tableApi.updateCells(cellUpdates);
|
|
141
|
-
* });
|
|
142
|
-
* ```
|
|
143
|
-
*
|
|
144
|
-
* ### Interactive Filtering
|
|
145
|
-
*
|
|
146
|
-
* ```typescript
|
|
147
|
-
* // Set up filter controls
|
|
148
|
-
* function applyFilters(filters) {
|
|
149
|
-
* tableOptions.externalFilterFunction = row => {
|
|
150
|
-
* return Object.entries(filters).every(([key, value]) => {
|
|
151
|
-
* if (!value) return true; // Skip empty filters
|
|
152
|
-
* return row[key].toString().includes(value);
|
|
153
|
-
* });
|
|
154
|
-
* };
|
|
155
|
-
*
|
|
156
|
-
* tableApi.externalFilterChanged();
|
|
157
|
-
* }
|
|
158
|
-
* ```
|
|
159
|
-
*
|
|
160
|
-
* ### Custom Sorting
|
|
161
|
-
*
|
|
162
|
-
* ```typescript
|
|
163
|
-
* // Apply multi-column sorting
|
|
164
|
-
* function sortByMultipleColumns(sortConfig) {
|
|
165
|
-
* tableApi.sort((a, b) => {
|
|
166
|
-
* for (const {column, direction} of sortConfig) {
|
|
167
|
-
* const aValue = a[column];
|
|
168
|
-
* const bValue = b[column];
|
|
169
|
-
* const comparison = compare(aValue, bValue);
|
|
170
|
-
*
|
|
171
|
-
* if (comparison !== 0) {
|
|
172
|
-
* return direction === 'asc' ? comparison : -comparison;
|
|
173
|
-
* }
|
|
174
|
-
* }
|
|
175
|
-
* return 0;
|
|
176
|
-
* });
|
|
177
|
-
* }
|
|
178
|
-
*
|
|
179
|
-
* function compare(a, b) {
|
|
180
|
-
* if (typeof a === 'string' && typeof b === 'string') {
|
|
181
|
-
* return a.localeCompare(b);
|
|
182
|
-
* }
|
|
183
|
-
* return a < b ? -1 : a > b ? 1 : 0;
|
|
184
|
-
* }
|
|
185
|
-
* ```
|
|
186
|
-
*
|
|
187
|
-
* ### Row Management
|
|
188
|
-
*
|
|
189
|
-
* ```typescript
|
|
190
|
-
* // Add, update, and remove rows based on user interactions
|
|
191
|
-
* function onAddRow(newRow) {
|
|
192
|
-
* tableApi.addRows([newRow]);
|
|
193
|
-
* tableApi.ensureRowIsVisible(tableApi.getDisplayedRowCount() - 1);
|
|
194
|
-
* }
|
|
195
|
-
*
|
|
196
|
-
* function onUpdateRow(updatedRow) {
|
|
197
|
-
* tableApi.updateRows([updatedRow], (a, b) => a.id === b.id);
|
|
198
|
-
* }
|
|
199
|
-
*
|
|
200
|
-
* function onDeleteRow(rowToDelete) {
|
|
201
|
-
* tableApi.removeRows([rowToDelete], (a, b) => a.id === b.id);
|
|
202
|
-
* }
|
|
203
|
-
* ```
|
|
204
|
-
*
|
|
205
|
-
* ### Export and Reporting
|
|
206
|
-
*
|
|
207
|
-
* ```typescript
|
|
208
|
-
* // Set up export buttons
|
|
209
|
-
* exportButton.addEventListener('click', () => {
|
|
210
|
-
* tableApi.downloadExcel('report.xlsx', 'Report Generator');
|
|
211
|
-
* });
|
|
212
|
-
*
|
|
213
|
-
* copyButton.addEventListener('click', () => {
|
|
214
|
-
* tableApi.copyToClipboard()
|
|
215
|
-
* .then(() => showNotification('Data copied to clipboard'))
|
|
216
|
-
* .catch(err => showError('Failed to copy data', err));
|
|
217
|
-
* });
|
|
218
|
-
* ```
|
|
219
|
-
*
|
|
220
|
-
* ### Responsive Behavior
|
|
221
|
-
*
|
|
222
|
-
* ```typescript
|
|
223
|
-
* // Handle window resize events
|
|
224
|
-
* window.addEventListener('resize', () => {
|
|
225
|
-
* tableApi.autoResizeColumns();
|
|
226
|
-
* tableApi.repaintHard();
|
|
227
|
-
* });
|
|
228
|
-
* ```
|
|
229
|
-
*
|
|
230
|
-
* ## Integration with Frameworks
|
|
231
|
-
*
|
|
232
|
-
* ### React
|
|
233
|
-
*
|
|
234
|
-
* ```jsx
|
|
235
|
-
* function DataTable({ data, onRowSelect }) {
|
|
236
|
-
* const tableRef = useRef(null);
|
|
237
|
-
*
|
|
238
|
-
* useEffect(() => {
|
|
239
|
-
* if (tableRef.current && tableRef.current.api) {
|
|
240
|
-
* tableRef.current.api.setRows(data);
|
|
241
|
-
* tableRef.current.api.repaint();
|
|
242
|
-
* }
|
|
243
|
-
* }, [data]);
|
|
244
|
-
*
|
|
245
|
-
* return <div ref={tableRef} className="table-container" />;
|
|
246
|
-
* }
|
|
247
|
-
* ```
|
|
248
|
-
*
|
|
249
|
-
* ### Vue
|
|
250
|
-
*
|
|
251
|
-
* ```vue
|
|
252
|
-
* <template>
|
|
253
|
-
* <div ref="tableContainer"></div>
|
|
254
|
-
* </template>
|
|
255
|
-
*
|
|
256
|
-
* <script>
|
|
257
|
-
* export default {
|
|
258
|
-
* props: ['tableData'],
|
|
259
|
-
* watch: {
|
|
260
|
-
* tableData(newData) {
|
|
261
|
-
* if (this.tableApi) {
|
|
262
|
-
* this.tableApi.setRows(newData);
|
|
263
|
-
* this.tableApi.repaint();
|
|
264
|
-
* }
|
|
265
|
-
* }
|
|
266
|
-
* },
|
|
267
|
-
* mounted() {
|
|
268
|
-
* // Initialize table and get API reference
|
|
269
|
-
* this.tableApi = initializeTable(this.$refs.tableContainer).api;
|
|
270
|
-
* }
|
|
271
|
-
* }
|
|
272
|
-
* </script>
|
|
273
|
-
* ```
|
|
274
|
-
*
|
|
275
|
-
* ### Angular
|
|
276
|
-
*
|
|
277
|
-
* ```typescript
|
|
278
|
-
* @Component({
|
|
279
|
-
* selector: 'app-data-table',
|
|
280
|
-
* template: '<div #tableContainer></div>'
|
|
281
|
-
* })
|
|
282
|
-
* export class DataTableComponent implements OnInit, OnChanges {
|
|
283
|
-
* @Input() data: any[];
|
|
284
|
-
* @ViewChild('tableContainer') tableContainer: ElementRef;
|
|
285
|
-
*
|
|
286
|
-
* private tableApi: TableApi;
|
|
287
|
-
*
|
|
288
|
-
* ngOnInit() {
|
|
289
|
-
* this.tableApi = initializeTable(this.tableContainer.nativeElement).api;
|
|
290
|
-
* }
|
|
291
|
-
*
|
|
292
|
-
* ngOnChanges(changes) {
|
|
293
|
-
* if (changes.data && this.tableApi) {
|
|
294
|
-
* this.tableApi.setRows(this.data);
|
|
295
|
-
* this.tableApi.repaint();
|
|
296
|
-
* }
|
|
297
|
-
* }
|
|
298
|
-
* }
|
|
299
|
-
* ```
|
|
300
|
-
*
|
|
301
|
-
* ## Error Handling
|
|
302
|
-
*
|
|
303
|
-
* The TableApi methods generally don't throw exceptions, but instead log warnings to the console
|
|
304
|
-
* when operations cannot be completed (e.g., when trying to use row operations on an incompatible
|
|
305
|
-
* area model type). It's good practice to check console warnings during development.
|
|
306
|
-
*
|
|
307
|
-
* For asynchronous operations like clipboard access, proper error handling should be used:
|
|
308
|
-
*
|
|
309
|
-
* ```typescript
|
|
310
|
-
* tableApi.copyToClipboard()
|
|
311
|
-
* .then(content => {
|
|
312
|
-
* console.log('Copied to clipboard:', content);
|
|
313
|
-
* })
|
|
314
|
-
* .catch(error => {
|
|
315
|
-
* console.error('Failed to copy to clipboard:', error);
|
|
316
|
-
* // Show user-friendly error message
|
|
317
|
-
* });
|
|
318
|
-
* ```
|
|
319
|
-
*
|
|
320
|
-
* ## Debugging
|
|
321
|
-
*
|
|
322
|
-
* For troubleshooting complex table behavior, the logging system can be enabled:
|
|
323
|
-
*
|
|
324
|
-
* ```typescript
|
|
325
|
-
* // Enable detailed logging
|
|
326
|
-
* tableApi.setLoggingActive(true);
|
|
327
|
-
*
|
|
328
|
-
* // Perform operations that need debugging
|
|
329
|
-
* tableApi.updateCells([...]);
|
|
330
|
-
* tableApi.scrollToIndex(5, 10);
|
|
331
|
-
*
|
|
332
|
-
* // Check if logging is active
|
|
333
|
-
* const isLogging = tableApi.isLoggingActive();
|
|
334
|
-
*
|
|
335
|
-
* // Disable logging when done
|
|
336
|
-
* tableApi.setLoggingActive(false);
|
|
337
|
-
* ```
|
|
338
|
-
*
|
|
339
|
-
* ## Advanced Usage
|
|
340
|
-
*
|
|
341
|
-
* For advanced scenarios, you can access the underlying TableScope:
|
|
342
|
-
*
|
|
343
|
-
* ```typescript
|
|
344
|
-
* const tableScope = tableApi.getTableScope();
|
|
345
|
-
* // Now you can access internal implementation details
|
|
346
|
-
* // Note: This is generally not recommended unless absolutely necessary
|
|
347
|
-
* ```
|
|
348
|
-
*
|
|
349
|
-
* @class TableApi
|
|
13
|
+
* The public API of one table – everything you do with a table after it has been created:
|
|
14
|
+
* scrolling, sorting, filtering, selection, copy, Excel export, updating cells and rows, repainting.
|
|
15
|
+
*
|
|
16
|
+
* Every table has exactly one `TableApi`. You never create it yourself – you get it:
|
|
17
|
+
*
|
|
18
|
+
* | Where | How |
|
|
19
|
+
* |---|---|
|
|
20
|
+
* | Plain TypeScript | `new TableScope(host, model, new SimpleDomService(), options, listener).firstInit().getApi()` |
|
|
21
|
+
* | Web Component | `el.addEventListener("tableReady", e => e.detail)` |
|
|
22
|
+
* | React / Preact / Solid | `<GuiexpertTable tableReady={api => …} />` |
|
|
23
|
+
* | Vue 3 | `<GuiexpertTable @tableReady="api => …" />` |
|
|
24
|
+
* | Svelte 5 | `<GuiexpertTable onTableReady={api => …} />` |
|
|
25
|
+
* | Angular | `<guiexpert-table (tableReady)="onReady($event)" />` |
|
|
26
|
+
*
|
|
27
|
+
* ## The most important methods
|
|
28
|
+
*
|
|
29
|
+
* | Task | Methods |
|
|
30
|
+
* |---|---|
|
|
31
|
+
* | scroll | {@link scrollToIndex}, {@link ensureRowIsVisible}, {@link ensureColumnIsVisible}, {@link scrollToPixel}, {@link getFirstVisibleRowIndex} |
|
|
32
|
+
* | sort | {@link sortByColumn}, {@link sort}, {@link reSort} |
|
|
33
|
+
* | filter | {@link externalFilterChanged} (with {@link TableOptionsIf.externalFilterFunction}) |
|
|
34
|
+
* | export | {@link copyToClipboard}, {@link downloadExcel} |
|
|
35
|
+
* | change data | {@link updateCells}, {@link setRows}, {@link addRows}, {@link updateRows}, {@link removeRows} |
|
|
36
|
+
* | redraw | {@link repaint} (same row count), {@link repaintHard} (row count or heights changed) |
|
|
37
|
+
* | columns | {@link autoResizeColumns}, {@link setColumnWidth}, {@link recalcColumnWidths} |
|
|
38
|
+
* | tree | {@link expandAll}, {@link collapseAll}, {@link setRowExpanded} |
|
|
39
|
+
* | lifecycle | {@link destroy} |
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* // plain TypeScript: create a table and talk to it
|
|
43
|
+
* const tableModel = TableFactory.createTableModel({ rows: orders });
|
|
44
|
+
* const tableApi = new TableScope(host, tableModel, new SimpleDomService(), new TableOptions(), new EventAdapter())
|
|
45
|
+
* .firstInit()
|
|
46
|
+
* .getApi();
|
|
47
|
+
*
|
|
48
|
+
* tableApi.scrollToIndex(0, 50_000); // column 0, row 50,000
|
|
49
|
+
* tableApi.sortByColumn("total", "desc"); // like a double-click on the header
|
|
50
|
+
* await tableApi.copyToClipboard(); // the current selection, tab-separated
|
|
51
|
+
* await tableApi.downloadExcel("orders.xlsx"); // the current view as .xlsx
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* // live data: change single cells, only the visible ones are redrawn
|
|
55
|
+
* tableApi.updateCells([
|
|
56
|
+
* new TableCellUpdateEvent("body", 3, 2, 101.5, { "tick-up": true }),
|
|
57
|
+
* new TableCellUpdateEvent("body", 3, 3, 0.42)
|
|
58
|
+
* ]);
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* // replace the rows of an object-array table – the row count changes, so repaint hard
|
|
62
|
+
* tableApi.setRows(newOrders);
|
|
63
|
+
* tableApi.externalFilterChanged(); // only if a filter function is set
|
|
64
|
+
* tableApi.repaintHard();
|
|
65
|
+
*
|
|
66
|
+
* @see Training: [Your first table](https://gui.expert/training/first-table/),
|
|
67
|
+
* [Sorting](https://gui.expert/training/sorting/), [Filtering](https://gui.expert/training/filtering/),
|
|
68
|
+
* [Excel export](https://gui.expert/training/excel-export/), [Live data](https://gui.expert/training/live-data/)
|
|
69
|
+
*
|
|
70
|
+
* @category Table & API
|
|
350
71
|
*/
|
|
351
72
|
export declare class TableApi {
|
|
352
73
|
readonly tableScope: TableScope;
|
|
@@ -495,7 +216,8 @@ export declare class TableApi {
|
|
|
495
216
|
*
|
|
496
217
|
* @example
|
|
497
218
|
* // Scroll only vertically, keeping the current horizontal position
|
|
498
|
-
*
|
|
219
|
+
* // (an omitted or undefined px means 0; for rows use scrollToIndex(-1, rowIndex))
|
|
220
|
+
* tableApi.scrollToPixel(tableApi.getTableScope().scrollViewport.scrollLeft, 300);
|
|
499
221
|
*
|
|
500
222
|
* @example
|
|
501
223
|
* // Example in a component that needs precise scrolling control
|
|
@@ -521,58 +243,6 @@ export declare class TableApi {
|
|
|
521
243
|
* }
|
|
522
244
|
* }
|
|
523
245
|
*
|
|
524
|
-
* @example
|
|
525
|
-
* // Advanced usage with animated scrolling
|
|
526
|
-
* class SmoothScroller {
|
|
527
|
-
* private tableApi: TableApi;
|
|
528
|
-
* private animationFrameId: number | null = null;
|
|
529
|
-
*
|
|
530
|
-
* constructor(tableApi: TableApi) {
|
|
531
|
-
* this.tableApi = tableApi;
|
|
532
|
-
* }
|
|
533
|
-
*
|
|
534
|
-
* smoothScrollTo(targetX: number, targetY: number, duration: number = 500) {
|
|
535
|
-
* // Cancel any ongoing animation
|
|
536
|
-
* if (this.animationFrameId !== null) {
|
|
537
|
-
* cancelAnimationFrame(this.animationFrameId);
|
|
538
|
-
* }
|
|
539
|
-
*
|
|
540
|
-
* const startTime = performance.now();
|
|
541
|
-
* const startX = this.tableApi.getTableScope().getScrollLeft();
|
|
542
|
-
* const startY = this.tableApi.getTableScope().getScrollTop();
|
|
543
|
-
* const distanceX = targetX - startX;
|
|
544
|
-
* const distanceY = targetY - startY;
|
|
545
|
-
*
|
|
546
|
-
* const step = (currentTime: number) => {
|
|
547
|
-
* const elapsed = currentTime - startTime;
|
|
548
|
-
* const progress = Math.min(elapsed / duration, 1);
|
|
549
|
-
*
|
|
550
|
-
* // Use easing function for smooth animation
|
|
551
|
-
* const easeProgress = 1 - Math.pow(1 - progress, 3); // Cubic ease-out
|
|
552
|
-
*
|
|
553
|
-
* const currentX = startX + distanceX * easeProgress;
|
|
554
|
-
* const currentY = startY + distanceY * easeProgress;
|
|
555
|
-
*
|
|
556
|
-
* this.tableApi.scrollToPixel(currentX, currentY);
|
|
557
|
-
*
|
|
558
|
-
* if (progress < 1) {
|
|
559
|
-
* this.animationFrameId = requestAnimationFrame(step);
|
|
560
|
-
* } else {
|
|
561
|
-
* this.animationFrameId = null;
|
|
562
|
-
* }
|
|
563
|
-
* };
|
|
564
|
-
*
|
|
565
|
-
* this.animationFrameId = requestAnimationFrame(step);
|
|
566
|
-
* }
|
|
567
|
-
*
|
|
568
|
-
* cancelAnimation() {
|
|
569
|
-
* if (this.animationFrameId !== null) {
|
|
570
|
-
* cancelAnimationFrame(this.animationFrameId);
|
|
571
|
-
* this.animationFrameId = null;
|
|
572
|
-
* }
|
|
573
|
-
* }
|
|
574
|
-
* }
|
|
575
|
-
*
|
|
576
246
|
* @see {@link scrollToIndex} - For scrolling based on row and column indices
|
|
577
247
|
* @see {@link ensureRowIsVisible} - For scrolling to make a specific row visible
|
|
578
248
|
*/
|
|
@@ -580,112 +250,130 @@ export declare class TableApi {
|
|
|
580
250
|
/**
|
|
581
251
|
* Scrolls the table to display the specified row and column indices at the top-left corner of the viewport.
|
|
582
252
|
*
|
|
583
|
-
*
|
|
584
|
-
*
|
|
253
|
+
* The row becomes the first row of the body, the column the first column of the scrollable (center) part –
|
|
254
|
+
* as far as the scroll range allows: the last columns and rows cannot move further than to the right/bottom edge.
|
|
255
|
+
*
|
|
256
|
+
* Fixed columns (`fixedLeftColumnCount` / `fixedRightColumnCount`) are always visible: a fixed west column scrolls
|
|
257
|
+
* back to the start (x = 0), a fixed east column – and `-1` or any other index outside the columns – keeps the
|
|
258
|
+
* current horizontal position.
|
|
585
259
|
*
|
|
586
|
-
* @param {number} indexX - The
|
|
260
|
+
* @param {number} indexX - The column index (model index, fixed columns included) to scroll to.
|
|
261
|
+
* Defaults to 0 (first column). `-1` keeps the horizontal position.
|
|
587
262
|
* @param {number} indexY - The vertical index (row) to scroll to. Defaults to 0 (topmost row).
|
|
588
263
|
* @returns {void}
|
|
589
264
|
*
|
|
590
265
|
* @example
|
|
591
266
|
* // Scroll to the 5th row, keeping the current horizontal scroll position
|
|
592
|
-
* tableApi.scrollToIndex(
|
|
267
|
+
* tableApi.scrollToIndex(-1, 5);
|
|
593
268
|
*
|
|
594
269
|
* @example
|
|
595
270
|
* // Scroll to column 3, row 10
|
|
596
271
|
* tableApi.scrollToIndex(3, 10);
|
|
597
272
|
*
|
|
598
273
|
* @example
|
|
599
|
-
* //
|
|
600
|
-
*
|
|
601
|
-
* private tableApi: TableApi;
|
|
602
|
-
*
|
|
603
|
-
* constructor(tableApi: TableApi) {
|
|
604
|
-
* this.tableApi = tableApi;
|
|
605
|
-
* }
|
|
606
|
-
*
|
|
607
|
-
* goToCell(columnIndex: number, rowIndex: number) {
|
|
608
|
-
* // Navigate directly to the specified cell position
|
|
609
|
-
* this.tableApi.scrollToIndex(columnIndex, rowIndex);
|
|
610
|
-
*
|
|
611
|
-
* // Optional: Select the cell after navigating to it
|
|
612
|
-
* const selectionModel = this.tableApi.getSelectionModel();
|
|
613
|
-
* if (selectionModel) {
|
|
614
|
-
* selectionModel.selectCell(rowIndex, columnIndex);
|
|
615
|
-
* }
|
|
616
|
-
* }
|
|
617
|
-
* }
|
|
618
|
-
*
|
|
619
|
-
* @example
|
|
620
|
-
* // Advanced usage with search functionality
|
|
621
|
-
* class TableSearcher {
|
|
622
|
-
* findAndScrollToMatch(searchTerm: string) {
|
|
623
|
-
* const tableModel = this.tableApi.getTableModel();
|
|
624
|
-
* const bodyModel = tableModel.getAreaModel('body');
|
|
625
|
-
*
|
|
626
|
-
* // Search for the term in the table data
|
|
627
|
-
* for (let row = 0; row < bodyModel.getRowCount(); row++) {
|
|
628
|
-
* for (let col = 0; col < tableModel.getColumnCount(); col++) {
|
|
629
|
-
* const cellContent = bodyModel.getValueAt(row, col)?.toString() || '';
|
|
630
|
-
*
|
|
631
|
-
* if (cellContent.includes(searchTerm)) {
|
|
632
|
-
* // Found a match, scroll to it
|
|
633
|
-
* this.tableApi.scrollToIndex(col, row);
|
|
634
|
-
* return true;
|
|
635
|
-
* }
|
|
636
|
-
* }
|
|
637
|
-
* }
|
|
638
|
-
*
|
|
639
|
-
* return false; // No match found
|
|
640
|
-
* }
|
|
641
|
-
* }
|
|
274
|
+
* // Scroll to column 3, keeping the rows that are currently shown
|
|
275
|
+
* tableApi.scrollToIndex(3, tableApi.getFirstVisibleRowIndex());
|
|
642
276
|
*
|
|
643
277
|
* @see {@link scrollToPixel} - For scrolling to specific pixel coordinates
|
|
644
278
|
* @see {@link ensureRowIsVisible} - For scrolling to make a specific row visible
|
|
645
279
|
*/
|
|
646
280
|
scrollToIndex(indexX?: number, indexY?: number): void;
|
|
647
281
|
/**
|
|
648
|
-
*
|
|
282
|
+
* Shows or hides the header and repaints the table.
|
|
283
|
+
*
|
|
284
|
+
* A hidden header takes no space – the body moves up and shows more rows. The header rows stay in the model
|
|
285
|
+
* (labels, sort icons, header groups), so `setHeaderVisible(true)` brings them back unchanged.
|
|
286
|
+
* Requires a {@link TableModel} (what all factories create).
|
|
649
287
|
*
|
|
650
|
-
* @param
|
|
288
|
+
* @param {boolean} [visible=true] - false hides the header
|
|
289
|
+
* @returns {void}
|
|
290
|
+
*
|
|
291
|
+
* @example
|
|
292
|
+
* // a compact view without column headers
|
|
293
|
+
* tableApi.setHeaderVisible(false);
|
|
651
294
|
*
|
|
652
|
-
* @
|
|
295
|
+
* @example
|
|
296
|
+
* // toggle from a button
|
|
297
|
+
* document.querySelector("#toggle-header")!.addEventListener("click", () =>
|
|
298
|
+
* tableApi.setHeaderVisible(!tableApi.isHeaderVisible()));
|
|
653
299
|
*/
|
|
654
|
-
setHeaderVisible(
|
|
300
|
+
setHeaderVisible(visible?: boolean): void;
|
|
655
301
|
/**
|
|
656
|
-
*
|
|
302
|
+
* Shows or hides a column and repaints the table.
|
|
303
|
+
*
|
|
304
|
+
* The column keeps its definition, its position (also when other columns are dragged) and its width:
|
|
305
|
+
* a hidden column is just not rendered (width 0), not copied ({@link copyToClipboard}) and not exported
|
|
306
|
+
* ({@link downloadExcel}). Showing it again restores the previous width. Works for fixed columns, too.
|
|
657
307
|
*
|
|
658
|
-
* @
|
|
659
|
-
*
|
|
308
|
+
* The same as {@link ColumnDefIf.isVisible} – this method sets it to {@link TrueFn} / {@link FalseFn} (an own
|
|
309
|
+
* `isVisible` function of the column is replaced). Columns without a column definition (e.g. `bodyData` +
|
|
310
|
+
* `columnSizes` without `columnDefs`) can't be hidden.
|
|
660
311
|
*
|
|
661
|
-
* @
|
|
312
|
+
* @param {number | string | ColumnDefIf} column - column index (fixed columns included), property (e.g. `"category"`)
|
|
313
|
+
* or the column definition
|
|
314
|
+
* @param {boolean} [visible=true] - false hides the column
|
|
315
|
+
* @returns {boolean} false if the column (definition) does not exist
|
|
316
|
+
*
|
|
317
|
+
* @example
|
|
318
|
+
* // hide a column by property, show it again later
|
|
319
|
+
* tableApi.setColumnVisible("category", false);
|
|
320
|
+
* tableApi.setColumnVisible("category", true);
|
|
321
|
+
*
|
|
322
|
+
* @example
|
|
323
|
+
* // a checkbox list "visible columns"
|
|
324
|
+
* tableApi.getTableModel().getColumnDefs()?.forEach((columnDef, index) => {
|
|
325
|
+
* const checkbox = document.createElement("input");
|
|
326
|
+
* checkbox.type = "checkbox";
|
|
327
|
+
* checkbox.checked = tableApi.isColumnVisible(index);
|
|
328
|
+
* checkbox.addEventListener("change", () => tableApi.setColumnVisible(columnDef, checkbox.checked));
|
|
329
|
+
* document.body.append(checkbox, columnDef.headerLabel);
|
|
330
|
+
* });
|
|
662
331
|
*/
|
|
663
|
-
setColumnVisible(
|
|
332
|
+
setColumnVisible(column: number | string | ColumnDefIf, visible?: boolean): boolean;
|
|
664
333
|
/**
|
|
665
|
-
* Returns whether a column is visible
|
|
334
|
+
* Returns whether a column is visible ({@link ColumnDefIf.isVisible}, see {@link setColumnVisible}).
|
|
335
|
+
* Columns without a column definition are always visible.
|
|
666
336
|
*
|
|
667
|
-
* @param {number | ColumnDefIf}
|
|
668
|
-
* @return {boolean} - True if the column is visible, false
|
|
337
|
+
* @param {number | string | ColumnDefIf} column - column index, property or column definition
|
|
338
|
+
* @return {boolean} - True if the column is visible, false if it is hidden or does not exist.
|
|
339
|
+
*
|
|
340
|
+
* @example
|
|
341
|
+
* if (!tableApi.isColumnVisible("category")) {
|
|
342
|
+
* tableApi.setColumnVisible("category", true);
|
|
343
|
+
* }
|
|
669
344
|
*/
|
|
670
|
-
isColumnVisible(
|
|
345
|
+
isColumnVisible(column: number | string | ColumnDefIf): boolean;
|
|
671
346
|
/**
|
|
672
|
-
* Checks if the header is visible.
|
|
347
|
+
* Checks if the header is visible: it has at least one row and is not hidden with {@link setHeaderVisible}.
|
|
673
348
|
*
|
|
674
349
|
* @return {boolean} - Returns true if the header is visible, otherwise returns false.
|
|
350
|
+
*
|
|
351
|
+
* @example
|
|
352
|
+
* const headerShown = tableApi.isHeaderVisible();
|
|
675
353
|
*/
|
|
676
354
|
isHeaderVisible(): boolean;
|
|
677
355
|
/**
|
|
678
|
-
*
|
|
356
|
+
* Shows or hides the footer and repaints the table.
|
|
679
357
|
*
|
|
680
|
-
*
|
|
358
|
+
* A hidden footer takes no space – the body gets taller. Its rows stay in the model, so `setFooterVisible(true)`
|
|
359
|
+
* brings them back (an own footer model, e.g. totals, is asked for its values again).
|
|
360
|
+
* Requires a {@link TableModel} (what all factories create).
|
|
681
361
|
*
|
|
682
|
-
* @
|
|
362
|
+
* @param {boolean} [visible=true] - false hides the footer
|
|
363
|
+
* @returns {void}
|
|
364
|
+
*
|
|
365
|
+
* @example
|
|
366
|
+
* // show the totals footer only while a filter is active
|
|
367
|
+
* tableApi.setFooterVisible(!!tableOptions.externalFilterFunction);
|
|
683
368
|
*/
|
|
684
|
-
setFooterVisible(
|
|
369
|
+
setFooterVisible(visible?: boolean): void;
|
|
685
370
|
/**
|
|
686
|
-
* Determines if the footer is visible.
|
|
371
|
+
* Determines if the footer is visible: it has at least one row and is not hidden with {@link setFooterVisible}.
|
|
687
372
|
*
|
|
688
373
|
* @returns {boolean} True if the footer is visible, false otherwise.
|
|
374
|
+
*
|
|
375
|
+
* @example
|
|
376
|
+
* const footerShown = tableApi.isFooterVisible();
|
|
689
377
|
*/
|
|
690
378
|
isFooterVisible(): boolean;
|
|
691
379
|
/**
|
|
@@ -707,12 +395,12 @@ export declare class TableApi {
|
|
|
707
395
|
*
|
|
708
396
|
* @example
|
|
709
397
|
* // Update selection and repaint to show the visual change
|
|
710
|
-
* tableApi.getSelectionModel()
|
|
398
|
+
* tableApi.getSelectionModel()?.togglePoint(2, 3);
|
|
711
399
|
* tableApi.repaint();
|
|
712
400
|
*
|
|
713
401
|
* @example
|
|
714
|
-
* // After changing
|
|
715
|
-
*
|
|
402
|
+
* // After changing values in the row objects yourself, repaint to show them
|
|
403
|
+
* orders[0].status = "paid";
|
|
716
404
|
* tableApi.repaint();
|
|
717
405
|
*
|
|
718
406
|
* @returns {void}
|
|
@@ -763,8 +451,9 @@ export declare class TableApi {
|
|
|
763
451
|
* });
|
|
764
452
|
*
|
|
765
453
|
* @example
|
|
766
|
-
* // Example 4: Using after changing
|
|
767
|
-
*
|
|
454
|
+
* // Example 4: Using after changing ColumnDefIf.isVisible yourself
|
|
455
|
+
* // (setColumnVisible() does this on its own)
|
|
456
|
+
* column.isVisible = FalseFn;
|
|
768
457
|
* tableApi.repaintHard();
|
|
769
458
|
*
|
|
770
459
|
* @returns {void} This method doesn't return a value
|
|
@@ -790,20 +479,9 @@ export declare class TableApi {
|
|
|
790
479
|
* the selection is cleared.
|
|
791
480
|
*
|
|
792
481
|
* @example
|
|
793
|
-
* // Clear all selections in the table
|
|
482
|
+
* // Clear all selections in the table (e.g. from a "reset" button)
|
|
794
483
|
* tableApi.clearSelection();
|
|
795
484
|
*
|
|
796
|
-
* // Example usage in a component
|
|
797
|
-
* class MyComponent {
|
|
798
|
-
* @ViewChild('tableComponent') tableComponent: TableComponent;
|
|
799
|
-
*
|
|
800
|
-
* resetTableSelection(): void {
|
|
801
|
-
* if (this.tableComponent?.api) {
|
|
802
|
-
* this.tableComponent.api.clearSelection();
|
|
803
|
-
* }
|
|
804
|
-
* }
|
|
805
|
-
* }
|
|
806
|
-
*
|
|
807
485
|
* @returns {void}
|
|
808
486
|
*/
|
|
809
487
|
clearSelection(): void;
|
|
@@ -885,6 +563,7 @@ export declare class TableApi {
|
|
|
885
563
|
*
|
|
886
564
|
* The copied data is formatted as tab-separated text that can be pasted into spreadsheet
|
|
887
565
|
* applications like Excel or text editors while maintaining the tabular structure.
|
|
566
|
+
* Screen readers hear "12 cells copied" ({@link AriaTextsIf.copied}).
|
|
888
567
|
*
|
|
889
568
|
* @example
|
|
890
569
|
* // Copy the currently selected data to clipboard
|
|
@@ -910,6 +589,38 @@ export declare class TableApi {
|
|
|
910
589
|
* The string contains the tab-separated representation of the selected table data.
|
|
911
590
|
*/
|
|
912
591
|
copyToClipboard(): Promise<string>;
|
|
592
|
+
/**
|
|
593
|
+
* Speaks a message to screen reader users through the live region of the table (`role="status"`,
|
|
594
|
+
* polite – it does not interrupt). The table itself announces sorting, filter results, copying and
|
|
595
|
+
* "select all"; use this for your own events, e.g. after loading or saving data.
|
|
596
|
+
*
|
|
597
|
+
* @example
|
|
598
|
+
* fetch("/api/orders").then(r => r.json()).then(orders => {
|
|
599
|
+
* tableApi.setRows(orders);
|
|
600
|
+
* tableApi.announce(`${orders.length} orders loaded`);
|
|
601
|
+
* });
|
|
602
|
+
*
|
|
603
|
+
* @param {string} text - plain text (not HTML)
|
|
604
|
+
* @since 1.1.91
|
|
605
|
+
* @see Training: [Accessible tables: keyboard and screen readers](https://gui.expert/training/accessibility/)
|
|
606
|
+
*/
|
|
607
|
+
announce(text: string): void;
|
|
608
|
+
/**
|
|
609
|
+
* The header cell that has the keyboard focus. Arrow up in the first body row moves the focus into the header
|
|
610
|
+
* (Enter sorts or opens/closes a header group there); arrow down leaves it. The {@link FocusModelIf} holds
|
|
611
|
+
* the body focus only and is not changed by this.
|
|
612
|
+
*
|
|
613
|
+
* @example
|
|
614
|
+
* const headerFocus = tableApi.getHeaderFocus();
|
|
615
|
+
* if (headerFocus) {
|
|
616
|
+
* const [headerRow, column] = headerFocus;
|
|
617
|
+
* console.log(`header cell ${headerRow}/${column} has the focus`);
|
|
618
|
+
* }
|
|
619
|
+
*
|
|
620
|
+
* @returns {[number, number] | undefined} header row index and column index, `undefined` if the focus is in the body
|
|
621
|
+
* @since 1.1.91
|
|
622
|
+
*/
|
|
623
|
+
getHeaderFocus(): [number, number] | undefined;
|
|
913
624
|
/**
|
|
914
625
|
* Downloads the current table data as an Excel file.
|
|
915
626
|
*
|
|
@@ -925,7 +636,7 @@ export declare class TableApi {
|
|
|
925
636
|
* @param {string} fileName - The name of the Excel file to be downloaded (default: 'table.xlsx')
|
|
926
637
|
* @param {string} author - Optional metadata for the Excel file to specify the author (default: '')
|
|
927
638
|
*
|
|
928
|
-
* @returns {void}
|
|
639
|
+
* @returns {Promise<void>} resolves when the (compressed) file has been handed to the browser
|
|
929
640
|
*
|
|
930
641
|
* @example
|
|
931
642
|
* // Download table data with default filename
|
|
@@ -939,7 +650,7 @@ export declare class TableApi {
|
|
|
939
650
|
* // Download table data with custom filename only
|
|
940
651
|
* tableApi.downloadExcel('quarterly-data.xlsx');
|
|
941
652
|
*/
|
|
942
|
-
downloadExcel(fileName?: string, author?: string): void
|
|
653
|
+
downloadExcel(fileName?: string, author?: string): Promise<void>;
|
|
943
654
|
/**
|
|
944
655
|
* Returns the TableScope instance associated with this TableApi.
|
|
945
656
|
*
|
|
@@ -995,7 +706,7 @@ export declare class TableApi {
|
|
|
995
706
|
*
|
|
996
707
|
* // Add a selection change listener
|
|
997
708
|
* selectionModel?.addEventSelectionChangedListener({
|
|
998
|
-
*
|
|
709
|
+
* onSelectionChanged: () => {
|
|
999
710
|
* console.log('Selection has changed');
|
|
1000
711
|
* }
|
|
1001
712
|
* });
|
|
@@ -1046,6 +757,10 @@ export declare class TableApi {
|
|
|
1046
757
|
/**
|
|
1047
758
|
* Sets the rows data for the table body, replacing any existing rows.
|
|
1048
759
|
*
|
|
760
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
761
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
762
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
763
|
+
*
|
|
1049
764
|
* @template T - The type of elements in the rows array
|
|
1050
765
|
* @param {T[]} rows - An array of data objects to set as the table's rows
|
|
1051
766
|
*
|
|
@@ -1054,13 +769,15 @@ export declare class TableApi {
|
|
|
1054
769
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1055
770
|
*
|
|
1056
771
|
* @return {void} - This method doesn't return anything.
|
|
1057
|
-
*
|
|
1058
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1059
772
|
*/
|
|
1060
773
|
setRows<T>(rows: T[]): void;
|
|
1061
774
|
/**
|
|
1062
775
|
* Adds new rows to the end of the table body.
|
|
1063
776
|
*
|
|
777
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
778
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
779
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
780
|
+
*
|
|
1064
781
|
* @template T - The type of elements in the rows array
|
|
1065
782
|
* @param {T[]} rows - An array of data objects to append to the table's existing rows
|
|
1066
783
|
*
|
|
@@ -1070,12 +787,20 @@ export declare class TableApi {
|
|
|
1070
787
|
*
|
|
1071
788
|
* @return {void} - This method doesn't return anything.
|
|
1072
789
|
*
|
|
1073
|
-
*
|
|
790
|
+
*
|
|
791
|
+
* @example
|
|
792
|
+
* tableApi.addRows([{ id: 100_001, customer: "New GmbH" }]);
|
|
793
|
+
* tableApi.repaintHard();
|
|
794
|
+
* tableApi.ensureRowIsVisible(tableApi.getDisplayedRowCount() - 1);
|
|
1074
795
|
*/
|
|
1075
796
|
addRows<T>(rows: T[]): void;
|
|
1076
797
|
/**
|
|
1077
798
|
* Inserts new rows at a specific position in the table body.
|
|
1078
799
|
*
|
|
800
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
801
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
802
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
803
|
+
*
|
|
1079
804
|
* @template T - The type of elements in the rows array
|
|
1080
805
|
* @param {T[]} rows - An array of data objects to insert into the table
|
|
1081
806
|
* @param {number} rowIndex - The index position where the new rows should be inserted
|
|
@@ -1086,13 +811,15 @@ export declare class TableApi {
|
|
|
1086
811
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1087
812
|
*
|
|
1088
813
|
* @return {void} - This method doesn't return anything.
|
|
1089
|
-
*
|
|
1090
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1091
814
|
*/
|
|
1092
815
|
addRowsAt<T>(rows: T[], rowIndex: number): void;
|
|
1093
816
|
/**
|
|
1094
817
|
* Removes specified rows from the table body.
|
|
1095
818
|
*
|
|
819
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
820
|
+
* Does **not** repaint and resets filtering and sorting of the body: afterwards call
|
|
821
|
+
* {@link externalFilterChanged} (if a filter function is set) and {@link repaintHard} (the row count changed).
|
|
822
|
+
*
|
|
1096
823
|
* @template T - The type of elements in the rows array
|
|
1097
824
|
* @param {T[]} rows - An array of data objects to remove from the table
|
|
1098
825
|
* @param {(a: T, b: T) => boolean} predicate - A comparison function that determines if two rows match
|
|
@@ -1104,13 +831,13 @@ export declare class TableApi {
|
|
|
1104
831
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1105
832
|
*
|
|
1106
833
|
* @return {void} - This method doesn't return anything.
|
|
1107
|
-
*
|
|
1108
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1109
834
|
*/
|
|
1110
835
|
removeRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): void;
|
|
1111
836
|
/**
|
|
1112
837
|
* Searches for and returns rows from the table body that match the given criteria.
|
|
1113
838
|
*
|
|
839
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
840
|
+
*
|
|
1114
841
|
* @template T - The type of elements in the rows array
|
|
1115
842
|
*
|
|
1116
843
|
* @description
|
|
@@ -1133,13 +860,11 @@ export declare class TableApi {
|
|
|
1133
860
|
*
|
|
1134
861
|
* @example
|
|
1135
862
|
* // Find rows with simple equality comparison
|
|
1136
|
-
* const matchingRows =
|
|
863
|
+
* const matchingRows = tableApi.findRows([orders[0], orders[1]]);
|
|
1137
864
|
*
|
|
1138
865
|
* @example
|
|
1139
866
|
* // Find rows with custom comparison logic
|
|
1140
|
-
* const matchingRows =
|
|
1141
|
-
*
|
|
1142
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
867
|
+
* const matchingRows = tableApi.findRows<Order>([{ ...orders[0] }], (a, b) => a.id === b.id);
|
|
1143
868
|
*/
|
|
1144
869
|
findRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): T[];
|
|
1145
870
|
/**
|
|
@@ -1179,12 +904,6 @@ export declare class TableApi {
|
|
|
1179
904
|
* (criteria, row) => row.name.toLowerCase().includes(criteria.name!.toLowerCase())
|
|
1180
905
|
* );
|
|
1181
906
|
*
|
|
1182
|
-
* // Find a person within age range
|
|
1183
|
-
* const ageCriteria = { minAge: 25, maxAge: 35 };
|
|
1184
|
-
* const person3 = tableApi.findRowFromFilteredRowsByAllCriteria<Person>(
|
|
1185
|
-
* ageCriteria,
|
|
1186
|
-
* (criteria, row) => row.age >= criteria.minAge! && row.age <= criteria.maxAge!
|
|
1187
|
-
* );
|
|
1188
907
|
* ```
|
|
1189
908
|
*
|
|
1190
909
|
* @throws {Warning} Logs a warning to console if the body model is not an instance of AreaModelObjectArray
|
|
@@ -1221,17 +940,16 @@ export declare class TableApi {
|
|
|
1221
940
|
* // Find a product row with partial match on name
|
|
1222
941
|
* const criteria = { name: "Phone" };
|
|
1223
942
|
* const product = tableApi.findRowFromAllRowsByAllCriteria(criteria,
|
|
1224
|
-
* (criteria, row) => row.name.includes(criteria.name)
|
|
943
|
+
* (criteria, row) => row.name.includes(criteria.name!)
|
|
1225
944
|
* );
|
|
1226
945
|
*
|
|
1227
946
|
* @example
|
|
1228
947
|
* // Find an order with complex matching logic
|
|
1229
|
-
* const criteria = { total: 100, status: "
|
|
1230
|
-
* const order = tableApi.findRowFromAllRowsByAllCriteria(criteria,
|
|
948
|
+
* const criteria = { total: 100, status: "paid" as const };
|
|
949
|
+
* const order = tableApi.findRowFromAllRowsByAllCriteria<Order>(criteria,
|
|
1231
950
|
* (criteria, row) => {
|
|
1232
|
-
* return row.total > criteria.total &&
|
|
1233
|
-
* row.status === criteria.status
|
|
1234
|
-
* row.items.length > 0;
|
|
951
|
+
* return row.total > criteria.total! &&
|
|
952
|
+
* row.status === criteria.status;
|
|
1235
953
|
* }
|
|
1236
954
|
* );
|
|
1237
955
|
*
|
|
@@ -1241,6 +959,9 @@ export declare class TableApi {
|
|
|
1241
959
|
/**
|
|
1242
960
|
* Updates existing rows in the table body with new data.
|
|
1243
961
|
*
|
|
962
|
+
* Only works with an {@link AreaModelObjectArray} body – logs a console warning otherwise.
|
|
963
|
+
* The properties are copied into the existing objects; nothing is repainted – call {@link repaint} afterwards.
|
|
964
|
+
*
|
|
1244
965
|
* @template T - The type of elements in the rows array
|
|
1245
966
|
* @param {T[]} rows - An array of data objects containing the updated values
|
|
1246
967
|
* @param {(a: T, b: T) => boolean} predicate - A comparison function that determines which rows to update
|
|
@@ -1254,21 +975,63 @@ export declare class TableApi {
|
|
|
1254
975
|
* It only works with tables that use AreaModelObjectArray as their body model.
|
|
1255
976
|
*
|
|
1256
977
|
* @return {void} - This method doesn't return anything.
|
|
1257
|
-
*
|
|
1258
|
-
* @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
|
|
1259
978
|
*/
|
|
1260
979
|
updateRows<T>(rows: T[], predicate?: (a: T, b: T) => boolean): void;
|
|
1261
980
|
/**
|
|
1262
|
-
*
|
|
981
|
+
* Sorts by one column from code – e.g. from your own button – exactly like a double click on the
|
|
982
|
+
* column header: rows, header icon, filter (sort order survives filtering) and auto-restore.
|
|
983
|
+
*
|
|
984
|
+
* @param {number | string} column - column index or property, e.g. `"total"`
|
|
985
|
+
* @param {SortState} [sortState] - `"asc"` or `"desc"`; omitted: toggles like the header (asc → desc → …)
|
|
986
|
+
* @returns {boolean} false if the column does not exist
|
|
987
|
+
*
|
|
988
|
+
* @example
|
|
989
|
+
* document.querySelector("#by-total")!.addEventListener("click", () => tableApi.sortByColumn("total", "desc"));
|
|
990
|
+
*/
|
|
991
|
+
sortByColumn(column: number | string, sortState?: SortState): boolean;
|
|
992
|
+
/**
|
|
993
|
+
* Re-applies the current sorting configuration to the table data and repaints.
|
|
1263
994
|
*
|
|
1264
995
|
* @description
|
|
1265
|
-
*
|
|
1266
|
-
*
|
|
1267
|
-
* the sort columns or direction.
|
|
996
|
+
* The current sorting is the last {@link sort} function, otherwise the columns with a sort state (the header icons,
|
|
997
|
+
* also restored by `autoRestoreOptions`). Useful when the underlying data has changed and needs to be re-sorted
|
|
998
|
+
* without changing the sort columns or direction. (Before 1.1.91 only the sort items stored by `autoRestoreOptions`
|
|
999
|
+
* were used – without them `reSort()` did nothing.)
|
|
1000
|
+
*
|
|
1001
|
+
* @example
|
|
1002
|
+
* orders[0].total = 999_999;
|
|
1003
|
+
* tableApi.reSort();
|
|
1268
1004
|
*
|
|
1269
1005
|
* @return {void} - This method doesn't return anything.
|
|
1270
1006
|
*/
|
|
1271
1007
|
reSort(): void;
|
|
1008
|
+
/**
|
|
1009
|
+
* Tree tables: expands every row on every level (like the "expand all" icon in the header) and repaints.
|
|
1010
|
+
* No effect for other tables.
|
|
1011
|
+
*
|
|
1012
|
+
* @example
|
|
1013
|
+
* document.querySelector("#expand")!.addEventListener("click", () => tableApi.expandAll());
|
|
1014
|
+
*/
|
|
1015
|
+
expandAll(): void;
|
|
1016
|
+
/**
|
|
1017
|
+
* Tree tables: collapses every row on every level and repaints. No effect for other tables.
|
|
1018
|
+
*
|
|
1019
|
+
* @example
|
|
1020
|
+
* tableApi.collapseAll();
|
|
1021
|
+
*/
|
|
1022
|
+
collapseAll(): void;
|
|
1023
|
+
/**
|
|
1024
|
+
* Tree tables: expands or collapses the displayed body row `rowIndex` (like a click on its arrow), repaints and
|
|
1025
|
+
* remembers the state with `autoRestoreOptions`.
|
|
1026
|
+
*
|
|
1027
|
+
* @param {number} rowIndex - index of the displayed body row
|
|
1028
|
+
* @param {boolean} expanded - the new state
|
|
1029
|
+
* @returns {boolean} false if the table is no tree, the row does not exist or already has this state
|
|
1030
|
+
*
|
|
1031
|
+
* @example
|
|
1032
|
+
* tableApi.setRowExpanded(0, true); // expand the first row
|
|
1033
|
+
*/
|
|
1034
|
+
setRowExpanded(rowIndex: number, expanded: boolean): boolean;
|
|
1272
1035
|
/**
|
|
1273
1036
|
* Sorts the table data using a custom comparison function.
|
|
1274
1037
|
*
|
|
@@ -1286,7 +1049,7 @@ export declare class TableApi {
|
|
|
1286
1049
|
*
|
|
1287
1050
|
* @example
|
|
1288
1051
|
* // Sort table rows by a specific property in ascending order
|
|
1289
|
-
*
|
|
1052
|
+
* tableApi.sort((a: Person, b: Person) => {
|
|
1290
1053
|
* if (a.name < b.name) return -1;
|
|
1291
1054
|
* if (a.name > b.name) return 1;
|
|
1292
1055
|
* return 0;
|
|
@@ -1294,24 +1057,29 @@ export declare class TableApi {
|
|
|
1294
1057
|
*
|
|
1295
1058
|
* @example
|
|
1296
1059
|
* // Sort numbers in descending order
|
|
1297
|
-
*
|
|
1060
|
+
* tableApi.sort((a: { value: number }, b: { value: number }) => b.value - a.value);
|
|
1298
1061
|
*
|
|
1299
1062
|
* @example
|
|
1300
1063
|
* // Sort with multiple criteria
|
|
1301
|
-
*
|
|
1064
|
+
* tableApi.sort((a: Order, b: Order) => {
|
|
1302
1065
|
* // First sort by status
|
|
1303
1066
|
* const statusCompare = a.status.localeCompare(b.status);
|
|
1304
1067
|
* if (statusCompare !== 0) return statusCompare;
|
|
1305
1068
|
*
|
|
1306
1069
|
* // Then sort by name if status is equal
|
|
1307
|
-
* return a.
|
|
1070
|
+
* return a.customer.localeCompare(b.customer);
|
|
1308
1071
|
* });
|
|
1309
1072
|
*
|
|
1310
1073
|
* @example
|
|
1311
1074
|
* // Case-insensitive string sorting
|
|
1312
|
-
*
|
|
1075
|
+
* tableApi.sort((a: Person, b: Person) =>
|
|
1313
1076
|
* a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
|
1314
1077
|
* );
|
|
1078
|
+
*
|
|
1079
|
+
* @example
|
|
1080
|
+
* // Tree tables: the function compares the tree rows of siblings (your objects: a.data / b.data),
|
|
1081
|
+
* // children stay below their parent
|
|
1082
|
+
* tableApi.sort((a: TreeRowIf<OrderNode>, b: TreeRowIf<OrderNode>) => b.data.total - a.data.total);
|
|
1315
1083
|
*/
|
|
1316
1084
|
sort(compareFn: (a: any, b: any) => number): void;
|
|
1317
1085
|
/**
|
|
@@ -1331,41 +1099,32 @@ export declare class TableApi {
|
|
|
1331
1099
|
* // Ensure row 5 is visible in the viewport
|
|
1332
1100
|
* tableApi.ensureRowIsVisible(5);
|
|
1333
1101
|
*
|
|
1334
|
-
* @example
|
|
1335
|
-
* // Example usage in a component
|
|
1336
|
-
* class MyTableComponent {
|
|
1337
|
-
* private tableApi: TableApi;
|
|
1338
|
-
*
|
|
1339
|
-
* scrollToSpecificRow(rowIndex: number) {
|
|
1340
|
-
* // This will scroll the row into view if it's not visible
|
|
1341
|
-
* const didScroll = this.tableApi.ensureRowIsVisible(rowIndex);
|
|
1342
|
-
*
|
|
1343
|
-
* if (didScroll) {
|
|
1344
|
-
* console.log(`Table scrolled to show row ${rowIndex}`);
|
|
1345
|
-
* } else {
|
|
1346
|
-
* console.log(`Row ${rowIndex} was already visible`);
|
|
1347
|
-
* }
|
|
1348
|
-
* }
|
|
1349
|
-
* }
|
|
1350
|
-
*
|
|
1351
|
-
* @example
|
|
1352
|
-
* // Example with row selection
|
|
1353
|
-
* class TableHandler {
|
|
1354
|
-
* selectAndShowRow(rowIndex: number) {
|
|
1355
|
-
* // First ensure the row is visible
|
|
1356
|
-
* this.tableApi.ensureRowIsVisible(rowIndex);
|
|
1357
|
-
*
|
|
1358
|
-
* // Then perform selection
|
|
1359
|
-
* this.selectionModel.selectRow(rowIndex);
|
|
1360
|
-
* }
|
|
1361
|
-
* }
|
|
1362
|
-
*
|
|
1363
1102
|
* @throws {Error} Implicitly may throw if rowIndex is not a number or if required properties are undefined
|
|
1364
1103
|
*
|
|
1365
1104
|
* @see {@link scrollToIndex} - The underlying method used for scrolling
|
|
1366
1105
|
* @see {@link getDisplayedRowCount} - Related method for getting visible row count
|
|
1367
1106
|
*/
|
|
1368
1107
|
ensureRowIsVisible(rowIndex: number): boolean;
|
|
1108
|
+
/**
|
|
1109
|
+
* Ensures that a column is fully visible by scrolling horizontally if necessary – the counterpart of
|
|
1110
|
+
* {@link ensureRowIsVisible}. A column left of the viewport becomes the first visible column, a column right of it
|
|
1111
|
+
* the last one. The vertical position is kept. The arrow keys use it for the focused cell.
|
|
1112
|
+
*
|
|
1113
|
+
* Fixed columns (`fixedLeftColumnCount` / `fixedRightColumnCount`) are always visible, hidden columns
|
|
1114
|
+
* ({@link setColumnVisible}) can't be scrolled to: both return `false`.
|
|
1115
|
+
*
|
|
1116
|
+
* @param {number} columnIndex - The column index (model index over west + center + east)
|
|
1117
|
+
* @returns {boolean} true if the table was scrolled, false if the column was already visible
|
|
1118
|
+
*
|
|
1119
|
+
* @example
|
|
1120
|
+
* // show the column of a search hit (rowIndex/columnIndex from your own search)
|
|
1121
|
+
* const rowIndex = 1200, columnIndex = 14;
|
|
1122
|
+
* tableApi.ensureColumnIsVisible(columnIndex);
|
|
1123
|
+
* tableApi.ensureRowIsVisible(rowIndex);
|
|
1124
|
+
*
|
|
1125
|
+
* @see {@link scrollToIndex} - scrolls a column and row to the top left
|
|
1126
|
+
*/
|
|
1127
|
+
ensureColumnIsVisible(columnIndex: number): boolean;
|
|
1369
1128
|
/**
|
|
1370
1129
|
* Retrieves the number of rows currently displayed in the table.
|
|
1371
1130
|
*
|
|
@@ -1425,7 +1184,7 @@ export declare class TableApi {
|
|
|
1425
1184
|
* const firstFullVisibleRow = tableApi.getFirstFullVisibleRowIndex();
|
|
1426
1185
|
*
|
|
1427
1186
|
* // Check if a specific row is fully visible
|
|
1428
|
-
* const isRowFullyVisible = (rowIndex) => {
|
|
1187
|
+
* const isRowFullyVisible = (rowIndex: number) => {
|
|
1429
1188
|
* const firstFullVisible = tableApi.getFirstFullVisibleRowIndex();
|
|
1430
1189
|
* const lastFullVisible = tableApi.getLastFullVisibleRowIndex();
|
|
1431
1190
|
* return rowIndex >= firstFullVisible && rowIndex <= lastFullVisible;
|