│ Grooper Help - Version 25.0
25.0.0024 2,166

Virtual Table

Element Container Instance Data Grid Element GrooperReview.DataGrid

Displays a table in the Data Grid based on a Virtual Table Definition.

Remarks

The Virtual Table control displays tabular data for a Virtual Table Definition 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 Virtual Table Definition, displaying each row and column according to the selected collection and fields.
  • 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.
  • Table columns are defined by a Virtual Table Definition defined on the Data View.

Interactive Components

  • Rows and Cells:
    Each row represents a record from the selected collection, and each cell corresponds to a Data Field or Data Column chosen in the Virtual Table Definition.

    • The 'Cells' control renders all visible cells for each row, supporting direct editing and validation.
    • Visual indicators highlight errors, required fields, and workflow status.

  • Table Header:
    Displays column headers with field names, tooltips, and data types.

    • Supports sorting by clicking header buttons; sorted columns are visually indicated.

  • Caption Area:
    Shows the collection name and total record count.

    • Displays a warning icon and tooltip if errors are present in the underlying data.

  • Context Menu:
    Provides table-level commands via a right-click menu, including actions such as sorting, copying, or exporting data.

    • The 'MenuModel' control adapts its available commands based on the table's state and workflow context.

  • 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.

Keyboard Shortcuts

  • Arrow Keys: Move through cell contents and between cells.
  • Ctrl + Arrow Keys: Move directly from cell to cell.
  • Tab / Shift+Tab: Move between fields and rows.

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 to apply custom styles to a Virtual Table:

  • The main control uses VirtualTable.
  • 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 VirtualTableRow 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: .VirtualTable { border-collapse: collapse; } .DataColumn.Quantity { text-align: right; } .DataGridField.Confirmed { background: #e6ffe6; }

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

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 VirtualTable displays the selected collection, 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 sort, copy, or export data.
  5. Save changes and resolve any errors or validation issues.

Related Concepts

For more information, see the documentation for Data Grid, Virtual Table Definition, Data Field, 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

NameTypeSummary

Used By

Data Grid CollectionData Grid ContainerData Grid Document

Notification