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