Elastic Columns
Columns reallocate real grid width around the selected content while their neighbours remain present.
- grids
- columns
- selection
- reallocation
- responsive
Select a column to change the composition
Usage
usage
import { ElasticColumns } from "@pinky-ui/layouts";
<ElasticColumns columns={sections} defaultActiveId={sections[0].id} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ElasticColumn[] | — | Ordered columns with labels, metadata and content. |
| activeId | string | — | Controlled expanded column id. |
| onActiveIdChange | (id: string) => void | — | Called when a column is hovered, focused or selected. |
Accessibility
- Headers are native buttons with aria-expanded on compact layouts.
- Arrow, Home and End keys change the selected column.
- Content is not made available only through pointer width changes.
Performance
- The parent grid changes one template string; columns do not scale individually.
- Inactive compact content is hidden rather than rendered into a squeezed panel.
Reduced motion
The selected column receives its final width immediately and compact disclosure remains fully usable.
When to use
- Feature comparisons, chapter groups and short sets of related panels.
When not to use
- Strictly equal comparison tables or more than five independent columns.