Noora.Table (noora v0.2.0)
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
Attributes
label
(:string
) - The label of the badge. Defaults tonil
.icon
(:string
) - An optional icon to render next to the label. Defaults tonil
.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.
Attributes
- Global attributes are accepted.
Slots
button
(required) - The button or buttons to render.
Attributes
label
(:string
) (required) - The label of the button.variant
(:string
) - Determines the style. Defaults to"primary"
. Must be one of"primary"
,"secondary"
, or"destructive"
.underline
(:boolean
) - Determines if the button is underlined. Defaults tofalse
.- Global attributes are accepted.
Slots
icon_left
- Icon displayed on the left of an item.icon_right
- Icon displayed on the right of an item.
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 tonil
.- Global attributes are accepted.
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 theid
key of the stream. Defaults tonil
.row_navigate
(:fun
) - A function to generate the link to navigate to when clicking on a row. Defaults tonil
.
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.
Attributes
icon
(:string
) - Icon to show in the empty state. Defaults tonil
.title
(:string
) - Title of the empty state. Defaults tonil
.subtitle
(:string
) - Subtitle of the empty state. Defaults tonil
.
Slots
inner_block
- Custom empty state content. Supersedes all attributes.
Attributes
label
(:string
) - The label of the badge. Defaults tonil
.icon
(:string
) - An optional icon to render next to the label. Defaults tonil
.- Global attributes are accepted.
Attributes
label
(:string
) - The label of the cell. Defaults tonil
.icon
(:string
) - An optional icon to render next to the label. Mutually exclusive withimage
. Defaults tonil
.description
(:string
) - The description of the cell. Defaults tonil
.secondary_description
(:string
) - The secondary description of the cell. Defaults tonil
.- Global attributes are accepted.
Slots
image
- An optional image to render next to the label. Takes precedence overicon
.
Attributes
label
(:string
) - The label of the cell. Defaults tonil
.icon
(:string
) - An optional icon to render next to the label. Mutually exclusive withimage
. Defaults tonil
.sublabel
(:string
) - An optional sublabel. Defaults tonil
.- Global attributes are accepted.
Slots
image
- An optional image to render next to the label. Mutually exclusive withicon
. Takes precedence overicon
.
Attributes
time
(DateTime
) (required) - The time to render.show_time
(:boolean
) - Whether to show the time or date only. Defaults tofalse
.relative
(:boolean
) - Whether to show the time relative to now. Defaults tofalse
.- Global attributes are accepted.