# `PhiaUi.Components.TableGroup`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/table_group.ex#L1)
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` | `` | Wrapper that groups related rows |
| `table_group_header/1`| `
` | Full-width label row for the group |
## Example
<.table>
<.table_header>
<.table_row>
<.table_head>Name
<.table_head>Status
<.table_group>
<.table_group_header label="Active" count={3} />
<.table_row :for={u <- @active_users}>
<.table_cell>{u.name}
<.table_cell>Active
<.table_group>
<.table_group_header label="Inactive" count={2} />
<.table_row :for={u <- @inactive_users}>
<.table_cell>{u.name}
<.table_cell>Inactive
## 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"]}
/>
# `table_group`
Renders a `
` 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}
## Attributes
* `class` (`:string`) - Additional CSS classes for the ``. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `` element.
## Slots
* `inner_block` (required) - `table_group_header/1` followed by `table_row/1` children.
# `table_group_header`
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 `