Data Components

Data components display and edit extracted document data within V2 data forms. Each component binds to the data context via taxonomy tag paths, rendering the appropriate editor or display based on the taxon type defined in your taxonomy.

v2:attributeEditor

The core editing component. It resolves a taxonomy tag path to a data object attribute and renders the correct editor (text input, dropdown, date picker, etc.) based on the taxon type.

Props

Prop	Type	Default	Description
tagPath	string	required	Taxonomy path to bind to
label	string	—	Display label (auto-derived from the last segment of the tag path if omitted)
colSpan	number	—	Column span in grid layout (1-12)
readonly	boolean	false	Disable editing
valueFrom	string	—	Tag path to mirror value from (makes field read-only, see Data Binding)
editorOptions	AttributeEditorOptions	—	Advanced editor configuration (see below)

When valueFrom is set, the editor becomes a read-only input that displays the value from the referenced tag path. It checks shared formValues first, then falls back to searching data object attributes.

Editor Options

The editorOptions object provides fine-grained control over editor behavior and appearance.

Option	Type	Description
placeholder	string	Placeholder text when empty
cellMode	boolean	Excel-like flat appearance for grid cells — no border/shadow by default, border appears on hover/focus
cellBackground	string	Cell background color (e.g., `'#f0fdf4'`)
cellColor	string	Cell text color (e.g., `'#166534'`)
cellTestId	string	Custom `data-testid` for testing
displayAsRadio	boolean	Render SELECTION taxons as radio buttons instead of a dropdown
isCheckbox	boolean	Render as a checkbox
onCheckValue	string	Value to set when checkbox is checked
showCalendarPopup	boolean	Show a calendar picker for date fields
sourceDateFormat	string	Source date format for parsing
maskDateFormat	string	Display date format
isMaskedText	boolean	Use masked text display
maskedText	string	Mask pattern
hideExceptionPopup	boolean	Hide the validation exception popup
showPreview	boolean	Show value preview
hideAttributeMenu	boolean	Hide the attribute context menu (defaults to `false`)
hideInsertActions	boolean	Hide insert actions
allowDirectExtract	boolean	Enable direct text extraction from the document (see Extraction)
aiExtraction	AIExtractionConfig	AI-powered extraction configuration (see Extraction)
showAddFromSelection	boolean	Show a ”+” button on text selection (implied when `aiExtraction` is configured)

allowDirectExtract and aiExtraction are mutually exclusive. Use allowDirectExtract for fields where the value can be copied verbatim from the document. Use aiExtraction when an LLM should interpret and extract the value.

When aiExtraction is configured without an explicit placeholder, the editor auto-sets the placeholder to “Select text in document, then click to extract”. When allowDirectExtract is configured without a placeholder, it auto-sets to “Select text in document to copy value”.

Examples

Basic attribute editor:

{
  "component": "v2:attributeEditor",
  "props": {
    "tagPath": "invoice/invoiceNumber",
    "label": "Invoice Number"
  }
}

Read-only editor with value mirrored from another field:

{
  "component": "v2:attributeEditor",
  "props": {
    "tagPath": "invoice/displayTotal",
    "label": "Total",
    "readonly": true,
    "valueFrom": "invoice/calculatedTotal"
  }
}

Checkbox editor:

{
  "component": "v2:attributeEditor",
  "props": {
    "tagPath": "invoice/approved",
    "label": "Approved",
    "editorOptions": {
      "isCheckbox": true,
      "onCheckValue": "true"
    }
  }
}

v2:label

A read-only text display component. Use it for static headings, section titles, or descriptive text within a form.

Props

Prop	Type	Default	Description
text	string	required	The text content to display
class	string	`text-sm font-medium text-foreground`	CSS class string for styling

Example

{
  "component": "v2:label",
  "props": {
    "text": "Shipping Details",
    "class": "text-base font-bold text-foreground mb-2"
  }
}

Labels support dynamic text via bindings:

{
  "component": "v2:label",
  "bindings": {
    "text": "`Total items: ${ctx.dataObjects?.length ?? 0}`"
  }
}

v2:table

A row-based data display and editing component. It scopes rows by the parent taxonomy path of the first column’s tag metadata, then renders each matching data object as a table row with inline attribute editors.

Props

Prop	Type	Default	Description
tagPathPrefix	string	—	Taxonomy path prefix for scoping rows
columns	Array	required	Column definitions

Each entry in columns has the following shape:

