Skip to main content
A specialized grid that displays data in a transposed format where each row represents a data element and each column represents a document family. This layout is ideal for comparing the same data elements across multiple documents. The grid groups columns by document family when multiple instances exist.

​
Type

type: "transposedGrid"

​
Properties

​
Required Properties

PropertyTypeDescription
groupTaxonstringThe data element group to display in transposed format

​
Optional Properties

PropertyTypeDescriptionDefault
attributeLabelstringCustom label for the grid-

​
Layout

  • Default Width: 12 columns
  • Default Height: 10 rows
  • Supports Children: No

​
Configuration Example

- type: transposedGrid
  id: invoiceComparison
  properties:
    attributeLabel: "Invoice Data"
    groupTaxon: "invoice"
  layout:
    x: 0
    y: 0
    w: 12
    h: 10

​
Grid Structure

The transposed grid creates a unique layout:
  • Rows: Each row represents a data attribute (taxon)
  • Columns: Each column represents a document or document family
  • Cells: Values from specific data objects

​
Column Organization

Single Instance per Document Family:
  • Column header shows document family path
  • Single column for that document’s data
Multiple Instances per Document Family:
  • Parent column groups instances together
  • Sub-columns numbered (#0, #1, #2, etc.)
  • Easy comparison of multiple instances

​
Key Features

  1. Document Family Grouping: Automatically groups data by document family
  2. Alphabetical Sorting: Document families sorted alphabetically by path
  3. Multi-Instance Support: Handles multiple data objects per document elegantly
  4. Locked First Column: Attribute names column stays fixed during horizontal scroll
  5. Resizable Columns: All columns can be resized by users
  6. Sortable First Column: Users can sort by attribute name

​
Grid Scrolling

The component uses custom grid scroll utilities to:
  • Enable smooth horizontal scrolling
  • Keep the first column locked
  • Maintain proper column widths
  • Handle resize events

​
Data Scoping

The grid automatically filters data objects:
  1. By taxon path: Only objects matching the configured group taxon
  2. By parent: If parent data object provided, shows only children
  3. By document family: Groups objects by their document family

​
Example: Document Comparison

- type: transposedGrid
  id: contractComparison
  properties:
    attributeLabel: "Contract Terms"
    groupTaxon: "contract"
  layout:
    x: 0
    y: 0
    w: 12
    h: 12
This creates a grid where:
  • Each row is a contract term (e.g., “Start Date”, “End Date”, “Value”)
  • Each column is a different contract document
  • You can easily compare terms across all contracts

​
Empty State

If no data objects match the criteria:
  • Grid displays with headers only
  • No data rows shown
  • Standard Kendo Grid “No records” message

​
Notes

  • The transposed format is ideal for comparing data across documents
  • Works best with consistent data structure across documents
  • Column width is set to 250px for value columns
  • First column (attribute names) is 200px wide
  • The grid supports custom cell renderers via the “dataAttribute” cell type
  • Horizontal scrolling is smooth and performant
  • The component uses Kendo Grid for rendering
  • Document family information comes from the workspace store
  • Grid automatically updates when data objects change
  • Supports both single and multi-instance document families
  • The grid is read-only (no inline editing)
  • Filtering and search are not built-in but can be added via parent components