facebook / facebook/astryx

XDSTable: no grouping API and no children-mode column widths — grouped tables need raw <colgroup>/<col> + a custom group-header cell

Open
#2,616 0 comments 0 reactions 1 assignee Claimed by @humbertovirtudes View on GitHub
component enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.