This section is intended as a reference for specific use cases of components, or compositions of them, that are not covered in the component's default examples.



A standard table.


A table may be formatted to emphasize a first column that defines a row content.


A table can be formatted to display complex structured data.


Positive / Negative

A cell or row may let a user know whether a value is good or bad.


A cell or row may call attention to an error or a negative value.


A cell or row may warn a user.

You can do the same using shorthands.


A cell or row can be active or selected by a user.


A cell can be disabled.


Single Line

A table can specify that its cell contents should remain on a single line, and not wrap.


A table can be attached to other content on a page.


A table can use fixed a special faster form of table rendering that does not resize table cells based on content.

Fixed single line tables will automatically ensure content that does not fit in a single line will receive "..." ellipsis.


A table can specify how it stacks table content responsively.

Selectable Row

A table can have its rows appear selectable.

Selectable Cell

A table cell can be selectable.

Using an a link inside a selectable cell will automatically make the hit box the entire cell area. By default links will inherit their cell color.

Vertical Alignment

A table, header, row or cell can adjust its vertical alignment.

Text Alignment

A table, header, row, or cell can adjust its text alignment.


A table can stripe alternate rows of content with a darker color to increase contrast.


A table may be divided each row into separate cells.


A table can reduce its complexity to increase readability.

Collapsing Cell

A cell can be collapsing so that it only uses as much space as required.

Column Count

A table can specify its column count to divide its content evenly.

Column Width

A table can specify the width of individual columns independently.


A table can be collapsing, taking up only as much space as its rows.


A table can be given a color to distinguish it from other table.


A table's colors can be inverted.


A table can appear to sort its data by column in ascending or descending order.

Full-Width Header / Footer

A definition table can have a full width header or footer, filling in the gap left by the first column.


A table may sometimes need to be more padded for legibility.


A table may sometimes need to be more compact to make more rows visible at a time.


A table can also be small or large.

This is the bottom