Noora.Table (noora v0.1.0-alpha.4)

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

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

Summary

Functions

badge_cell(assigns)

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(assigns)

Attributes

  • Global attributes are accepted.

Slots

  • button (required) - The button or buttons to render.

status_badge_cell(assigns)

Attributes

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

table(assigns)

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.

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.

table_empty_state(assigns)

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(assigns)

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(assigns)

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.
  • Global attributes are accepted.

Slots

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

text_cell(assigns)

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(assigns)

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.