Noora (0.11.0)

Table

Text Text and description Text and description with image Tag Badge Status badge Button Button with multiple buttons Link button Time
Row One (Internal)
Row One An internal identifier
Row One Look, an image! • So pretty.
Row One
Row One
Row One
Row Two (Internal)
Row Two An internal identifier
Row Two Look, an image! • So pretty.
Row Two
Row Two
Row Two
Attribute Type Documentation Default Value
Required id * :string

A uniqie identifier for the table
Required rows * :list

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.
row_navigate :fun

A function to generate the link to navigate to when clicking on a row.
row_click :fun

A function to generate the click handler for a row.
empty_state :slot
Required col * :slot
Show slot attributes Hide slot 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

 
<:col :let={i} label="Text">
  <.text_cell label={i.label} sublabel="(Internal)" icon="alert_circle" />
</:col>
<:col :let={i} label="Text and description">
  <.text_and_description_cell label={i.label} description="An internal identifier" icon="alert_circle" />
</:col>
<:col :let={i} label="Text and description with image">
  <.text_and_description_cell label={i.label} description="Look, an image!" secondary_description="So pretty.">
    <:image>
      <img src="/images/tuist_social.jpeg" />
    </:image>
  </.text_and_description_cell>
</:col>
<:col :let={i} label="Tag">
  <.tag_cell label={i.label} icon="category" />
</:col>
<:col :let={i} label="Badge">
  <.badge_cell label={i.label} color="warning" style="light-fill" />
</:col>
<:col :let={i} label="Status badge">
  <.status_badge_cell label={i.label} status="success" />
</:col>
<:col :let={i} label="Button">
  <.button_cell>
<:button>
<.button label={i.label} variant="secondary"/>
</:button>
</.button_cell>
</:col>
<:col :let={i} label="Button with multiple buttons">
  <.button_cell>
    <:button>
      <.button variant="secondary" icon_only><.pencil /></.button>
    </:button>
    <:button>
      <.button variant="secondary" icon_only><.trash /></.button>
    </:button>
  </.button_cell>
</:col>
<:col :let={i} label="Link button">
  <.link_button_cell label={i.label} variant="secondary" underline={true}>
    <:icon_left>
      <.chevron_left />
    </:icon_left>
  </.link_button_cell>
</:col>
<:col :let={i} label="Time">
  <.time_cell time={~U[2023-01-01 12:00:00Z]} />
</:col>