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
<.table
  id="table-single-cell-types"
  rows={[%{id: 1, label: "Row One"}, %{id: 2, label: "Row Two"}]}
>
  <: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>
</.table>
Command Status Ran by Duration Created at
test TuistKitAcceptanceTests
Success
CI
5s
2 hours ago
<.table
  id="table-single-example"
  rows={[%{command: "test TuistKitAcceptanceTests", status: "Success", duration: "5s", created_at: "2 hours ago", ran_by: "CI"}]}
>
  <:col :let={i} label="Command">
    <.text_cell label={i.command} />
  </:col>
  <:col :let={i} label="Status">
    <.status_badge_cell label={i.status} status={String.downcase(i.status)} />
  </:col>
  <:col :let={i} label="Ran by">
    <.badge_cell label={i.ran_by} color="information" style="light-fill" />
  </:col>
  <:col :let={i} label="Duration" icon="square_rounded_arrow_down">
    <.text_cell label={i.duration} />
  </:col>
  <:col :let={i} label="Created at">
    <.text_cell sublabel={i.created_at} />
  </:col>
</.table>