Data Grid Table

Displays a Table Instance as a tabular grid within the Data Grid.

Remarks

The Data Grid Table control displays the tabular data for a Data Table in a spreadsheet-like grid. It is designed for reviewing, editing, and validating rows and columns of structured data within the Data Grid.

Purpose and Functionality

• Renders the contents of a Table Instance, displaying each row and column according to the document's schema.
• Supports navigation, editing, and validation of individual cells, rows, and columns.
• Adapts to different table layouts, including single-row, multi-row, and changeset views.
• Integrates with error handling, change tracking, and workflow commands for efficient review and correction.

Interactive Components

• Rows and Cells:
  Each row represents a Table Row Instance, and each cell corresponds to a Table Cell Instance for a specific Data Column.
  • The 'Cells' control renders all visible cells for each row, supporting direct editing and validation.
  • Visual indicators highlight errors, required fields, and workflow status.
• Context Menu:
  Provides table-level commands via a right-click menu, including actions such as inserting, deleting, duplicating, or splitting rows, clearing all rows, and rubberbanding new rows from the document image.
  • The 'ContextMenu' control adapts its available commands based on the table's state and workflow context.
  • Common commands include: Insert Row, Delete Row, Duplicate Row, Move Row Up/Down, Split Row, Clear All Rows, Rubberband Rows.
• Paging and Scrolling:
  Supports paging for large tables, allowing users to skip and display a configurable number of rows.
  • Use arrow keys to move through cell contents and between cells.
  • Use Ctrl + arrow keys to move from cell to cell.

Styling and CSS Class Names

This control and its child elements are assigned specific CSS class names to enable custom styling. These class names can be used from the CSS property of the Data Model or Data Table to apply custom styles to a Data Grid Table:

• The main control uses DataGridTable.
• The table element uses dgt-table.
• Each column header uses DataColumn and the code name of the field (e.g., DataColumn Item_No).
• Each cell uses DataColumn and the code name of the field or column.
• Each row uses TableRowInstance and may include data attributes for order and line count.
• Each field within a cell is rendered as a Data Grid Field, which itself uses the DataGridField class and the code name of the field or column.
• Additional classes may be applied based on field configuration, such as custom CSS classes set on the Data Field or Data Column.

These class names allow you to style the table, rows, columns, and individual cells with high precision. For example: .DataGridTable { background: #f8f8f8; } .dgt-table { border-collapse: collapse; } .DataColumn.Quantity { text-align: right; } .DataGridField.Error { background: #ffe6e6; }

For more information on CSS scoping and best practices, see CSS Builder.

Keyboard Shortcuts

• Arrow Keys: Move through cell contents and between cells.
• Ctrl + Arrow Keys: Move directly from cell to cell.
• Ctrl + Insert: Append a new row.
• Ctrl + Shift + Insert: Insert a row before the current row.
• Ctrl + Delete: Delete the current row.
• Ctrl + D: Duplicate the current row.
• Ctrl + Shift + Up: Move the current row up.
• Ctrl + Shift + Down: Move the current row down.
• F4: Rubberband a new record or capture rows by dragging a region.

Appearance and Customization

• Table columns are defined by Data Column objects, which control extraction, validation, and display options.
• Supports custom CSS styling for tables, rows, and cells, including dynamic class assignment and scoped style sheets.
• Adapts its layout and appearance based on table configuration, preview mode, and workflow state.

Error Handling and Validation

• Highlights invalid or missing values within the table, rows, and cells.
• Integrates with change tracking and validation workflows, supporting error navigation and correction.
• Provides commands for clearing all rows, validating data, and rubberbanding new rows.

Accessibility & Usability

• Keyboard navigation is fully supported for efficient review and editing.
• Context menus and buttons provide quick access to common actions.
• Paging and scrolling controls help manage large tables.
• Visual cues guide users to errors, required fields, and workflow status.

Example Workflow

1. Open a document in the Data Grid.
2. The DataGridTable displays the extracted table, such as invoice line items or transaction logs.
3. Review and edit cell values, insert or delete rows as needed.
4. Use context menu commands to duplicate, split, or move rows, or to rubberband new rows from the document image.
5. Save changes and resolve any errors or validation issues.

Related Concepts

• Data Grid: Hosts the DataGridTable for each table in a document.
• Table Instance: The runtime data object displayed by the table.
• Table Row Instance, Table Cell Instance: Child elements organized within the table.
• Data Column: Defines the structure and extraction logic for each column.
• Context Menu: Provides table-level commands and workflow actions.
• CSS Builder: Manages styling and appearance for tables, rows, and cells.

For more information, see the documentation for Data Grid, Table Instance, Data Column, and CSS Builder.

Context Menu Commands

Command	Shortcut	Description
content_copy Copy Field JSON		Copies JSON data for the current field to the clipboard.
backup_table Copy JSON		Copies JSON data for the current container to the clipboard.

Child Controls

Name	Type		Summary
Cells	Data Grid Field	►	Displays one or more rows containing data grid cells. Overview The Cells control renders all visible cells for each row in the Table Instance. Each cell corresponds to a Table Cell Instance for a specific Data Column. Purpose and Functionality Presents all table rows and their cells for review, editing, and validation. Supports direct editing of cell values, with validation and error highlighting. Visual indicators show required fields, errors, and workflow status. How to Use Click a cell to edit its value. Use Arrow Keys to navigate between cells and within cell contents. Use Ctrl + Arrow Keys to move directly from cell to cell. Errors and required fields are highlighted for quick review. Example > Edit the "Quantity" cell in a line item row and observe error highlighting if the value is invalid.
Context Menu	Context Menu	►	Displays commands which apply to the table instance. Overview The ContextMenu control provides a right-click context menu for the current Table Instance, offering commands relevant to table review and editing. Purpose and Functionality Offers quick access to table-level actions such as inserting, deleting, duplicating, splitting, or moving rows. Adapts its available commands based on the table's state and workflow context. Supports both standard and custom actions, including integration with batch processing and review workflows. How to Use Right-click anywhere in the table area to open the context menu. Use arrow keys to navigate, Enter or Space to execute, and Escape to close. Common commands include: Insert Row, Delete Row, Duplicate Row, Move Row Up/Down, Split Row, Clear All Rows, Rubberband Rows. Example > Right-click a row to insert a new row before, duplicate the row, or rubberband new rows from the document image.

Used By

Data Grid Container