@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.
Files changed (205) hide show
  1. package/README.md +3 -1
  2. package/css/main.css +50 -4
  3. package/css/table-classes.css +30 -0
  4. package/css/table-color-classes.css +3 -1
  5. package/css/table-color-vars.css +4 -2
  6. package/css/table-tree.css +13 -1
  7. package/index.cjs +88 -97
  8. package/index.d.ts +192 -184
  9. package/index.js +3616 -1879
  10. package/lib/common/debounce.d.ts +1 -0
  11. package/lib/common/decorator/avoid-double-execution.decorator.d.ts +2 -0
  12. package/lib/common/escape-html.d.ts +22 -0
  13. package/lib/common/generator/column-def-generator-service.d.ts +2 -1
  14. package/lib/common/generator/domain/property-type.d.ts +19 -0
  15. package/lib/common/generator/domain/value-info.d.ts +2 -1
  16. package/lib/common/generator/json-service.d.ts +1 -0
  17. package/lib/common/generator/property-type.service.d.ts +3 -2
  18. package/lib/common/generator/scheme-generator-service.d.ts +3 -1
  19. package/lib/common/generator/string-util.d.ts +7 -0
  20. package/lib/common/throttle.d.ts +1 -0
  21. package/lib/table/action/action-id.type.d.ts +5 -1
  22. package/lib/table/action/on-action-triggered.if.d.ts +2 -1
  23. package/lib/table/action/osx-shortcut-actionId-mapping.d.ts +3 -1
  24. package/lib/table/action/shortcut-actionid-mapping.type.d.ts +3 -1
  25. package/lib/table/action/shortcut-util.d.ts +12 -0
  26. package/lib/table/action/shortcut.service.d.ts +5 -3
  27. package/lib/table/action/windows-shortcut-actionId-mapping.d.ts +3 -1
  28. package/lib/table/aria/aria-grid-info.d.ts +76 -0
  29. package/lib/table/aria/aria-ids.d.ts +56 -0
  30. package/lib/table/aria/aria-texts.d.ts +34 -0
  31. package/lib/table/aria/aria-texts.if.d.ts +88 -0
  32. package/lib/table/aria/live-announcer.d.ts +53 -0
  33. package/lib/table/aria/tree-aria-info.d.ts +58 -0
  34. package/lib/table/checkbox/all-rows-checkbox-model.d.ts +31 -0
  35. package/lib/table/checkbox/checkbox-model.d.ts +3 -2
  36. package/lib/table/checkbox/checkbox-model.if.d.ts +2 -1
  37. package/lib/table/checkbox/tree-checkbox-model.d.ts +19 -4
  38. package/lib/table/color/color-rgb.d.ts +2 -1
  39. package/lib/table/color/color-rgb.if.d.ts +2 -0
  40. package/lib/table/color/ge-css-color-util.d.ts +25 -2
  41. package/lib/table/color/three-color-gradient-arg.d.ts +3 -2
  42. package/lib/table/color/three-color-gradient-arg.if.d.ts +3 -1
  43. package/lib/table/color/two-color-gradient-arg.d.ts +3 -2
  44. package/lib/table/color/two-color-gradient-arg.if.d.ts +3 -1
  45. package/lib/table/crud/column-widths.d.ts +2 -1
  46. package/lib/table/crud/column-widths.if.d.ts +1 -0
  47. package/lib/table/crud/crud-action.d.ts +1 -0
  48. package/lib/table/crud/crud-object-edit.d.ts +25 -3
  49. package/lib/table/crud/crud-object-view.d.ts +6 -0
  50. package/lib/table/crud/crud-options.d.ts +35 -4
  51. package/lib/table/crud/crud-options.if.d.ts +3 -2
  52. package/lib/table/crud/crud-table-model-factory.d.ts +64 -8
  53. package/lib/table/crud/url-info.d.ts +2 -1
  54. package/lib/table/crud/url-info.if.d.ts +1 -0
  55. package/lib/table/crud/urls.if.d.ts +2 -1
  56. package/lib/table/css-vars.d.ts +1 -0
  57. package/lib/table/data/chunk/chunk.data-event.d.ts +3 -2
  58. package/lib/table/data/chunk/chunk.data-event.if.d.ts +2 -1
  59. package/lib/table/data/chunk/request-chunk.d.ts +2 -1
  60. package/lib/table/data/chunk/request-chunk.if.d.ts +1 -0
  61. package/lib/table/data/common/aligns.d.ts +18 -0
  62. package/lib/table/data/common/area-map-factory.d.ts +3 -2
  63. package/lib/table/data/common/area-map.d.ts +3 -1
  64. package/lib/table/data/common/area-map.type.d.ts +1 -0
  65. package/lib/table/data/common/args-adjust-columns-to-row-parent-params.d.ts +6 -4
  66. package/lib/table/data/common/args-render-cell-div.d.ts +5 -3
  67. package/lib/table/data/common/boolean-function.d.ts +10 -0
  68. package/lib/table/data/common/cell-range.d.ts +16 -7
  69. package/lib/table/data/common/checkbox-column-def.d.ts +6 -4
  70. package/lib/table/data/common/checked-type.d.ts +2 -0
  71. package/lib/table/data/common/event/ge-cell-indices.d.ts +2 -0
  72. package/lib/table/data/common/event/ge-key-event.d.ts +2 -0
  73. package/lib/table/data/common/event/ge-model-change-event.d.ts +16 -2
  74. package/lib/table/data/common/event/ge-mouse-event.d.ts +52 -4
  75. package/lib/table/data/common/event/ge-scroll-event.d.ts +27 -1
  76. package/lib/table/data/common/event/input/table-cell-update-event.d.ts +14 -10
  77. package/lib/table/data/common/event/input/table-cell-update-event.if.d.ts +3 -1
  78. package/lib/table/data/common/filter-function.d.ts +2 -0
  79. package/lib/table/data/common/get-t.d.ts +2 -0
  80. package/lib/table/data/common/index-and-px.d.ts +2 -0
  81. package/lib/table/data/common/size-unit.type.d.ts +2 -0
  82. package/lib/table/data/common/size.d.ts +13 -2
  83. package/lib/table/data/common/size.if.d.ts +3 -1
  84. package/lib/table/data/common/sizes.d.ts +133 -1
  85. package/lib/table/data/common/sort-item.d.ts +16 -3
  86. package/lib/table/data/common/sort-state.type.d.ts +2 -0
  87. package/lib/table/data/common/tree-arrow.type.d.ts +2 -0
  88. package/lib/table/data/common/tree-row-if.d.ts +22 -1
  89. package/lib/table/data/common/tree-row.d.ts +3 -1
  90. package/lib/table/data/common/value-label.d.ts +2 -1
  91. package/lib/table/data/common/value-label.if.d.ts +1 -0
  92. package/lib/table/data/div-scope.type.d.ts +2 -0
  93. package/lib/table/data/event/mouse-target-data.d.ts +5 -3
  94. package/lib/table/data/geo-data.d.ts +2 -0
  95. package/lib/table/data/options/auto-restore-options.d.ts +32 -1
  96. package/lib/table/data/options/auto-restore-options.if.d.ts +8 -0
  97. package/lib/table/data/options/default-row-heights.d.ts +20 -2
  98. package/lib/table/data/options/default-row-heights.if.d.ts +4 -1
  99. package/lib/table/data/options/header-group-options.d.ts +3 -2
  100. package/lib/table/data/options/header-group-options.if.d.ts +3 -4
  101. package/lib/table/data/options/icon.d.ts +2 -1
  102. package/lib/table/data/options/icon.if.d.ts +2 -0
  103. package/lib/table/data/options/sorted-options.d.ts +3 -2
  104. package/lib/table/data/options/sorted-options.if.d.ts +3 -1
  105. package/lib/table/data/options/table-options.d.ts +44 -13
  106. package/lib/table/data/options/table-options.if.d.ts +117 -44
  107. package/lib/table/data/options/tree-options.d.ts +3 -2
  108. package/lib/table/data/options/tree-options.if.d.ts +3 -1
  109. package/lib/table/data/side-ident.type.d.ts +2 -0
  110. package/lib/table/data/table-model-and-options.d.ts +5 -3
  111. package/lib/table/data/table-model-and-options.if.d.ts +4 -2
  112. package/lib/table/data/tablemodel/area-ident.type.d.ts +4 -0
  113. package/lib/table/data/tablemodel/areamodel/abstract-area-model.d.ts +10 -9
  114. package/lib/table/data/tablemodel/areamodel/area-model-array-of-arrays.d.ts +6 -4
  115. package/lib/table/data/tablemodel/areamodel/area-model-cell-groups.d.ts +13 -12
  116. package/lib/table/data/tablemodel/areamodel/area-model-hidden.d.ts +9 -7
  117. package/lib/table/data/tablemodel/areamodel/area-model-object-array-with-columndefs.d.ts +16 -14
  118. package/lib/table/data/tablemodel/areamodel/area-model-object-array.d.ts +35 -31
  119. package/lib/table/data/tablemodel/areamodel/area-model-tree.d.ts +153 -11
  120. package/lib/table/data/tablemodel/areamodel/area-model.d.ts +66 -104
  121. package/lib/table/data/tablemodel/areamodel/area-model.if.d.ts +56 -50
  122. package/lib/table/data/tablemodel/areamodel/async-area-model-object-array.d.ts +5 -5
  123. package/lib/table/data/tablemodel/areamodel/col-and-rowspan-model.d.ts +14 -3
  124. package/lib/table/data/tablemodel/areamodel/cover-grid-body-model.d.ts +10 -8
  125. package/lib/table/data/tablemodel/areamodel/has-default-row-height-if.d.ts +1 -0
  126. package/lib/table/data/tablemodel/areamodel/object-array-holder.if.d.ts +1 -0
  127. package/lib/table/data/tablemodel/cellgroup/cell-group-ext.d.ts +3 -2
  128. package/lib/table/data/tablemodel/cellgroup/cell-group.d.ts +2 -1
  129. package/lib/table/data/tablemodel/cellgroup/cell-group.if.d.ts +28 -0
  130. package/lib/table/data/tablemodel/cellgroup/cellgroup-factory.d.ts +4 -3
  131. package/lib/table/data/tablemodel/column/column-def.d.ts +67 -10
  132. package/lib/table/data/tablemodel/column/column-def.if.d.ts +63 -96
  133. package/lib/table/data/tablemodel/column/column-visibility.d.ts +6 -0
  134. package/lib/table/data/tablemodel/cover-grid-table-model.d.ts +11 -10
  135. package/lib/table/data/tablemodel/padding.d.ts +2 -0
  136. package/lib/table/data/tablemodel/table-model.d.ts +75 -14
  137. package/lib/table/data/tablemodel/table-model.if.d.ts +52 -8
  138. package/lib/table/ele-scope.d.ts +36 -5
  139. package/lib/table/event-adapter.d.ts +17 -10
  140. package/lib/table/event-checkbox-changed-handler.d.ts +2 -1
  141. package/lib/table/event-listener.if.d.ts +42 -9
  142. package/lib/table/factory/cover-grid-factory.d.ts +4 -3
  143. package/lib/table/factory/table-factory.d.ts +103 -64
  144. package/lib/table/factory/tree-factory.d.ts +81 -4
  145. package/lib/table/focus/event-focus-changed-listener.if.d.ts +5 -3
  146. package/lib/table/focus/focus-model.d.ts +7 -5
  147. package/lib/table/focus/focus-model.if.d.ts +22 -1
  148. package/lib/table/focus/focus.type.d.ts +2 -0
  149. package/lib/table/input-handler.d.ts +5 -1
  150. package/lib/table/instanceof-workaround.d.ts +16 -0
  151. package/lib/table/license-manager.d.ts +2 -0
  152. package/lib/table/mouse-handler.d.ts +18 -9
  153. package/lib/table/render-scope.d.ts +115 -25
  154. package/lib/table/renderer/action/action-event-listener.if.d.ts +2 -1
  155. package/lib/table/renderer/action/action-event.d.ts +4 -3
  156. package/lib/table/renderer/action/action-event.if.d.ts +2 -1
  157. package/lib/table/renderer/action/actions-cell-renderer.d.ts +8 -7
  158. package/lib/table/renderer/cell-group-ext-cell-renderer.d.ts +8 -7
  159. package/lib/table/renderer/cell-render.if.d.ts +41 -4
  160. package/lib/table/renderer/checkbox-boolean-property-cell-renderer.d.ts +7 -5
  161. package/lib/table/renderer/checkbox-cell-renderer.d.ts +8 -5
  162. package/lib/table/renderer/date-to-int-date-cell-renderer.d.ts +6 -5
  163. package/lib/table/renderer/date-to-iso-cell-renderer.d.ts +6 -5
  164. package/lib/table/renderer/date-to-locale-date-cell-renderer.d.ts +6 -5
  165. package/lib/table/renderer/date-to-tec-cell-renderer.d.ts +6 -5
  166. package/lib/table/renderer/edit/edit-cell-renderer.type.d.ts +2 -1
  167. package/lib/table/renderer/edit/edit-input-pipe-for-number.d.ts +2 -1
  168. package/lib/table/renderer/edit/edit-input-pipe.if.d.ts +2 -0
  169. package/lib/table/renderer/edit/input-cell-renderer.d.ts +6 -5
  170. package/lib/table/renderer/edit/select-cell-renderer.d.ts +7 -6
  171. package/lib/table/renderer/male-female-to-icon-cell-renderer.d.ts +19 -6
  172. package/lib/table/renderer/number-cell-progress-bar-cell-renderer.d.ts +11 -6
  173. package/lib/table/renderer/number-cell-renderer.d.ts +6 -5
  174. package/lib/table/renderer/positive-and-negative-number-renderer.d.ts +6 -5
  175. package/lib/table/renderer/progress-bar-cell-renderer.d.ts +12 -6
  176. package/lib/table/renderer/renderer-cleanup-fn.type.d.ts +1 -0
  177. package/lib/table/renderer/renderer.d.ts +3 -2
  178. package/lib/table/renderer/simple-array-cell-renderer.d.ts +6 -5
  179. package/lib/table/renderer/star-rating-cell-renderer.d.ts +12 -6
  180. package/lib/table/renderer/true-false-cell-renderer.d.ts +17 -5
  181. package/lib/table/resize-handler.d.ts +3 -1
  182. package/lib/table/selection/event-selection-changed-listener.if.d.ts +2 -1
  183. package/lib/table/selection/multi-rows-selection-model.d.ts +7 -4
  184. package/lib/table/selection/selection-model.d.ts +112 -10
  185. package/lib/table/selection/selection-model.if.d.ts +48 -3
  186. package/lib/table/selection/selection-service.d.ts +35 -7
  187. package/lib/table/selection/selection.type.d.ts +3 -0
  188. package/lib/table/service/abstract-store-state.service.d.ts +1 -1
  189. package/lib/table/service/convenience-dom.service.d.ts +36 -13
  190. package/lib/table/service/copy-service.d.ts +18 -4
  191. package/lib/table/service/copy-service.if.d.ts +4 -3
  192. package/lib/table/service/data/collapsed-expanded.data.d.ts +1 -0
  193. package/lib/table/service/data/html-style.type.d.ts +1 -0
  194. package/lib/table/service/dom-service.if.d.ts +30 -0
  195. package/lib/table/service/excel-service.d.ts +43 -3
  196. package/lib/table/service/excel-service.if.d.ts +8 -1
  197. package/lib/table/service/ge-filter.service.d.ts +1 -0
  198. package/lib/table/service/simple-dom-service.d.ts +3 -1
  199. package/lib/table/service/store-state-collapsed-expand.service.d.ts +4 -3
  200. package/lib/table/service/store-state-scroll-pos.service.d.ts +3 -2
  201. package/lib/table/service/store-state-sorting.service.d.ts +4 -3
  202. package/lib/table/service/tree-row.service.d.ts +5 -1
  203. package/lib/table/table-api.d.ts +309 -550
  204. package/lib/table/table-scope.d.ts +223 -85
  205. package/package.json +23 -8
