Data grouping

Group table data by any column to organize and visualize hierarchical relationships:

// Enable grouping programmatically
state.groupBy = PersonField.Department

// Or let users group via header dropdown menu
// (automatically available for all columns)

Customize group header appearance and content:

Note

Icons.Default.Group comes from your own icon dependency — the table no longer ships one. Substitute any ImageVector you like.

column(PersonField.Department, valueOf = { it.department }) {
    header("Department")
    cell { person, _ -> Text(person.department) }

    // Custom group header renderer
    groupHeader { groupValue ->
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.padding(8.dp)
        ) {
            Icon(Icons.Default.Group, contentDescription = null)
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = "Department: $groupValue",
                style = MaterialTheme.typography.titleMedium,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

Grouping and row blocks describe two different structures over one list and do not compose: while groupBy is active, rowBlocks is suppressed and row drag is disabled. The column menu's group-by item is disabled while the table derives at least one block, and TableState.rowBlocksSuppressedByGroupBy reports the conflict when it happens programmatically.

Group headers are sticky and remain visible during scrolling. Configure group content alignment via table settings:

val state = rememberTableState(
    columns = columns.map { it.key },
    settings = TableSettings(
        groupContentAlignment = Alignment.CenterStart,
        // ... other settings
    )
)