PhiaUi.Components.TableGroup (phia_ui v0.1.17)

Grouped table body with a sticky-ish group header row.

Provides two components for visually grouping table rows under a labeled section header. Useful for categorised data (e.g. grouped by status, region, or date). Collapse/expand of groups is controlled by the LiveView.

Sub-components

Function	HTML element	Purpose
`table_group/1`	`<tbody>`	Wrapper that groups related rows
`table_group_header/1`	`<tr>`	Full-width label row for the group

Example

<.table>
  <.table_header>
    <.table_row>
      <.table_head>Name</.table_head>
      <.table_head>Status</.table_head>
    </.table_row>
  </.table_header>

  <.table_group>
    <.table_group_header label="Active" count={3} />
    <.table_row :for={u <- @active_users}>
      <.table_cell>{u.name}</.table_cell>
      <.table_cell>Active</.table_cell>
    </.table_row>
  </.table_group>

  <.table_group>
    <.table_group_header label="Inactive" count={2} />
    <.table_row :for={u <- @inactive_users}>
      <.table_cell>{u.name}</.table_cell>
      <.table_cell>Inactive</.table_cell>
    </.table_row>
  </.table_group>
</.table>

Collapsible groups

When you set on_toggle on table_group_header/1, a chevron button appears:

<.table_group_header
  label="Advanced"
  count={length(@advanced_items)}
  on_toggle="toggle_group"
  row_id="advanced"
  collapsed={@collapsed_groups["advanced"]}
/>

Summary

Functions

table_group(assigns)

Renders a <tbody> that logically groups a set of rows.

table_group_header(assigns)

Renders a full-width group header row inside a table_group/1.

Functions

table_group(assigns)

Renders a <tbody> that logically groups a set of rows.

The group CSS class is applied so descendant selectors (group-hover:*) work for row-level interactions. Wrap multiple groups inside a <.table> to build a categorised table.

Example

<.table_group>
  <.table_group_header label="Q1 2026" count={5} />
  <.table_row :for={r <- @q1_rows}>
    <.table_cell>{r.name}</.table_cell>
  </.table_row>
</.table_group>

Attributes

class (:string) - Additional CSS classes for the <tbody>. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the <tbody> element.

Slots

inner_block (required) - table_group_header/1 followed by table_row/1 children.

table_group_header(assigns)

Renders a full-width group header row inside a table_group/1.

The header uses a subtle bg-muted/30 background, uppercase letter-spacing, and small font to visually distinguish it from data rows without being heavy.

When on_toggle is provided, a chevron button appears on the left. The chevron points right (collapsed) when collapsed={true} and down when collapsed={false}.

Example

<%# Static header with count %>
<.table_group_header label="Active" count={@active_count} />

<%# Collapsible header %>
<.table_group_header
  label="Advanced Settings"
  on_toggle="toggle_group"
  row_id="advanced"
  collapsed={@collapsed_groups["advanced"]}
/>

Attributes

label (:string) (required) - Group label text displayed in the header row.
col_span (:integer) - Number of columns this header spans. Default 100 spans all columns. Defaults to 100.
collapsed (:boolean) - When true, the chevron points right (collapsed). Controlled by LiveView. Defaults to false.
on_toggle (:string) - When set, renders a chevron <button> that fires this event on click. Receives phx-value-id set to row_id.
Defaults to nil.
row_id (:string) - Group identifier sent as phx-value-id when the collapse toggle is clicked. Defaults to nil.
count (:integer) - Optional item count badge displayed to the right of the label. Defaults to nil.
class (:string) - Additional CSS classes for the <tr>. Defaults to nil.