Table

Displays structured rows and columns with optional sorting and expansion.

html

<noora-table>
  <noora-table-column name="name">Name</noora-table-column>
  <noora-table-row row-key="tuist">
    <noora-table-cell column="name">Tuist</noora-table-cell>
  </noora-table-row>
</noora-table>

Attributes

Attribute	Type or allowed values	Default	Description
`row-key`	`string`	`"id"`	Selects the property used as each row key.
`empty-title`	`string`	`"No results"`	Sets the empty-state title.
`selectable`	`boolean`	`false`	Makes rows selectable.

Properties

Property	Type or allowed values	Default	Description
`columns`	`Array<Record<string, unknown>>`	`[]`	Defines columns programmatically when declarative noora-table-column children are not used.
`rows`	`Record<string, unknown>[]`	`[]`	Defines rows programmatically when declarative noora-table-row children are not used.

Events

Event	Type	Description
`noora-row-select`	`CustomEvent<{ index: number; row: Record<string, unknown> }>`	Emitted when a selectable row is activated.

Slots

Slot	Description
`default`	Declarative noora-table-column and noora-table-row children.
`empty`	A custom empty state.

Styling parts

Part	Description
`table`	The native table.
`row`	Each body row.
`cell`	Each body cell.

Row activation emits a noora-row-select event.

Cell types

Render text, descriptions, tags, badges, status, actions, and time values as structured columns.

html

<noora-table>
  <noora-table-column name="label">Text</noora-table-column>
  <noora-table-column name="description">Description</noora-table-column>
  <noora-table-column name="tag">Tag</noora-table-column>
  <noora-table-column name="status">Status</noora-table-column>
  <noora-table-column name="createdAt" format="date">Created at</noora-table-column>
  <noora-table-row row-key="1">
    <noora-table-cell column="label">Row One</noora-table-cell>
    <noora-table-cell column="description">An internal identifier</noora-table-cell>
    <noora-table-cell column="tag">Category</noora-table-cell>
    <noora-table-cell column="status">Success</noora-table-cell>
    <noora-table-cell column="createdAt">2023-01-01T12:00:00Z</noora-table-cell>
  </noora-table-row>
  <noora-table-row row-key="2">
    <noora-table-cell column="label">Row Two</noora-table-cell>
    <noora-table-cell column="description">Another identifier</noora-table-cell>
    <noora-table-cell column="tag">User</noora-table-cell>
    <noora-table-cell column="status">Running</noora-table-cell>
    <noora-table-cell column="createdAt">2023-01-02T12:00:00Z</noora-table-cell>
  </noora-table-row>
</noora-table>

Command example

Combine common build and test information.

html

<noora-table>
  <noora-table-column name="command">Command</noora-table-column>
  <noora-table-column name="status">Status</noora-table-column>
  <noora-table-column name="ranBy">Ran by</noora-table-column>
  <noora-table-column name="duration" icon="square_rounded_arrow_down">Duration</noora-table-column>
  <noora-table-column name="createdAt">Created at</noora-table-column>
  <noora-table-row row-key="test">
    <noora-table-cell column="command">test TuistKitAcceptanceTests</noora-table-cell>
    <noora-table-cell column="status">Success</noora-table-cell>
    <noora-table-cell column="ranBy">Continuous integration</noora-table-cell>
    <noora-table-cell column="duration">5 seconds</noora-table-cell>
    <noora-table-cell column="createdAt">2 hours ago</noora-table-cell>
  </noora-table-row>
</noora-table>

Sortable columns

Show ascending and descending sort direction indicators.

html

<noora-table>
  <noora-table-column name="name">Name</noora-table-column>
  <noora-table-column name="duration" sort-order="desc">Duration (desc)</noora-table-column>
  <noora-table-column name="createdAt" sort-order="asc">Created at (asc)</noora-table-column>
  <noora-table-row row-key="1">
    <noora-table-cell column="name">Row One</noora-table-cell>
    <noora-table-cell column="duration">5s</noora-table-cell>
    <noora-table-cell column="createdAt">2 hours ago</noora-table-cell>
  </noora-table-row>
  <noora-table-row row-key="2">
    <noora-table-cell column="name">Row Two</noora-table-cell>
    <noora-table-cell column="duration">12s</noora-table-cell>
    <noora-table-cell column="createdAt">2 hours ago</noora-table-cell>
  </noora-table-row>
</noora-table>

Selectable rows

Allow rows to emit selection events for detail or expansion workflows.

html

<noora-table selectable>
  <noora-table-column name="task">Task</noora-table-column>
  <noora-table-column name="hit">Hit</noora-table-column>
  <noora-table-column name="type">Type</noora-table-column>
  <noora-table-row row-key="task-1">
    <noora-table-cell column="task">GeneratedAssetSymbols.swift</noora-table-cell>
    <noora-table-cell column="hit">Remote</noora-table-cell>
    <noora-table-cell column="type">Clang</noora-table-cell>
  </noora-table-row>
  <noora-table-row row-key="task-2">
    <noora-table-cell column="task">CompileSwiftSources.swift</noora-table-cell>
    <noora-table-cell column="hit">Local</noora-table-cell>
    <noora-table-cell column="type">Swift</noora-table-cell>
  </noora-table-row>
  <noora-table-row row-key="task-3">
    <noora-table-cell column="task">LinkBinary</noora-table-cell>
    <noora-table-cell column="hit">Missed</noora-table-cell>
    <noora-table-cell column="type">Clang</noora-table-cell>
  </noora-table-row>
</noora-table>