Skip to main content
A hierarchical tree view component that displays data objects and their attributes in an expandable/collapsible tree structure. This component provides advanced filtering, searching, and editing capabilities with integration to document viewers for in-context editing.

​
Type

type: "dataObjectsTree"
This component doesn’t have a registered metadata file - it’s typically used internally by other components.

​
Properties

This component is primarily used programmatically and receives props directly rather than through card configuration:
PropertyTypeDescription
groupTaxonMetadataTagMetadataMetadata for the root taxon group
dataObjectsDataObject[]Array of data objects to display
parentDataObjectDataObjectOptional parent data object for scoping
viewIdstringView identifier for state management
showHeaderbooleanWhether to show the toolbar header

​
Layout

This component is typically embedded within other components rather than used as a standalone card.

​
Features

​
Search and Filtering

  • Text Search: Search across labels and values
  • Show labels with no value: Toggle to show/hide empty attributes
  • Limit to page: Filter to show only data from the current page
  • Match the page tags: Filter to show only attributes matching current page tags

​
Tree Structure

The tree automatically builds a hierarchical structure including:
  • Data objects as parent nodes
  • Attributes as leaf nodes
  • Nested data objects as child branches
  • Empty taxon placeholders (showing structure even when no data exists)

​
Visual Features

  • Color-coded icons: Different icons for groups, sections, formulas, and attributes
  • Expand/collapse: Click to expand or collapse tree nodes
  • Auto-expansion: Root node automatically expands on mount
  • Search highlighting: Automatically expands branches matching search

​
Editing Capabilities

  • Inline editing: Edit attribute values directly in the tree
  • Show in context: Click any attribute to view it in the document viewer
  • Add selected value: Add currently selected text from document to an attribute
  • Add/delete data objects: Plus and trash icons for managing sibling data objects

​
Context Integration

  • Integrates with document viewer for “show in context” functionality
  • Detects active selections in document viewer
  • Provides “Add Selected Value” option when text is selected

​
Icon Mapping

The component uses different icons based on taxon type:
  • Groups/Data Objects: folder-table-outline
  • Sections: minus
  • Formulas: math-integral-box
  • Metadata paths: file-document-outline
  • Default attributes: tag

​
Performance Optimizations

  • Recursion depth limit (max 10 levels) to prevent infinite loops
  • Processed ID tracking to avoid circular references
  • Computed caching for taxon maps and tree items
  • Lazy loading with expandable nodes

​
Filtering Logic

The component implements sophisticated filtering:
  1. Page filtering: Uses page number from data features
  2. Tag filtering: Matches against current page tags
  3. Value filtering: Shows/hides empty attributes
  4. Search filtering: Recursive search through tree structure

​
Example Usage in Context

While not typically configured directly in YAML, here’s how it might be used programmatically: 
<KodexaDataObjectTree
  :group-taxon-metadata="invoiceMetadata"
  :data-objects="invoiceDataObjects"
  :view-id="currentViewId"
  :show-header="true"
/>

​
Notes

  • The component enforces a maximum depth of 10 levels to prevent runaway recursion
  • Empty taxon structures are included to show the complete taxonomy even without data
  • Attributes marked as notUserLabelled are automatically excluded
  • Selection attributes use a specialized editor component
  • The tree state (expanded nodes) is preserved during searches
  • Component integrates with workspace store for add/delete operations
  • Supports both read-only and editable display modes based on attribute type