Summary
Update `` to implement the PatternFly v6 Table component (`@patternfly/react-table`).
Data table with sorting, selection, expandable rows, compound expansion, and action columns.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
`` |
Exists |
| cem |
`` |
Exists |
| cockpit |
`` |
Exists |
| chickadee |
-- |
-- |
Sub-components
- `` - Table head
- `` - Table body
- `` - Table row
- `` - Table header cell
- `` - Table data cell
- `` - Table caption
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-table` Table
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Element-specific considerations
- Source package: `@patternfly/react-table`, not `@patternfly/react-core`
- React uses a composable table model - `Th`/`Td` take props for sort, select, expand, actions. Web component approach can instead rely on standard `` semantics with CSS augmentation; avoid re-inventing table semantics
- React `sortBy`, `onSort` on `Th` - emit `sort` event from `pf-v6-th`; parent manages sort state
- Selectable rows: `Td` with `select={{ isSelected, onSelect }}` renders checkbox; manage selection state in parent
- Expandable rows: `Tr isExpanded`, `Td expand` - toggled via `pf-v6-tr expanded` attribute
- Compound expandable: multiple expand cells per row - complex; verify v6 scope
- Sticky header/columns: CSS `position: sticky` with JS-computed offsets - SSR-safe
- `ActionsColumn` in `Td` - floating action menu; integrates with ``
- `Caption` should use native `
` element
- ARIA: native `` semantics; `aria-sort` on sortable `
`; `aria-label` on table
Checklist
Rename
Implementation
Demos
Tests
Reviews
Ship
|
|---|
Summary
Update `` to implement the PatternFly v6 Table component (`@patternfly/react-table`).
Data table with sorting, selection, expandable rows, compound expansion, and action columns.
Prior Art
Sub-components
Requirements
Element-specific considerations
Checklist
Rename
Implementation
Demos
Tests
Reviews
Ship