Skip to main content

Table Widget Overview

The Table Widget provides a structured grid component for displaying and editing tabular data in Buildocs UI Engine.

Operating Modes​

The widget supports two mutually exclusive operating modes. The selected mode defines:

  • How data is sourced
  • How data is stored
  • Whether rows are system-managed or user-managed
  • Which configuration properties are available

Mode selection changes both the runtime behavior and the available settings in the properties panel.

Data Mode​

In Data Mode, the table functions as a data-bound view. The table is automatically populated with records retrieved from the backend/database.

Behavior​

  • Rows are populated from an external data source (backend / API / database)
  • Data is not stored inside the form
  • The widget renders records provided by the server
  • Operations such as pagination, filtering, sorting, and searching may be executed server-side

Data Flow​

Frontend ⇄ Backend

Metadata (page, filters, sorting, tokens) is exchanged and the backend returns the corresponding dataset.

Characteristics​

  • System-controlled data
  • Optimized for large datasets
  • Supports lazy loading and continuation tokens (e.g., nextToken)
  • Typically read-only, but may allow row-level actions

Typical Use Cases​

  • Database records
  • Documents
  • Logs
  • Lists of entities

Edit Row Mode​

In Edit Row Mode, the table functions as an inline data-entry grid.

Behavior​

  • Users manually add, edit, and remove rows
  • All data is managed entirely on the client side
  • No automatic backend binding is performed

Data Storage​

  • Table data is serialized and stored inside the form state
  • Persisted as a single JSON object/array

Characteristics​

  • User-controlled data
  • Fully editable cells
  • Suitable for small/medium datasets
  • Designed for structured input and calculations

Typical Use Cases​

  • Invoice lines
  • Material lists
  • Estimates
  • Custom tabular inputs

Mode-Specific Configuration​

The properties panel dynamically adapts to the selected mode.

Configuration AreaDescription
Shared propertiesCommon layout and behavior settings available in both modes
Data Mode propertiesServer interaction, pagination, and loading strategy
Edit Row Mode propertiesRow editing and manual input behavior

Only relevant options are displayed to reduce configuration complexity and prevent invalid combinations.