XDSTable: no grouping API and no children-mode column widths — grouped tables need raw <colgroup>/<col> + a custom group-header cell
- Dominant language
- TypeScript
- Stars
- 13k
- Forks
- 1.1k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 690
Description
## Summary
Building a **grouped, collapsible data table** (section headers like *In Progress (6)* / *Todo (12)* that expand/collapse, each spanning all columns) forces a template out of `XDSTable`'s data-driven mode and into **children mode**, where two things have no XDS-component expression:
1. **No ``/column-width API in children mode.** In data-driven mode `XDSTable` resolves column widths and renders the `` for you. In children mode it switches to `table-layout: auto` and renders nothing — so to keep columns aligned you must hand-write a raw `` + `` (using the `resolveColumnWidths` helper):
```tsx
{columns.map(col => (
))}
{/* hand-rendered grouped rows */}
```
2. **No native group/section-header rows.** There's no `XDSTable` API for collapsible group headers, so each group header is a hand-rendered row with a full-width spanning cell, and the group's background/border/padding must be supplied as custom CSS on the cell (no props for a "section header" row).
## Impact on the grading rubric
Under the [Contributing-Templates rubric](https://github.com/facebookexperimental/xds/wiki/Contributing-Templates#template-grading-rubric), the `table-grouped` page template is capped below A by these gaps:
- **Component Purity** can't reach 30/30 — the raw `` + `` are unavoidable (≈25/30).
- **Custom CSS** can't reach 15/15 — the group-header cell's background/divider/padding and the `` width have no prop equivalent (≈5/15).
Every other category is already maxed (Icon 15, Layout 15, Doc 10, Image 5, Code 10). Realistic ceiling ≈ **85 (B)**.
## Proposals (either would unblock 100)
- **A grouping API on `XDSTable`** — e.g. `groupBy` / a `renderGroupHeader` render prop, or a `rows` model that supports `{type: 'group-header', label, count, isExpanded}` rows that span all columns and carry built-in section styling + expand/collapse.
- **A children-mode column-width API** — let children mode accept the resolved `columns` for widths so `XDSTable` emits the `` itself (no raw `` needed).
## Context
Surfaced while grading templates against the Contributing-Templates rubric — companion to #2582 (no `XDSImage`), #2419 (no responsive `XDSGridSpan`), and #2613 (no sticky prop). These are the structural component gaps that keep otherwise-clean templates below a perfect score.
Contributor guide
Assessment
This issue has not been assessed yet.