@thkl/agrid 0.1.10 → 0.1.11
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 +81 -2
- package/fesm2022/thkl-agrid.mjs +1031 -218
- package/fesm2022/thkl-agrid.mjs.map +1 -1
- package/package.json +1 -1
- package/types/thkl-agrid.d.ts +336 -15
- package/types/thkl-agrid.d.ts.map +1 -1
package/README.md
CHANGED
|
@@ -237,7 +237,8 @@ refetch:
|
|
|
237
237
|
```
|
|
238
238
|
|
|
239
239
|
Text/range/quick events are debounced by `filterDebounceMs` (default 300 ms; `0` disables). The
|
|
240
|
-
|
|
240
|
+
The distinct-value picker is hidden in this mode unless the column supplies an explicit `values`
|
|
241
|
+
list representing the complete server-side value set.
|
|
241
242
|
|
|
242
243
|
## Grouping and aggregates
|
|
243
244
|
|
|
@@ -270,6 +271,7 @@ const treeConfig: AgridTreeConfig<OrgRow> = {
|
|
|
270
271
|
getId: row => row.id,
|
|
271
272
|
getParentId: row => row.parentId, // null / unknown id ⇒ root row
|
|
272
273
|
treeField: 'name', // column that shows the twisty
|
|
274
|
+
aggregateTreeNodes: true, // parent cells roll up descendant leaves
|
|
273
275
|
};
|
|
274
276
|
|
|
275
277
|
readonly provider = new AgridProvider<OrgRow>({
|
|
@@ -279,6 +281,11 @@ readonly provider = new AgridProvider<OrgRow>({
|
|
|
279
281
|
});
|
|
280
282
|
```
|
|
281
283
|
|
|
284
|
+
With `aggregateTreeNodes: true`, every expandable row displays descendant-leaf rollups in columns
|
|
285
|
+
that define `aggregate` (or have one set through `AgridControl`). For example,
|
|
286
|
+
`{ field: 'amount', aggregate: 'sum' }` shows the sum of a node's leaves in that node's amount cell.
|
|
287
|
+
Collapsed leaves still contribute. Filtering recalculates the rollups over the matching tree.
|
|
288
|
+
|
|
282
289
|
For path-like values such as `01.01.0001`, return the ordered segments:
|
|
283
290
|
|
|
284
291
|
```ts
|
|
@@ -312,7 +319,8 @@ shown only for leaf rows; parent rows retain their tree expand/collapse control.
|
|
|
312
319
|
## Standalone tree control
|
|
313
320
|
|
|
314
321
|
Use `<agrid-tree>` for the same parent-ID or path hierarchy without grid columns. It adds tree
|
|
315
|
-
keyboard navigation and optional single or multi-selection.
|
|
322
|
+
keyboard navigation and optional single or multi-selection. Since this component has no columns,
|
|
323
|
+
it ignores `aggregateTreeNodes`; descendant rollups apply only to tree mode in `<agrid>`.
|
|
316
324
|
|
|
317
325
|
```ts
|
|
318
326
|
readonly treeProvider = new AgridTreeProvider<OrgRow>({
|
|
@@ -342,6 +350,77 @@ The tree uses the shared `--agrid-color-text`, `--agrid-color-text-muted`,
|
|
|
342
350
|
`--agrid-color-accent`, `--agrid-color-accent-subtle`, `--agrid-color-accent-fg`,
|
|
343
351
|
`--agrid-color-border`, `--agrid-color-bg`, and `--agrid-color-bg-muted` CSS variables.
|
|
344
352
|
|
|
353
|
+
## Pivot tables
|
|
354
|
+
|
|
355
|
+
Use `pivotConfig` to derive a read-only client-side cross-tabulation from a flat datasource. The
|
|
356
|
+
first pivot release supports one row dimension, one column dimension, and one value field.
|
|
357
|
+
|
|
358
|
+
```ts
|
|
359
|
+
const provider = new AgridProvider<Sale>({
|
|
360
|
+
columns: [
|
|
361
|
+
{ field: 'region', header: 'Region' },
|
|
362
|
+
{ field: 'quarter', header: 'Quarter' },
|
|
363
|
+
{ field: 'revenue', header: 'Revenue', type: 'number', formatter: currency },
|
|
364
|
+
],
|
|
365
|
+
datasource: new AgridDataSource(sales),
|
|
366
|
+
pivotConfig: {
|
|
367
|
+
rowField: 'region',
|
|
368
|
+
columnField: 'quarter',
|
|
369
|
+
valueField: 'revenue',
|
|
370
|
+
aggregate: 'sum',
|
|
371
|
+
},
|
|
372
|
+
});
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
Each distinct `rowField` value becomes one row and each distinct `columnField` value becomes a
|
|
376
|
+
generated column. Intersections use `sum` by default and also support `avg`, `min`, `max`, `count`,
|
|
377
|
+
or a custom `(values) => result` function. Dimension labels and pivot values reuse source column
|
|
378
|
+
formatters. Missing intersections render empty.
|
|
379
|
+
|
|
380
|
+
Pivot rows react to datasource replacement and updates. They are derived values, so editing,
|
|
381
|
+
adding, reordering, master/detail, tree mode, server-side row models, and aggregate footers are
|
|
382
|
+
disabled or rejected in pivot mode. Client-side filtering, sorting, selection, and pagination
|
|
383
|
+
continue through the normal grid pipeline. Multi-level dimensions and totals are intentionally
|
|
384
|
+
outside this first slice.
|
|
385
|
+
|
|
386
|
+
When `showSidebar` is enabled, pivot grids add a **Pivot** sidebar tab. It updates `rowField`,
|
|
387
|
+
`columnField`, `valueField`, and built-in aggregate functions immediately without replacing the
|
|
388
|
+
provider. Assigning `provider.pivotConfig` programmatically uses the same reactive path.
|
|
389
|
+
|
|
390
|
+
### Saving and restoring settings
|
|
391
|
+
|
|
392
|
+
`saveSettings()` returns a detached, versioned object containing the pivot configuration and the
|
|
393
|
+
existing control state (column visibility, width, order, pinning, filters, sorts, pagination, and
|
|
394
|
+
aggregates). It is safe to JSON-encode and send to a backend. `loadSettings()` applies it to an
|
|
395
|
+
already-rendered grid immediately.
|
|
396
|
+
|
|
397
|
+
```ts
|
|
398
|
+
const settings = provider.saveSettings();
|
|
399
|
+
await api.saveGridSettings(settings);
|
|
400
|
+
|
|
401
|
+
const restored = await api.loadGridSettings();
|
|
402
|
+
provider.loadSettings(restored);
|
|
403
|
+
```
|
|
404
|
+
|
|
405
|
+
The component exposes the same methods through `viewChild(AgridComponent)`. Sidebar pivot and
|
|
406
|
+
column-visibility changes emit the complete snapshot through `(settingsChange)`:
|
|
407
|
+
|
|
408
|
+
```html
|
|
409
|
+
<agrid #grid [provider]="provider" (settingsChange)="saveSettings($event)" />
|
|
410
|
+
```
|
|
411
|
+
|
|
412
|
+
```ts
|
|
413
|
+
saveSettings(settings: AgridSettings): void {
|
|
414
|
+
void api.saveGridSettings(settings);
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
// Loading after the grid exists:
|
|
418
|
+
grid().loadSettings(savedSettings);
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
Custom aggregate functions are executable code and cannot be represented in JSON; attempting to
|
|
422
|
+
save one throws an explicit error. Register custom functions in application code instead.
|
|
423
|
+
|
|
345
424
|
## Page selector
|
|
346
425
|
|
|
347
426
|
Use `<agrid-page-selector>` to navigate pages by previous/next button, dropdown, or typed ID.
|