Field	Type	Required	Description
tagPath	string	yes	Taxonomy path for the column’s attribute
label	string	yes	Column header text
width	string	no	CSS width (e.g., `'200px'`, `'30%'`)

Example

A three-column table for invoice line items:

{
  "component": "v2:table",
  "props": {
    "tagPathPrefix": "invoice/lineItems",
    "columns": [
      { "tagPath": "invoice/lineItems/description", "label": "Description", "width": "50%" },
      { "tagPath": "invoice/lineItems/quantity", "label": "Qty", "width": "25%" },
      { "tagPath": "invoice/lineItems/amount", "label": "Amount", "width": "25%" }
    ]
  }
}

When no matching data objects are found, the table displays a “No line items found” placeholder.

v2:grid

An enhanced data grid backed by the KodexaDataObjectGrid component (ag-Grid). It provides sorting, filtering, grouping, and inline editing for repeating data objects.

Props

Prop	Type	Default	Description
groupTaxon	string	required	Taxonomy path of the group taxon whose children define columns
groupable	boolean	false	Enable row grouping
showColumnMenu	boolean	false	Show column menu for visibility and ordering
aiExtraction	AIGridExtractionConfig	—	AI-powered row extraction (see Extraction)

The grid automatically builds its column definitions from the children of the specified groupTaxon in the taxonomy. All data objects in the current data context are passed to the grid, which filters them internally by path and parent ID.

Example

A grid for financial line items:

{
  "component": "v2:grid",
  "props": {
    "groupTaxon": "financialStatement/lineItems",
    "groupable": true,
    "showColumnMenu": true
  }
}

Grid with AI extraction:

{
  "component": "v2:grid",
  "props": {
    "groupTaxon": "invoice/lineItems",
    "aiExtraction": {
      "promptRef": "my-org/extract-line-items",
      "modelType": "LARGE"
    }
  }
}

When aiExtraction is configured, an “AI Extract” button appears in the grid toolbar. Target fields are automatically derived from the group taxon’s children unless explicitly overridden via targetPaths.

v2:knowledgeSection

Displays knowledge base content within a form. It looks up a knowledge item by type from the workspace’s document families, loads the item’s markdown content, and renders it in a collapsible section.

Props

Prop	Type	Default	Description
knowledgeItemType	string	required	The knowledge item type identifier to look up

The component handles three states: loading (with a spinner), not found (with an italicized message), and loaded (with an expandable section showing the title and rendered markdown).

Example

{
  "component": "v2:knowledgeSection",
  "props": {
    "knowledgeItemType": "processing-instructions"
  }
}

The component searches across all document families in the current workspace for a knowledge item matching the specified type. The item’s instructionMarkdown property is rendered as formatted HTML with support for headings, lists, tables, and code blocks.

v2:exceptions

Displays validation exceptions for data objects in the current scope. It aggregates exceptions from all data objects, filters by status and tag paths, and renders each exception as a compact card.

Props

Prop	Type	Default	Description
title	string	—	Optional heading above the exceptions list
showResolved	boolean	false	Include resolved exceptions (by default only open exceptions are shown)
filterPaths	string[]	—	Only show exceptions for these tag paths (shows all if omitted)

The component listens for workspace:dataExceptionsUpdated events and refreshes automatically when exceptions change.

Example

{
  "component": "v2:exceptions",
  "props": {
    "title": "Validation Issues",
    "filterPaths": ["Invoice/InvoiceNumber", "Invoice/InvoiceDate"]
  }
}

Introduction

Data Definitions

Script Steps

Scheduled Jobs

Intakes

Large Document Processing

Formulas

Project Templates

Data Forms

Reference

v2:attributeEditor

Props

Editor Options

Examples

v2:label

Props

Example

v2:table

Props

Example

v2:grid

Props

Example

v2:knowledgeSection

Props

Example

v2:exceptions

Props

Example

Introduction

Data Definitions

Script Steps

Scheduled Jobs

Intakes

Large Document Processing

Formulas

Project Templates

Data Forms

Reference

​v2:attributeEditor

​Props

​Editor Options

​Examples

​v2:label

​Props

​Example

​v2:table

​Props

​Example

​v2:grid

​Props

​Example

​v2:knowledgeSection

​Props

​Example

​v2:exceptions

​Props

​Example

v2:attributeEditor

Props

Editor Options

Examples

v2:label

Props

Example

v2:table

Props

Example

v2:grid

Props

Example

v2:knowledgeSection

Props

Example

v2:exceptions

Props

Example