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:dataTable

A read-only data grid for rendering arbitrary JSON data, powered by AG Grid. Unlike v2:table (which binds to taxonomy tag paths and renders inline attribute editors), v2:dataTable takes a plain array of objects and renders them in a fully-featured grid with sorting, filtering, and column resizing. It is typically used as a child of v2:serviceBridgeView to display bridge responses, but can be used anywhere with binding expressions. The grid automatically uses the platform’s AG Grid theme, matching light/dark mode.

Props

Prop	Type	Default	Description
rows	array	—	Array of objects to render as rows
columns	Array	—	Column definitions (inferred from first row if omitted)
emptyMessage	string	`"No data"`	Message shown when there are no rows
filterable	boolean	`true`	Show a quick-filter search box above the grid that filters across all columns. Set to `false` to hide it.
pageSize	number	`10`	Number of rows per page. The grid always shows a pagination footer with row counts and page navigation. Adjust this to control how many rows are visible per page.

Each entry in columns:

Field	Type	Required	Description
field	string	yes	Property name to read from each row object
title	string	no	Column header text (defaults to the field name)
width	number	no	Column width in pixels. Columns without a width flex to fill available space.
type	string	no	Column type: `"string"` (default) or `"boolean"` (renders checkmark/cross icon)

Built-in Features

Because v2:dataTable uses AG Grid under the hood, you get these features automatically:

Quick filter — a search box above the grid filters across all columns as you type (enabled by default, disable with filterable: false)
Pagination — a footer showing row counts (e.g. “1 to 10 of 25”) with page navigation controls. Defaults to 10 rows per page, configurable via pageSize.
Sorting — click any column header to sort ascending/descending
Column filtering — each column header shows a filter icon with type-appropriate filtering (text search for strings, set filter for booleans)
Column resizing — drag column borders to resize
Theme integration — automatically follows the platform’s light/dark mode

Examples

With explicit columns (quick filter and pagination are enabled by default):

{
  "component": "v2:dataTable",
  "bindings": {
    "rows": "ctx.$bridgeResult"
  },
  "props": {
    "columns": [
      { "field": "carrier", "title": "Carrier" },
      { "field": "rate", "title": "Rate", "width": 120 },
      { "field": "transit", "title": "Transit Days", "width": 120 }
    ]
  }
}

Custom page size with quick filter disabled:

{
  "component": "v2:dataTable",
  "bindings": {
    "rows": "ctx.$bridgeResult"
  },
  "props": {
    "filterable": false,
    "pageSize": 25,
    "columns": [
      { "field": "carrier", "title": "Carrier" },
      { "field": "rate", "title": "Rate", "width": 120 },
      { "field": "transit", "title": "Transit Days", "width": 120 }
    ]
  }
}

Boolean column with checkmark rendering:

{
  "component": "v2:dataTable",
  "bindings": {
    "rows": "ctx.$bridgeResult"
  },
  "props": {
    "filterable": true,
    "columns": [
      { "field": "name", "title": "Bill To Name" },
      { "field": "isValid", "title": "Valid", "type": "boolean", "width": 100 }
    ]
  }
}

With auto-inferred columns (column headers derived from property names):

{
  "component": "v2:dataTable",
  "bindings": {
    "rows": "ctx.$bridgeResult?.items"
  }
}

Static data via props (no bridge required):

{
  "component": "v2:dataTable",
  "props": {
    "rows": [
      { "code": "USD", "name": "US Dollar" },
      { "code": "EUR", "name": "Euro" },
      { "code": "GBP", "name": "British Pound" }
    ],
    "columns": [
      { "field": "code", "title": "Currency Code" },
      { "field": "name", "title": "Currency Name" }
    ]
  }
}

v2:markdown

Renders markdown content as formatted HTML using the platform’s KodexaMarkdown renderer. Supports headings, lists, tables, code blocks, and all standard markdown syntax. Typically used as a child of v2:serviceBridgeView to display formatted text from bridge responses.

Props

Prop	Type	Default	Description
content	string	—	Markdown content to render
size	string	`"medium"`	Size variant (`"small"`, `"medium"`, `"large"`)

Examples

Static markdown:

{
  "component": "v2:markdown",
  "props": {
    "content": "### Instructions\n\nReview the extracted values and correct any errors before approving."
  }
}

Dynamic content from a bridge response:

{
  "component": "v2:markdown",
  "bindings": {
    "content": "ctx.$bridgeResult?.analysisReport"
  }
}

Markdown with size variant:

{
  "component": "v2:markdown",
  "bindings": {
    "content": "ctx.$bridgeResult?.summary"
  },
  "props": {
    "size": "small"
  }
}

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

Activity Plans

Data Definitions

Scripting

Scheduled Jobs

Intakes

Formulas

Project Templates

Data Forms

Working with Claude Code

Reference

v2:attributeEditor

Props

Editor Options

Examples

v2:label

Props

Example

v2:table

Props

Example

v2:grid

Props

Example

v2:dataTable

Props

Built-in Features

Examples

v2:markdown

Props

Examples

v2:knowledgeSection

Props

Example

v2:exceptions

Props

Example

Introduction

Activity Plans

Data Definitions

Scripting

Scheduled Jobs

Intakes

Formulas

Project Templates

Data Forms

Working with Claude Code

Reference

Documentation Index

​v2:attributeEditor

​Props

​Editor Options

​Examples

​v2:label

​Props

​Example

​v2:table

​Props

​Example

​v2:grid

​Props

​Example

​v2:dataTable

​Props

​Built-in Features

​Examples

​v2:markdown

​Props

​Examples

​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:dataTable

Props

Built-in Features

Examples

v2:markdown

Props

Examples

v2:knowledgeSection

Props

Example

v2:exceptions

Props

Example