# `Noora.Table`

Noora's table component.

The table component is used to display data in a tabular format. It supports various types of cells, such as text, badges, and buttons.

## Usage

The component expects its content to be passed as a list of rows or a LiveView stream as the `rows` attribute. Each row is a map with its
values.
Columns are defined using the `col` slot, which takes a label and an optional icon. Inside the columns, a large number of different cells
are supported.

## Example

### Basic table

```
<.table
  id="table-single-cell-types"
  rows={[%{id: 1, label: "Row One", status: "error"}, %{id: 2, label: "Row Two", status: "success"}]}
>
  <:col :let={i} label="Text">
    <.text_cell label={i.label} sublabel="(Internal)" icon="alert_circle" />
  </:col>
  <:col :let={i} label="Status badge">
    <.status_badge_cell label={i.status} status={i.status />
  </:col>
</.table>
```

### Expandable rows

Tables can have expandable rows that reveal additional content when clicked. Use the `row_expandable` attribute to determine which rows can be expanded,
and the `expanded_content` slot to define what content to show.

Expansion is handled entirely client-side: clicking a row toggles it without a server
round trip, so the reveal animation starts instantly. The expanded content is always
rendered (collapsed to zero height), and `expanded_rows` only sets which rows start out
expanded. No `handle_event` is needed. Note that a LiveView re-render of the table (for
example sorting or searching) resets rows to that initial state.

```
<.table
  id="expandable-table"
  rows={@tasks}
  row_key={fn task -> task.key end}
  row_expandable={fn task -> not Enum.empty?(task.details) end}
  expanded_rows={[]}
>
  <:col :let={task} label="Task">
    <.text_cell label={task.description} />
  </:col>
  <:col :let={task} label="Status">
    <.badge_cell label={task.status} color="success" />
  </:col>
  <:expanded_content :let={task}>
    <div>
      <%= for detail <- task.details do %>
        <p>{detail}</p>
      <% end %>
    </div>
  </:expanded_content>
</.table>
```

# `badge_cell`

## Attributes

* `label` (`:string`) - The label of the badge. Defaults to `nil`.
* `icon` (`:string`) - An optional icon to render next to the label. Defaults to `nil`.
* `style` (`:string`) - The style of the badge. Defaults to `"fill"`. Must be one of `"fill"`, or `"light-fill"`.
* `color` (`:string`) - The color of the badge. Defaults to `"neutral"`. Must be one of `"neutral"`, `"destructive"`, `"warning"`, `"attention"`, `"success"`, `"information"`, `"focus"`, `"primary"`, or `"secondary"`.
* Global attributes are accepted.

# `button_cell`

## Attributes

* Global attributes are accepted.
## Slots

* `button` (required) - The button or buttons to render.

# `link_button_cell`

## Attributes

* `label` (`:string`) (required) - The label of the button.
* `variant` (`:string`) - Determines the style. Defaults to `"primary"`. Must be one of `"primary"`, `"secondary"`, or `"destructive"`.
* `underline` (`:boolean`) - Determines if the button is underlined. Defaults to `false`.
* Global attributes are accepted.
## Slots

* `icon_left` - Icon displayed on the left of an item.
* `icon_right` - Icon displayed on the right of an item.

# `status_badge_cell`

## Attributes

* `status` (`:string`) (required) - The status of the badge. Must be one of `"success"`, `"error"`, `"warning"`, `"disabled"`, `"attention"`, or `"in_progress"`.
* `label` (`:string`) - The label of the badge. Defaults to `nil`.
* Global attributes are accepted.

# `table`

## Attributes

* `id` (`:string`) (required) - A uniqie identifier for the table.
* `rows` (`:list`) (required) - The table content.
* `row_key` (`:fun`) - A function to generate the row key. Required when using a LiveView stream. If using streams and not provided, defaults to the `id` key of the stream. Defaults to `nil`.
* `row_navigate` (`:fun`) - A function to generate the link to navigate to when clicking on a row. Defaults to `nil`.
* `row_click` (`:fun`) - A function to generate the click handler for a row. Defaults to `nil`.
* `row_expandable` (`:fun`) - A function to determine if a row can be expanded. Returns true/false. Defaults to `nil`.
* `expanded_rows` (`:list`) - A list of row keys/IDs that are currently expanded. Defaults to `[]`.
* `expand_label` (`:string`) - Accessible label for the disclosure button that expands/collapses a row. Defaults to `"Toggle row details"`.
## Slots

* `empty_state`
* `col` (required) - Accepts attributes:

  * `label` (`:string`) - The label of the column.
  * `icon` (`:string`) - An icon to render next to the label.
  * `patch` (`:string`) - A patch to apply to the column.
  * `sort_order` (`:any`) - When set to "asc" or "desc", renders a sort-direction arrow that morphs between the two directions as the value changes. Mirror your sort-state gating, e.g. `sort_order={@sort_by == "duration" && @sort_order}`.
* `expanded_content` - Content to display when a row is expanded.

# `table_empty_state`

## Attributes

* `icon` (`:string`) - Icon to show in the empty state. Defaults to `nil`.
* `title` (`:string`) - Title of the empty state. Defaults to `nil`.
* `subtitle` (`:string`) - Subtitle of the empty state. Defaults to `nil`.
## Slots

* `inner_block` - Custom empty state content. Supersedes all attributes.

# `tag_cell`

## Attributes

* `label` (`:string`) - The label of the badge. Defaults to `nil`.
* `icon` (`:string`) - An optional icon to render next to the label. Defaults to `nil`.
* Global attributes are accepted.

# `text_and_description_cell`

## Attributes

* `label` (`:string`) - The label of the cell. Defaults to `nil`.
* `icon` (`:string`) - An optional icon to render next to the label. Mutually exclusive with `image`. Defaults to `nil`.
* `description` (`:string`) - The description of the cell. Defaults to `nil`.
* `secondary_description` (`:string`) - The secondary description of the cell. Defaults to `nil`.
* `truncate` (`:boolean`) - Cap the cell to a single line per row and clip overflow with an ellipsis, instead of letting free-form content (e.g. a command with many target arguments) widen the column unbounded. On by default; pass `truncate={false}` to opt out. Defaults to `true`.
* Global attributes are accepted.
## Slots

* `image` - An optional image to render next to the label. Takes precedence over `icon`.

# `text_cell`

## Attributes

* `label` (`:string`) - The label of the cell. Defaults to `nil`.
* `icon` (`:string`) - An optional icon to render next to the label. Mutually exclusive with `image`. Defaults to `nil`.
* `sublabel` (`:string`) - An optional sublabel. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `image` - An optional image to render next to the label. Mutually exclusive with `icon`. Takes precedence over `icon`.

# `time_cell`

## Attributes

* `time` (`DateTime`) (required) - The time to render.
* `show_time` (`:boolean`) - Whether to show the time or date only. Defaults to `false`.
* `relative` (`:boolean`) - Whether to show the time relative to now. Defaults to `false`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*