Text | Text and description | Text and description with image | Tag | Badge | Status badge | Button | Button with multiple buttons | Link button | Time |
---|---|---|---|---|---|---|---|---|---|
|
Row One
An internal identifier
|
![]()
Row One
Look, an image!
•
So pretty.
|
|
Row One
|
Row One
|
|
|
|
|
|
Row Two
An internal identifier
|
![]()
Row Two
Look, an image!
•
So pretty.
|
|
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>