Components

data-table exposes the following components:

Table wrapper
Table toolbar area
Table title
Table actions row
Table data wrapper (used to keep the title and actions outside of the table element..maybe)
Header row
Header cell
Header cell sort control
Header cell filter control
Cell
Drag cell
Select cell
Expand cell
Footer row

Composed examples

Example

Cell text styles

Demo

Header	Header right	Header	Header	Header
Content	Cell right, content default	Content muted	Content valid	Content error

Example

Sortable columns

Notes

Sort controls provided as a component, can be passed into header cells. Ideally the sorting would be triggered by clicking on the header title too, but I couldn't figure out a flexible way of doing this and using the <SortControl> component, without locking down the usage technically.

Demo

Header that is longer than the normal	Header label	Header label	Header label
Content	Content	Content	Content

Example

Inline actions

Notes

Recommended method of providing inline actions, but not built into table or technically restricted.

Demo

Header	Header	Header	Actions
Content	Content	Content	Action one Action two

Example

Overflow actions

Notes

Recommended method of providing overflow actions, but not built into table or technically restricted.

Demo

Header	Header	Header	Actions
Content	Content	Content

Example

Filters

Notes

Clicking a filter button opens a popover. Popover contents are controlled by the app.

Demo


Header	Header	Header	Header
Content	Content	Content	Content

Example

Inline Column Filters - idle

Notes

Inline filter controls provided as a component, can be passed into header cells.

Demo

Header	Header	Header	Header
Content	Content	Content	Content

Example

Inline Column Filters - active

Notes

NOTE: this is not correct. The search should display under the header text, there is an example in the design system guidelines. I couldn't figure out a flexible way of doing this.

Demo

Header	Header	Header	Header
Content	Content	Content	Content

Example

Notes

Recommended method of searching a table. Not built in or technically restricted.

Demo


Header	Header	Header	Header
Content	Content	Content	Content

Example

Actions in the toolbar

Notes

Recommended method of displaying table actions. Only a guideline, not technically restricted.

Demo


Header	Header	Header	Header
Content	Content	Content	Content

Example

Draggable rows

Demo

	Header	Header	Header	Header
	Content	Content	Content	Content
	Content	Content	Content	Content

Example

Selectable rows

Notes

Checkbox in header row is a select/deselect all control. Selects or deselects all rows loaded in view.

Demo

	Header	Header	Header	Header
	Content	Content	Content	Content
	Content	Content	Content	Content

Example

Expandable rows

Notes

The arrow icon should be flipped vertically when expanded. Clicking the arrow icon expands/collapses the row. Expanded area is a container that opens under the row (not specified here, unsure how to allow for this?).

Demo

	Header	Header	Header	Header
	Content	Content	Content	Content
	Content	Content	Content	Content

Example

Bordered cells

Notes

Can only be enabled for the entire table, not individual rows

Demo

Header	Header	Header	Header
Content	Content	Content	Content
Content	Content	Content	Content

Example

Footer

Notes

Accepts custom content.

Demo

Header	Header	Header	Header
Content	Content	Content	Content
Footer

Example

Inline editable cells

Notes

Editing actions to be handled by app

Demo

Header	Header	Header	Header
Content	Content	Content	Content

Example

Large cells

Notes

Applies to entire table.

Demo

Header	Header	Header	Header
Content	Content	Content	Content
Content	Content	Content	Content

Example

Empty state, default

Notes

Accepts custom content. Unsure about best way to compose, with an empty <tr>?

Demo