@toolbox-web/grid 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +96 -59
- package/all.d.ts +328 -225
- package/all.js +522 -525
- package/all.js.map +1 -1
- package/index.d.ts +220 -160
- package/index.js +1197 -1112
- package/index.js.map +1 -1
- package/lib/plugins/clipboard/index.js +11 -5
- package/lib/plugins/clipboard/index.js.map +1 -1
- package/lib/plugins/column-virtualization/index.js +9 -4
- package/lib/plugins/column-virtualization/index.js.map +1 -1
- package/lib/plugins/context-menu/index.js +11 -5
- package/lib/plugins/context-menu/index.js.map +1 -1
- package/lib/plugins/export/index.js +7 -3
- package/lib/plugins/export/index.js.map +1 -1
- package/lib/plugins/filtering/index.js +16 -149
- package/lib/plugins/filtering/index.js.map +1 -1
- package/lib/plugins/grouping-columns/index.js +13 -6
- package/lib/plugins/grouping-columns/index.js.map +1 -1
- package/lib/plugins/grouping-rows/index.js +13 -6
- package/lib/plugins/grouping-rows/index.js.map +1 -1
- package/lib/plugins/master-detail/index.js +11 -5
- package/lib/plugins/master-detail/index.js.map +1 -1
- package/lib/plugins/multi-sort/index.js +13 -6
- package/lib/plugins/multi-sort/index.js.map +1 -1
- package/lib/plugins/pinned-columns/index.js +102 -53
- package/lib/plugins/pinned-columns/index.js.map +1 -1
- package/lib/plugins/pinned-rows/index.js +13 -6
- package/lib/plugins/pinned-rows/index.js.map +1 -1
- package/lib/plugins/pivot/index.js +19 -9
- package/lib/plugins/pivot/index.js.map +1 -1
- package/lib/plugins/reorder/index.js +49 -40
- package/lib/plugins/reorder/index.js.map +1 -1
- package/lib/plugins/selection/index.js +13 -6
- package/lib/plugins/selection/index.js.map +1 -1
- package/lib/plugins/server-side/index.js +11 -5
- package/lib/plugins/server-side/index.js.map +1 -1
- package/lib/plugins/tree/index.js +15 -7
- package/lib/plugins/tree/index.js.map +1 -1
- package/lib/plugins/undo-redo/index.js +3 -1
- package/lib/plugins/undo-redo/index.js.map +1 -1
- package/lib/plugins/visibility/index.js +13 -6
- package/lib/plugins/visibility/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +19 -160
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +16 -16
- package/umd/grid.umd.js.map +1 -1
- package/umd/plugins/clipboard.umd.js.map +1 -1
- package/umd/plugins/column-virtualization.umd.js.map +1 -1
- package/umd/plugins/context-menu.umd.js.map +1 -1
- package/umd/plugins/export.umd.js.map +1 -1
- package/umd/plugins/filtering.umd.js +1 -142
- package/umd/plugins/filtering.umd.js.map +1 -1
- package/umd/plugins/grouping-columns.umd.js.map +1 -1
- package/umd/plugins/grouping-rows.umd.js.map +1 -1
- package/umd/plugins/master-detail.umd.js.map +1 -1
- package/umd/plugins/multi-sort.umd.js.map +1 -1
- package/umd/plugins/pinned-columns.umd.js +1 -1
- package/umd/plugins/pinned-columns.umd.js.map +1 -1
- package/umd/plugins/pinned-rows.umd.js.map +1 -1
- package/umd/plugins/pivot.umd.js.map +1 -1
- package/umd/plugins/reorder.umd.js +1 -1
- package/umd/plugins/reorder.umd.js.map +1 -1
- package/umd/plugins/selection.umd.js.map +1 -1
- package/umd/plugins/server-side.umd.js.map +1 -1
- package/umd/plugins/tree.umd.js.map +1 -1
- package/umd/plugins/undo-redo.umd.js.map +1 -1
- package/umd/plugins/visibility.umd.js.map +1 -1
package/README.md
CHANGED
|
@@ -83,55 +83,38 @@ When the same property is set via multiple methods, higher precedence wins:
|
|
|
83
83
|
|
|
84
84
|
## Features
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
| Feature | Description |
|
|
120
|
-
| ------------- | -------------------------------------------- |
|
|
121
|
-
| Pinning | Sticky columns on left or right edges |
|
|
122
|
-
| Resizing | Drag-to-resize with auto-sizing |
|
|
123
|
-
| Reordering | Drag-and-drop repositioning |
|
|
124
|
-
| Visibility | Show/hide columns programmatically or via UI |
|
|
125
|
-
| Header Groups | Multi-level column headers |
|
|
126
|
-
|
|
127
|
-
### Selection & Export
|
|
128
|
-
|
|
129
|
-
| Feature | Description |
|
|
130
|
-
| --------------- | ---------------------------------- |
|
|
131
|
-
| Selection Modes | Cell, row, or range selection |
|
|
132
|
-
| Context Menus | Configurable right-click menus |
|
|
133
|
-
| Master/Detail | Expandable detail rows |
|
|
134
|
-
| Export | CSV, Excel (XML), and JSON formats |
|
|
86
|
+
<table>
|
|
87
|
+
<tr><th colspan="2">Core Capabilities</th></tr>
|
|
88
|
+
<tr><td>Virtualization</td><td>Row and column virtualization for datasets with 100k+ rows</td></tr>
|
|
89
|
+
<tr><td>Keyboard Navigation</td><td>Full keyboard support including arrow keys, Tab, Enter, Home/End, PageUp/PageDown</td></tr>
|
|
90
|
+
<tr><td>Accessibility</td><td>ARIA attributes and screen reader support</td></tr>
|
|
91
|
+
<tr><td>Theming</td><td>CSS custom properties with 6 built-in themes</td></tr>
|
|
92
|
+
<tr><td>Column Inference</td><td>Automatic column type detection from data</td></tr>
|
|
93
|
+
<tr><th colspan="2">Editing</th></tr>
|
|
94
|
+
<tr><td>Inline Editing</td><td>Cell and row editing modes with configurable triggers</td></tr>
|
|
95
|
+
<tr><td>Undo/Redo</td><td>Edit history with Ctrl+Z / Ctrl+Y</td></tr>
|
|
96
|
+
<tr><td>Clipboard</td><td>Copy/paste with configurable delimiters</td></tr>
|
|
97
|
+
<tr><td>Change Tracking</td><td>Track modified rows with commit/reset lifecycle</td></tr>
|
|
98
|
+
<tr><th colspan="2">Data Operations</th></tr>
|
|
99
|
+
<tr><td>Sorting</td><td>Single and multi-column sorting</td></tr>
|
|
100
|
+
<tr><td>Filtering</td><td>Text, number, date, set, and boolean filters</td></tr>
|
|
101
|
+
<tr><td>Aggregations</td><td>Built-in aggregators (sum, avg, count, min, max) plus custom functions</td></tr>
|
|
102
|
+
<tr><td>Row Grouping</td><td>Hierarchical grouping with nested aggregations</td></tr>
|
|
103
|
+
<tr><td>Tree Data</td><td>Nested data structures with expand/collapse</td></tr>
|
|
104
|
+
<tr><td>Pivot Tables</td><td>Data transformation with row/column groups</td></tr>
|
|
105
|
+
<tr><td>Server-Side Data</td><td>Lazy loading with block caching</td></tr>
|
|
106
|
+
<tr><th colspan="2">Column Features</th></tr>
|
|
107
|
+
<tr><td>Pinning</td><td>Sticky columns on left or right edges</td></tr>
|
|
108
|
+
<tr><td>Resizing</td><td>Drag-to-resize with auto-sizing</td></tr>
|
|
109
|
+
<tr><td>Reordering</td><td>Drag-and-drop repositioning</td></tr>
|
|
110
|
+
<tr><td>Visibility</td><td>Show/hide columns programmatically or via UI</td></tr>
|
|
111
|
+
<tr><td>Header Groups</td><td>Multi-level column headers</td></tr>
|
|
112
|
+
<tr><th colspan="2">Selection & Export</th></tr>
|
|
113
|
+
<tr><td>Selection Modes</td><td>Cell, row, or range selection</td></tr>
|
|
114
|
+
<tr><td>Context Menus</td><td>Configurable right-click menus</td></tr>
|
|
115
|
+
<tr><td>Master/Detail</td><td>Expandable detail rows</td></tr>
|
|
116
|
+
<tr><td>Export</td><td>CSV, Excel (XML), and JSON formats</td></tr>
|
|
117
|
+
</table>
|
|
135
118
|
|
|
136
119
|
---
|
|
137
120
|
|
|
@@ -148,6 +131,7 @@ When the same property is set via multiple methods, higher precedence wins:
|
|
|
148
131
|
| Property | Type | Description |
|
|
149
132
|
| ------------ | ----------------------- | -------------------------------------------------- |
|
|
150
133
|
| `rows` | `T[]` | Data array |
|
|
134
|
+
| `sourceRows` | `T[]` (readonly) | Original unfiltered/unprocessed rows |
|
|
151
135
|
| `columns` | `ColumnConfig[]` | Column definitions (→ `gridConfig.columns`) |
|
|
152
136
|
| `gridConfig` | `GridConfig` | Full configuration object (single source of truth) |
|
|
153
137
|
| `fitMode` | `'stretch' \| 'fixed'` | Column sizing behavior (→ `gridConfig.fitMode`) |
|
|
@@ -164,18 +148,25 @@ When the same property is set via multiple methods, higher precedence wins:
|
|
|
164
148
|
| `beginBulkEdit(rowIndex)` | `Promise<void>` | Start row editing |
|
|
165
149
|
| `commitActiveRowEdit()` | `Promise<void>` | Commit current edit |
|
|
166
150
|
| `setColumnVisible(field, visible)` | `boolean` | Set column visibility |
|
|
151
|
+
| `setColumnOrder(order)` | `void` | Reorder columns by field array |
|
|
167
152
|
| `getAllColumns()` | `ColumnInfo[]` | Get all columns with visibility status |
|
|
153
|
+
| `getPlugin(PluginClass)` | `P \| undefined` | Get plugin instance by class |
|
|
154
|
+
| `getPluginByName(name)` | `Plugin \| undefined` | Get plugin instance by name |
|
|
168
155
|
|
|
169
156
|
### Events
|
|
170
157
|
|
|
171
|
-
| Event
|
|
172
|
-
|
|
|
173
|
-
| `cell-commit`
|
|
174
|
-
| `row-commit`
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
177
|
-
| `column-
|
|
178
|
-
| `
|
|
158
|
+
| Event | Detail | Description |
|
|
159
|
+
| ----------------------- | --------------------------- | ----------------------------- |
|
|
160
|
+
| `cell-commit` | `CellCommitDetail` | Cell value committed |
|
|
161
|
+
| `row-commit` | `RowCommitDetail` | Row edit committed |
|
|
162
|
+
| `changed-rows-reset` | `ChangedRowsResetDetail` | Change tracking cleared |
|
|
163
|
+
| `sort-change` | `SortChangeDetail` | Sort state changed |
|
|
164
|
+
| `column-resize` | `ColumnResizeDetail` | Column resized |
|
|
165
|
+
| `column-state-change` | `ColumnState` | Column state changed |
|
|
166
|
+
| `activate-cell` | `ActivateCellDetail` | Cell activated |
|
|
167
|
+
| `group-toggle` | `GroupToggleDetail` | Row group expanded/collapsed |
|
|
168
|
+
| `mount-external-view` | `ExternalMountViewDetail` | External view mount request |
|
|
169
|
+
| `mount-external-editor` | `ExternalMountEditorDetail` | External editor mount request |
|
|
179
170
|
|
|
180
171
|
Import event names from the `DGEvents` constant:
|
|
181
172
|
|
|
@@ -215,7 +206,7 @@ Some column properties are added via [TypeScript module augmentation](#typescrip
|
|
|
215
206
|
| `filterType` | `filtering` | Filter type |
|
|
216
207
|
| `reorderable` | `reorder` | Enable column reordering |
|
|
217
208
|
|
|
218
|
-
See [Storybook](https://
|
|
209
|
+
See [Storybook](https://oysteinamundsen.github.io/toolbox/) for complete configuration examples.
|
|
219
210
|
|
|
220
211
|
---
|
|
221
212
|
|
|
@@ -287,7 +278,7 @@ Apply a built-in theme:
|
|
|
287
278
|
@import '@toolbox-web/grid/themes/dg-theme-standard.css';
|
|
288
279
|
```
|
|
289
280
|
|
|
290
|
-
Available themes: `standard`, `contrast`, `vibrant`, `large`
|
|
281
|
+
Available themes: `standard`, `contrast`, `vibrant`, `large`, `bootstrap`, `material`
|
|
291
282
|
|
|
292
283
|
### Custom Theming
|
|
293
284
|
|
|
@@ -432,6 +423,52 @@ export class MyPlugin extends BaseGridPlugin<MyPluginConfig> {
|
|
|
432
423
|
}
|
|
433
424
|
```
|
|
434
425
|
|
|
426
|
+
### Inter-Plugin Communication
|
|
427
|
+
|
|
428
|
+
Plugins can communicate with each other using the generic query system. This allows plugins to expose capabilities or constraints without the core knowing about specific plugin concepts.
|
|
429
|
+
|
|
430
|
+
**Responding to queries (in your plugin):**
|
|
431
|
+
|
|
432
|
+
```typescript
|
|
433
|
+
import { BaseGridPlugin, PLUGIN_QUERIES, PluginQuery } from '@toolbox-web/grid';
|
|
434
|
+
|
|
435
|
+
export class MyPlugin extends BaseGridPlugin<MyConfig> {
|
|
436
|
+
override onPluginQuery(query: PluginQuery): unknown {
|
|
437
|
+
switch (query.type) {
|
|
438
|
+
case PLUGIN_QUERIES.CAN_MOVE_COLUMN:
|
|
439
|
+
// Veto column movement for locked columns
|
|
440
|
+
const column = query.context as ColumnConfig;
|
|
441
|
+
if (this.isLocked(column)) return false;
|
|
442
|
+
return undefined; // Let other plugins decide
|
|
443
|
+
default:
|
|
444
|
+
return undefined;
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
```
|
|
449
|
+
|
|
450
|
+
**Querying other plugins:**
|
|
451
|
+
|
|
452
|
+
```typescript
|
|
453
|
+
import { PLUGIN_QUERIES } from '@toolbox-web/grid';
|
|
454
|
+
|
|
455
|
+
// In your plugin or application code
|
|
456
|
+
const responses = grid.queryPlugins<boolean>({
|
|
457
|
+
type: PLUGIN_QUERIES.CAN_MOVE_COLUMN,
|
|
458
|
+
context: column,
|
|
459
|
+
});
|
|
460
|
+
const canMove = !responses.includes(false);
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
**Built-in query types:**
|
|
464
|
+
|
|
465
|
+
| Query Type | Context | Response | Description |
|
|
466
|
+
| ------------------------ | ------------------- | ------------------- | ------------------------------- |
|
|
467
|
+
| `CAN_MOVE_COLUMN` | `ColumnConfig` | `boolean` | Can the column be reordered? |
|
|
468
|
+
| `GET_CONTEXT_MENU_ITEMS` | `ContextMenuParams` | `ContextMenuItem[]` | Get menu items for context menu |
|
|
469
|
+
|
|
470
|
+
Plugins can also define custom query types for their own inter-plugin communication.
|
|
471
|
+
|
|
435
472
|
### Accessing Plugin Instances
|
|
436
473
|
|
|
437
474
|
Use `grid.getPlugin()` to get a plugin instance for inter-plugin communication or API access:
|