← Interface components

UI.Table

luastra/ui
UI.Table(input: Input): Node

Creates semantic tabular data whose direct children are TableRow nodes. Assistive technologies can preserve row and column relationships that a collection of generic rows cannot express.

Mental model

This is a declarative node: app.render describes it again from current state, while the host matches its stable id to the existing view.

Before you use it

Add luastra/ui to this module's dependencies in luastra.json, then import it with require("luastra/ui"). The project must declare the ui.render capability. app.render must return one UI.Screen root; place this node inside that tree rather than invoking it for a hidden side effect.

How it fits

The constructor validates its fields immediately and returns a UI.Node. After app.render returns, the host reconciles that node by stable id with the current semantic DOM-based interface. Current desktop and mobile hosts package the same web artifact; native adapters are used at capability boundaries.

When to use it

Use UI.Table for genuinely two-dimensional data where headers identify values across rows or columns. Use List or Grid for collections that do not require table relationships.

Shared parameter groups

layouttext-stylesemantic

Parameters

ParameterType / valuesDescription
idlowercase path, requiredUnique ID.
childrenUI.TableRow[]Table rows only.
gapnone | xs | sm | md | lg | xlSpace between children. Group: Layout and surfaces.
paddingnone | xs | sm | md | lg | xl | responsiveAll-side inner spacing; responsive is supported only by padding. Group: Layout and surfaces.
marginnone | xs | sm | md | lg | xlAll-side outer spacing. Group: Layout and surfaces.
paddingX / paddingYnone | xs | sm | md | lg | xlAxis-specific inner spacing. Group: Layout and surfaces.
paddingTop / paddingBottom / paddingStart / paddingEndnone | xs | sm | md | lg | xlLogical side-specific inner spacing. Group: Layout and surfaces.
marginX / marginYnone | xs | sm | md | lg | xlAxis-specific outer spacing. Group: Layout and surfaces.
marginTop / marginBottom / marginStart / marginEndnone | xs | sm | md | lg | xlLogical side-specific outer spacing. Group: Layout and surfaces.
surfaceplain | card | elevated | accentBackground, border, and elevation. Group: Layout and surfaces.
widthfull | content | wideAvailable width, 720 px maximum, or 1180 px maximum. Group: Layout and surfaces.
alignstart | center | end | stretch | betweenCross-axis alignment. Group: Layout and surfaces.
justifystart | center | end | betweenMain-axis alignment. Group: Layout and surfaces.
flowwrap | nowrapFlex wrapping. Group: Layout and surfaces.
responsivebooleanNarrow-screen adaptation. Group: Layout and surfaces.
classNamesafe string ≤ 256 bytesAdditional admitted class tokens. Group: Layout and surfaces.
tonemuted | error | successSemantic text tone. Group: State and semantics.
appearanceprimary | secondary | danger | ghostAction appearance. Group: State and semantics.
variantbody | subheading | heading | titleBody text or h3, h2, and h1 heading semantics. Group: State and semantics.
rolealert | group | statusSupported ARIA role. Group: State and semantics.
labelstringAccessible name. Group: State and semantics.
hiddenbooleanVisibility state. Group: State and semantics.
disabledbooleanDisabled state. Group: State and semantics.
busybooleanaria-busy state. Group: State and semantics.
requiredbooleanRequired input state. Group: State and semantics.
errorIdcomponent idAssociates a visible role=alert. Group: State and semantics.
textColortoken | #RRGGBBLocal or inherited foreground. Group: Text and local colors.
backgroundColortoken | #RRGGBBComponent-box background. Group: Text and local colors.
Color tokensaccent | danger | muted | surface | success | text | transparent | warningCurrent Screen theme colors. Group: Text and local colors.

Children and layout

Table rows only.

Accessibility and keyboard

TableRow and TableCell create a real table; header and scope associate headers with columns and rows.

Common mistakes

  • Using a duplicate id or an uppercase path segment.
  • Passing a shared-group parameter that is not listed on this component page.

Returns

Node — a validated declarative UI node that becomes part of the next host-neutral render tree.

What happens next

A validated declarative node appears after it is returned as part of the current render tree.

Failures and fixes

Invalid fields, duplicate IDs, unsupported child combinations, or a missing ui.render capability fail during check, render-tree validation, or host startup.

Availability

Source API in 0.5.0-alpha; the public installer targets 0.5.0-alpha. Verify host-specific behavior against the selected SDK.

Focused example

UI.Table {
    id = "docs/parameters",
    label = "Parameters",
    UI.TableRow {
        id = "docs/parameters/header",
        UI.TableCell {
            id = "docs/parameters/name",
            text = "Name",
            header = true,
            scope = "col",
        },
    },
}

Continue learning

Prerequisites

UI.TableCellUI.List

Companions

UI.ListItem

Complete inventory

View all pages in Interface components
← Previous: UI.DividerNext: UI.TableRow →