@@ -1,352 +1,73 @@
1
- import { TableScope } from './table-scope';
2
- import { ColumnDefIf } from './data/tablemodel/column/column-def.if';
3
- import { TableCellUpdateEventIf } from './data/common/event/input/table-cell-update-event.if';
4
- import { SelectionModel } from './selection/selection-model';
5
- import { ActionId } from './action/action-id.type';
6
- import { ShortcutActionIdMapping } from './action/shortcut-actionid-mapping.type';
7
- import { SelectionModelIf } from './selection/selection-model.if';
8
- import { TableModelIf } from './data/tablemodel/table-model.if';
9
- import { AreaModelIf } from './data/tablemodel/areamodel/area-model.if';
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
- * # TableApi
13
- *
14
- * The TableApi class provides a comprehensive interface for programmatically interacting with a table component.
15
- * After creating a table component, each component gets its own TableApi instance that serves as the primary
16
- * means for developers to control and interact with the rendered table.
17
- *
18
- * ## Overview
19
- *
20
- * TableApi acts as a facade over the internal table implementation, providing a clean, well-documented API
21
- * that abstracts away the complexity of the underlying table mechanics. It delegates most operations to the
22
- * TableScope instance, which contains the actual implementation details.
23
- *
24
- * ## Core Functionality
25
- *
26
- * The TableApi provides methods for:
27
- *
28
- * ### Data Management
29
- * - Setting, adding, and removing rows
30
- * - Updating individual cells or ranges of cells
31
- * - Finding and filtering rows based on criteria
32
- * - Sorting data with custom comparators
33
- *
34
- * ### Visual Control
35
- * - Scrolling to specific positions (by pixel or row/column index)
36
- * - Controlling visibility of header, footer, and columns
37
- * - Adjusting column widths (manually or automatically)
38
- * - Repainting the table (normal or hard repaint)
39
- *
40
- * ### Selection and Focus
41
- * - Managing cell, row, or column selection
42
- * - Clearing selections
43
- * - Ensuring specific rows are visible in the viewport
44
- *
45
- * ### Export and Clipboard
46
- * - Copying selected data to clipboard
47
- * - Exporting table data to Excel
48
- *
49
- * ### Events and Actions
50
- * - Triggering specific actions programmatically
51
- * - Responding to external filter changes
52
- *
53
- * ### Debugging
54
- * - Enabling/disabling logging for troubleshooting
55
- *
56
- * ## Usage Patterns
57
- *
58
- * The TableApi is designed to be used in several common patterns:
59
- *
60
- * ### 1. Direct Method Calls
61
- *
62
- * The most straightforward usage is to call methods directly on the TableApi instance:
63
- *
64
- * ```typescript
65
- * // Get the API from your table component
66
- * const api = tableComponent.api;
67
- *
68
- * // Call methods directly
69
- * api.setRows(newData);
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
- * tableApi.scrollToPixel(undefined, 300);
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
- * This method allows programmatic scrolling to a specific position in the table grid based on row and column indices.
584
- * It uses the underlying TableScope's scrolling mechanism to navigate to the target location.
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 horizontal index (column) to scroll to. Defaults to 0 (leftmost column).
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(0, 5);
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
- * // Example in a component that needs to navigate to specific content
600
- * class TableNavigator {
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
- * Sets whether the header is visible or not.
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 _visible - A boolean value indicating whether the header should be visible. Default value is true.
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
- * @return undefined
295
+ * @example
296
+ * // toggle from a button
297
+ * document.querySelector("#toggle-header")!.addEventListener("click", () =>
298
+ * tableApi.setHeaderVisible(!tableApi.isHeaderVisible()));
653
299
  */
654
- setHeaderVisible(_visible?: boolean): void;
300
+ setHeaderVisible(visible?: boolean): void;
655
301
  /**
656
- * Sets the visibility of a column in the table.
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
- * @param {_column} - The column index or column definition to set visibility for.
659
- * @param {_visible=true} - The flag to set visibility to. true for visible, false for hidden.
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
- * @return {void} - There is no return value.
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(_column: number | ColumnDefIf, _visible?: boolean): void;
332
+ setColumnVisible(column: number | string | ColumnDefIf, visible?: boolean): boolean;
664
333
  /**
665
- * Returns whether a column is visible or not.
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} _column - The column index or the column definition.
668
- * @return {boolean} - True if the column is visible, false otherwise.
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(_column: number | ColumnDefIf): boolean;
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
- * Sets the visibility of the footer.
356
+ * Shows or hides the footer and repaints the table.
679
357
  *
680
- * @param {boolean} _visible - Indicates whether the footer should be visible or not. Default value is true.
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
- * @return {void} - This method does not return any value.
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(_visible?: boolean): void;
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().selectCell(2, 3);
398
+ * tableApi.getSelectionModel()?.togglePoint(2, 3);
711
399
  * tableApi.repaint();
712
400
  *
713
401
  * @example
714
- * // After changing column visibility, repaint to reflect changes
715
- * tableApi.setColumnVisible(0, false);
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 column visibility
767
- * tableApi.setColumnVisible(2, false);
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} The result of the excelService.downloadExcel method call
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
- * selectionChanged: () => {
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
- * @throws {Warning} Logs a console warning if the table's body model is not an AreaModelObjectArray
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 = table.findRows([row1, row2]);
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 = table.findRows([row1, row2], (a, b) => a.id === b.id);
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: "pending" };
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
- * Re-applies the current sorting configuration to the table data.
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
- * This method triggers a re-sort of the table data using the current sorting configuration.
1266
- * It's useful when the underlying data has changed and needs to be re-sorted without changing
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
- * table.api.sort((a, b) => {
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
- * table.api.sort((a, b) => b.value - a.value);
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
- * table.api.sort((a, b) => {
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.name.localeCompare(b.name);
1070
+ * return a.customer.localeCompare(b.customer);
1308
1071
  * });
1309
1072
  *
1310
1073
  * @example
1311
1074
  * // Case-insensitive string sorting
1312
- * table.api.sort((a, b) =>
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;