Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/table.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# 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>
```