Table

Displays structured rows and columns with optional sorting and expansion.

Table web component

Displays structured rows and columns with optional sorting and expansion.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Cell types

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

Text

Description

Tag

Status

Created at

Row One

An internal identifier

Category

Success

2023-01-01T12:00:00Z

Row Two

Another identifier

User

Running

2023-01-02T12:00:00Z

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

Command

Status

Ran by

Duration

Created at

test TuistKitAcceptanceTests

Success

Continuous integration

5 seconds

2 hours ago

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

Name

Duration (desc)

Created at (asc)

Row One

2 hours ago

Row Two

12s

2 hours ago

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

Task

Hit

Type

GeneratedAssetSymbols.swift

Remote

Clang

CompileSwiftSources.swift

Local

Swift

LinkBinary

Missed

Clang

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

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`	json	`[]`	Defines columns programmatically when declarative noora-table-column children are not used.
`rows`	json	`[]`	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

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

Styling parts

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

Behavior

Row activation emits a `noora-row-select` event.