An advanced transposed grid implementation using AG Grid that supports hierarchical rollup rows, data object movement, and complex aggregation scenarios. This component displays data elements across multiple document families with support for parent-child relationships and custom rollup configurations defined as child cards.
Type
type: "transposedGridRollup"
Properties
Required Properties
| Property | Type | Description |
|---|
| groupTaxon | string | The root data element group to display |
Optional Properties
None - Configuration is primarily done through child rollupColumn cards. Each rollupColumn also supports background color properties for empty vs populated cells.
Layout
- Default Width: 12 columns
- Default Height: 10 rows
- Supports Children: Yes (requires
rollupColumn children to define rows)
Configuration Examples
Basic Rollup Grid
- type: transposedGridRollup
id: invoiceRollup
properties:
groupTaxon: "invoice"
layout:
x: 0
y: 0
w: 12
h: 12
children:
- type: rollupColumn
id: "invoice/invoiceNumber"
properties:
title: "Invoice Number"
color: "#333"
backgroundColor: "#f0f0f0"
- type: rollupColumn
id: "invoice/totalAmount"
properties:
title: "Total Amount"
fontWeight: "bold"
Rollup Grid with Movement
- type: transposedGridRollup
id: lineItemsRollup
properties:
groupTaxon: "invoice/lineItems"
layout:
x: 0
y: 0
w: 12
h: 12
children:
- type: rollupColumn
id: "invoice/lineItems/description"
properties:
title: "Description"
movement:
enabled: true
showOnRows: "parent"
rule:
allowedDestinations: "siblings"
buttonLabel: "Move Item"
Rollup Column Configuration
Each child rollupColumn card defines a row in the grid with properties:
| Property | Type | Description |
|---|
| title | string | Display name for the row |
| color | string | Text color (CSS color value) |
| backgroundColor | string | Row background color |
| valueTaxonName | string | Specific taxon to display values from |
| rowDescriptionTaxonName | string | Taxon for row description text |
| indent | string | CSS margin-left for visual hierarchy |
| fontWeight | string | Font weight (normal, bold, etc.) |
| movement | object | Data movement configuration |
| emptyRollupBackgroundColor | string | Cell background color when value is empty |
| notEmptyRollupBackgroundColor | string | Cell background color when value is present |
| emptyRollupColor | string | Cell text color when value is empty |
| notEmptyRollupColor | string | Cell text color when value is present |
Movement Configuration
The movement property enables drag-and-drop or button-based movement:
movement: {
enabled: boolean;
showOnRows: 'parent' | 'child' | 'both';
rule: {
sourceTaxon?: string; // Defaults to taxonPath if not specified
allowedDestinations: string[] | 'siblings' | 'same-prefix';
buttonLabel?: string;
buttonIcon?: string;
batchMode?: boolean;
destinationFilter?: (dest, parentDataObject, source) => boolean;
};
quickMoves?: Array<{
targetTaxon: string;
label: string;
icon?: string;
color?: string;
confirmationMessage?: string;
}>;
}
- Array: Explicit list of allowed taxon paths or regex patterns
- Literal paths: Exact taxon paths (e.g.,
BalanceSheet/Assets)
- Regex patterns: Pattern strings that match multiple taxons (e.g.,
Group_.*, .*_Total$)
- Regex patterns, when provided, are resolved to matching group taxons and combined into the destination list
- ‘siblings’: Allow movement to sibling data objects
- ‘same-prefix’: Allow movement to taxons with same prefix
AG Grid Features
The component uses AG Grid Enterprise features:
- Tree data: Hierarchical parent-child relationships
- Row grouping: Automatic grouping by document family
- Custom cell renderers: Specialized rendering for rollup values
- Column headers: Custom header components
Grid Organization
Columns:
- Group column: Shows data element hierarchy (tree structure)
- Document columns: One column per document family
- Dynamic width: Columns sized based on content
Rows:
- Each rollup column definition creates a row
- Parent-child relationships shown via tree structure
- Values displayed in document columns
Financial Rollup Example
- type: transposedGridRollup
id: balanceSheet
properties:
groupTaxon: "financials"
layout:
x: 0
y: 0
w: 12
h: 14
children:
# Assets section
- type: rollupColumn
id: "financials/assets"
properties:
title: "ASSETS"
fontWeight: "bold"
backgroundColor: "#e8f4f8"
- type: rollupColumn
id: "financials/assets/currentAssets"
properties:
title: "Current Assets"
indent: "20px"
- type: rollupColumn
id: "financials/assets/fixedAssets"
properties:
title: "Fixed Assets"
indent: "20px"
# Liabilities section
- type: rollupColumn
id: "financials/liabilities"
properties:
title: "LIABILITIES"
fontWeight: "bold"
backgroundColor: "#f8e8e8"
movement:
enabled: true
showOnRows: "child"
rule:
allowedDestinations: "same-prefix"
- Force refresh counter for reactive updates
- Computed caching for expensive operations
- Lazy loading of document families
- Efficient data object filtering
Integration Features
- Document Viewer: Integration with active selection
- Movement System: Centralized data object movement
- Event System: Emits update events for coordination
- Keyboard Shortcuts: Can be extended for quick actions
Notes
Uses AG Grid Enterprise (requires license)
- Supports complex hierarchical data structures
- Movement rules can be highly customized
- The grid automatically handles document family grouping
- Hidden groups can be toggled via external controls
- Supports both batch and individual data object movement
- Custom cell renderers provide rich formatting options
- The component integrates with workspace store for data management
- Group sorting can be toggled (ascending/descending)
- Key filtering allows searching within the grid
- The grid is fully reactive to data changes
- Supports custom destination filters for complex movement logic
- Visual styling can be customized per row
- Indent property allows visual hierarchy representation
