Renders a table with generic styling.

Examples

<.table id="users" rows={@users}>
  <:col :let={user} label="id"><%= user.id %></:col>
  <:col :let={user} label="username"><%= user.username %></:col>
  <:empty_state>No data here yet</:empty_state>
</.table>

Attributes

• id (:string)
• class (:any) - CSS class. Defaults to nil.
• variant (:string) - Defaults to "basic". Must be one of "ghost", or "basic".
• rows (:list) - the list of rows to render. Defaults to [].
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• row_item (:any) - the function for mapping each row before calling the :col slot. Defaults to &Function.identity/1.
• density (:string) - row height. compact halves the vertical padding for data-heavy screens. Defaults to "comfortable". Must be one of "comfortable", or "compact".
• sticky_header (:boolean) - keep the header row pinned while the table scrolls (the table needs a scrollable ancestor). Defaults to false.
• striped (:boolean) - wash alternate rows for easier scanning. Defaults to false.
• sort_by (:any) - the currently sorted column's sort_key. Defaults to nil.
• sort_dir (:string) - the current sort direction. Defaults to "asc". Must be one of "asc", or "desc".
• on_sort (:any) - event name (or JS command) fired when a sortable header is clicked; receives phx-value-sort of the column's sort_key. Defaults to "sort".
• Global attributes are accepted. Supports all globals plus: ["colspan", "rowspan"].

Slots

• col - Accepts attributes:
  • label (:string)
  • class (:any)
  • row_class (:any)
  • sortable (:boolean) - render the header as a sort button.
  • sort_key (:string) - the key sent with on_sort (defaults to the downcased label).
• empty_state - A message to show when the table is empty, to be used together with :col. Accepts attributes:
  • row_class (:any)
• footer - a totals/summary row pinned under the body - supply <.td> cells (colspan works), e.g. <.td colspan={3}>Total</.td><.td>$2,500</.td>.

Attributes

• class (:any) - CSS class. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["colspan", "headers", "rowspan"].

Slots

• inner_block

Attributes

• class (:any) - CSS class. Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["colspan", "rowspan"].

Slots

• inner_block

Attributes

• class (:any) - CSS class. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Attributes

• class (:any) - CSS class. Defaults to nil.
• label (:string) - Adds a label your user, e.g name. Defaults to nil.
• sub_label (:string) - Adds a sub-label your to your user, e.g title. Defaults to nil.
• avatar_assigns (:map) - if using an avatar, this map will be passed to the avatar component as props. Defaults to nil.
• Global attributes are accepted.