@toolbox-web/grid 0.2.1 → 0.2.2
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 +50 -59
- package/all.d.ts +1 -47
- package/all.js +195 -239
- package/all.js.map +1 -1
- package/index.d.ts +1 -47
- package/index.js +129 -118
- 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 +11 -5
- 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 +11 -5
- 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 +15 -156
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/grid.umd.js +6 -6
- 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.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.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
|
|
package/all.d.ts
CHANGED
|
@@ -1985,56 +1985,10 @@ export declare class ContextMenuPlugin extends BaseGridPlugin_2<ContextMenuConfi
|
|
|
1985
1985
|
|
|
1986
1986
|
export declare type DataGridCustomEvent<K extends keyof DataGridEventMap<any>, TRow = any> = CustomEvent<DataGridEventMap<TRow>[K]>;
|
|
1987
1987
|
|
|
1988
|
-
/**
|
|
1989
|
-
* High-performance data grid web component.
|
|
1990
|
-
* During migration, uses tbw-grid tag to avoid conflicts with existing datagrid.
|
|
1991
|
-
* Will be renamed back to data-grid when migration is complete.
|
|
1992
|
-
*
|
|
1993
|
-
* ## Configuration Architecture
|
|
1994
|
-
*
|
|
1995
|
-
* The grid follows a **single source of truth** pattern where all configuration
|
|
1996
|
-
* converges into `#effectiveConfig`. Users can set configuration via multiple inputs:
|
|
1997
|
-
*
|
|
1998
|
-
* **Input Sources (precedence low → high):**
|
|
1999
|
-
* 1. `gridConfig` property - base configuration object
|
|
2000
|
-
* 2. Light DOM elements:
|
|
2001
|
-
* - `<tbw-grid-column>` → `effectiveConfig.columns`
|
|
2002
|
-
* - `<tbw-grid-header title="...">` → `effectiveConfig.shell.header.title`
|
|
2003
|
-
* - `<tbw-grid-header-content>` → `effectiveConfig.shell.header.content`
|
|
2004
|
-
* 3. `columns` property → merged into `effectiveConfig.columns`
|
|
2005
|
-
* 4. `fitMode` property → merged into `effectiveConfig.fitMode`
|
|
2006
|
-
* 5. `editOn` property → merged into `effectiveConfig.editOn`
|
|
2007
|
-
* 6. Column inference from first row (if no columns defined)
|
|
2008
|
-
*
|
|
2009
|
-
* **Derived State:**
|
|
2010
|
-
* - `_columns` - processed columns from `effectiveConfig.columns` after plugin hooks
|
|
2011
|
-
* - `_rows` - processed rows after plugin hooks (grouping, filtering, etc.)
|
|
2012
|
-
*
|
|
2013
|
-
* The `#mergeEffectiveConfig()` method is the single place where all inputs converge.
|
|
2014
|
-
* All rendering and logic should read from `effectiveConfig` or derived state.
|
|
2015
|
-
*
|
|
2016
|
-
* @element tbw-grid
|
|
2017
|
-
*
|
|
2018
|
-
* @csspart container - The main grid container
|
|
2019
|
-
* @csspart header - The header row container
|
|
2020
|
-
* @csspart body - The body/rows container
|
|
2021
|
-
*
|
|
2022
|
-
* @fires cell-commit - Fired when a cell value is committed
|
|
2023
|
-
* @fires row-commit - Fired when a bulk row edit session commits
|
|
2024
|
-
* @fires changed-rows-reset - Fired after resetChangedRows() unless silent
|
|
2025
|
-
* @fires mount-external-view - Fired to request mounting of an external view renderer
|
|
2026
|
-
* @fires mount-external-editor - Fired to request mounting of an external editor renderer
|
|
2027
|
-
* @fires sort-change - Fired when sort state changes for a column
|
|
2028
|
-
* @fires column-resize - Fired after a column resize drag completes
|
|
2029
|
-
* @fires activate-cell - Fired when a cell activation intent occurs
|
|
2030
|
-
* @fires group-toggle - Fired when a group row is toggled
|
|
2031
|
-
*
|
|
2032
|
-
* @cssprop --tbw-color-bg - Background color
|
|
2033
|
-
* @cssprop --tbw-color-fg - Foreground/text color
|
|
2034
|
-
*/
|
|
2035
1988
|
export declare class DataGridElement<T = any> extends HTMLElement implements InternalGrid<T> {
|
|
2036
1989
|
#private;
|
|
2037
1990
|
static readonly tagName = "tbw-grid";
|
|
1991
|
+
static readonly version: string;
|
|
2038
1992
|
_rows: T[];
|
|
2039
1993
|
get _columns(): ColumnInternal<T>[];
|
|
2040
1994
|
set _columns(value: ColumnInternal<T>[]);
|