Noora.Table (noora v0.76.0)

Copy Markdown

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.

<.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={MapSet.to_list(@expanded_task_keys)}
>
  <: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>

In your LiveView, handle the expand/collapse interaction:

def handle_event("toggle-expand", %{"row-key" => row_key}, socket) do
  expanded_keys = socket.assigns.expanded_task_keys

  updated_keys =
    if MapSet.member?(expanded_keys, row_key) do
      MapSet.delete(expanded_keys, row_key)
    else
      MapSet.put(expanded_keys, row_key)
    end

  {:noreply, assign(socket, expanded_task_keys: updated_keys)}
end

Summary

Functions

badge_cell(assigns)
button_cell(assigns)
link_button_cell(assigns)
status_badge_cell(assigns)
table(assigns)
table_empty_state(assigns)
tag_cell(assigns)
text_and_description_cell(assigns)
text_cell(assigns)
time_cell(assigns)

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", "attention", or "in_progress".
  • 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.
  • 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 [].

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.
  • expanded_content - Content to display when a row is expanded.

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.