A data table with search, sorting, filters, optional row selection, foreign-key label resolution, and row/create actions.

• Presenting large relational datasets, data logs, or multi-attribute list rows in a structured grid layout.
• Providing interactive tabular views complete with sorting priorities, row selection states, foreign key display mappings, and dynamic filtering tree builders.
• Offering full CRUD operational tables with built-in row actions (Edit, Details, Delete) and a dedicated record creation button.
• Use Table when the page must browse many records from a query/view and users need scanning, sorting, filtering, pagination, or row-level actions.
• Use Table for list pages, work queues, back-office administration, approval inboxes, catalogs, and search results where each row represents one business record.
• Use Table when the page consumer may need to define runtime filters from the UI, not only fixed filters defined by the page builder.
• Use Table when a create flow, details flow, edit flow, or delete flow should stay close to the data list.

A useful table requires a valid dataSource.viewName, and it becomes much more reliable when the source also exposes a stable identifier field. References are optional but strongly recommended whenever the source contains foreign IDs that should be rendered as readable names. Column behavior is split across the table itself and its header/body child elements: the table owns source/filter/selection/paging/action scaffolding, while each column is defined by paired child elements in the header and body slots.

A tabbed container viewport with a top navigation bar holding static tab labels. Clicking a tab switches the active visible panel to display its specific child elements.

• Organizing large dashboards or complex forms into separate, focused tabbed views within a single screen container.
• Grouping related controls, tables, or sub-views into distinct tabs to reduce cognitive overload and save vertical scroll space.

• Acts as a structural layout container holding independent child widgets, forms, tables, and display fields across distinct tab panels.

• A customer 360 view with separate tabs for ‘Overview’, ‘Orders’, ‘Support Tickets’, and ‘Settings’.
• An analytical dashboard switching between ‘Sales Metrics’ (Tab 0) and ‘Inventory Status’ (Tab 1), referencing elements.default_tabs_7c4e5b9a256e.indexSelected.toString() in dependent queries.

• Squeezing the container into tiny height/width footprints when its nested children require ample room, prefer full-width (12 units) and generous height (at least 12 units).
• Using tabs for sequential multi-step wizard processes where data must be validated step-by-step, use a dedicated stepper or multi-page layout instead.

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

A styleable text block supporting dynamic expressions, full color palettes (text and background), filled/outlined color variants, typography variants (h1-h6, subtitle, body, caption), and layout controls like rounded corners and line wrapping.

• Displaying dynamic text content that requires rich typography styling, background color variants, rounded corners, or line wrapping settings.
• Rendering headlines, subtitles, badges, callouts, or stat labels with explicit horizontal and vertical alignment controls.

• Dynamic text strings, localized text values, or calculated expression outputs requiring custom presentation styling.

• An outlined status banner displaying a dynamic string expression with rounded corners and centered alignment.
• A prominent section header styled as an ‘h1’ typography font variant with custom primary background highlights.

• Using for long-form prose with rich markdown formatting like bullet lists or code blocks, use the markdown_field component instead.
• Using for simple card metric containers, use the data_display component instead.

Use instead

A dynamic 2D bar chart visualizing categorical data along X and Y axes, with support for multiple Y-value series (grouped/stacked), custom legend mappings, theme palettes, interactive toolbox features (zoom, image export, data view, magic type switch to line chart), and dynamic filter expressions.

• Visualizing categorical data, discrete value distributions, or multi-metric side-by-side performance comparisons.
• Comparing dynamic query metrics across categories (X-axis) against numerical ranges (Y-axis), with support for grouped or stacked bars.

Requires an active Source Query. Select a valid column property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate multi-bar comparisons or stacked views.

A flexible, fully customizable dynamic chart viewport driven by a source query and custom option expressions, featuring custom color theme pickers, sorting controls, and interactive toolbox utilities (save as image, clear selection, data view table, area zoom, magic type switch).

• Visualizing complex, non-standard, or highly customized multi-coordinate charts where standard chart types (bar, line, pie, scatter) do not offer sufficient option flexibility.
• Configuring fully dynamic charts backed by a source query with bespoke chart option expressions, theme palettes, and interactive toolbox features.

Requires selecting a backing database query from the Source View dropdown and providing a valid chart Option expression to dictate how coordinates and series render.

A dynamic 2D line chart visualizing trend lines along X and Y coordinates, supporting multiple Y-value line series, filled area options, custom legend aliases, theme presets, and interactive toolbox tools (area zoom, image export, data view, magic type switch to bar chart).

• Visualizing continuous data trends, time-series metrics, or multi-series numerical comparisons over sequential intervals.
• Plotting dynamic query data along X and Y axes using lines, with support for filled area line fills, stacked lines, and value data point labels.

Requires an active Source Query. Select an ordered property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate multi-line trend comparisons.

A dynamic 2D scatter plot rendering unconstrained point clouds along X and Y axes, complete with symbol sizing, polar coordinate modes, point clustering, regression trend lines, legend aliases, and interactive toolbox utilities.

• Plotting non-sequential numerical point clouds to observe correlations, clusters, distributions, or outliers across two independent coordinates.
• Visualizing statistical relationships with advanced scatter options such as regression analysis trendlines, point clustering, or polar coordinate representations.

Requires an active Source Query. Select a numerical column property for Label (X coordinate) and one or more numerical columns for Value (Y coordinate). Multiple value mappings generate distinct multi-colored point series.