Table

Basic

Renders the table structure, headers and rows

Dynamic Data

Renders dynamic data and updates the selection

Widths And Overflow

Applies custom widths and toggles truncation

Empty

Shows the empty state with headers and no data rows

Sorting

Sorts by column ascending, descending and by other columns

With Actions

Opens and uses the row action menu

Scrollable And Sticky

Keeps the header sticky while scrolling

Links

Renders rows as links with descriptions

Drag And Drop

Renders draggable rows in their initial order

Reorders rows with keyboard drag and drop

Allow Text Selection

Toggles text selection behavior

Editable Cell

Edits, saves and cancels editable cells

Opens the editor with an edited value

Dynamic Columns And Rows

Toggles columns and adds rows

Cell Override Table Truncate

Inherits the table truncate default and overrides per cell

Vertical Alignment

Drag Preview

Renders drag previews with first item text and counts

Column Alignment

Inherits column alignment in cells

Footer Totals

Sticky Footer

Keeps the footer sticky while scrolling

Data Entry Grid

Keeps typing and caret movement inside cell fields, and Tab moves in and out of a cell

Data Entry Grid Default Navigation

Defaults to arrow navigation, so an arrow key leaves the field

Data Entry Grid With Selection

Row checkboxes render and toggle

Data Entry Grid With Editable Cell

An always-on input and an editable cell both work in one table

Expandable Rows

Expands and collapses a group row on click

Expands and collapses with the arrow keys

Collapsing a child row moves focus to its group row

Leaf rows render no chevron

Depth is visible, and one level shares one x

Nested rows are banded, rows at the root are not

Tab reaches the row actions, not the chevron

Expandable Rows Dynamic

Renders child rows from data and honours defaultExpandedKeys

Expandable Rows Lazy Children

Expandable Rows With Editable Cell

Edits a cell in a nested row

Sizes the editor to the cell it edits

Keeps the expand control when the tree column is editable

Expandable Rows With Drag And Drop

A group row carries a drag handle, a checkbox and an expand control

The expand control does not make its row taller

Expandable Rows In Panel

The tree column starts at the panel edge padding

Chromatic publishes Storybook to streamline collaboration

Learn more Sign in