Table Demo

3 min read • 504 words

Link copied to clipboard

Plain Wrapped Table

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
The second record, also with a fairly long trailing description.
charlie	widget	The third record. Short.
The third record. Short.
delta	gadget	The fourth record, whose description runs on for a little while.
The fourth record, whose description runs on for a little while.

Wrapped Data Table

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
charlie	widget	The third record. Short.
delta	gadget	The fourth record, whose description runs on for a little while.

Two-Column Wrapped Table

Name	Description
alpha	The first record, with a description long enough to need wrapping.
The first record, with a description long enough to need wrapping.
bravo	The second record, also with a fairly long trailing description.
The second record, also with a fairly long trailing description.

Filter-Only Table

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
charlie	widget	The third record. Short.
delta	gadget	The fourth record, whose description runs on for a little while.

Centered Filter Controls

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
charlie	widget	The third record. Short.
delta	gadget	The fourth record, whose description runs on for a little while.

Filtered, Sortable, Wrapped Data Table

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
charlie	widget	The third record. Short.
delta	gadget	The fourth record, whose description runs on for a little while.

Responsive Filter Controls

Below the main breakpoint the button group is replaced by a dropdown; at wider widths the group renders as usual. Enough categories to outgrow a narrow viewport, which is the case the argument exists for.

Name	Type	Description
alpha	widget	The first record, with a description long enough to need wrapping.
bravo	gadget	The second record, also with a fairly long trailing description.
charlie	doohickey	The third record. Short.
delta	thingamajig	The fourth record, whose description runs on for a little while.
echo	whatsit	The fifth record, added to give every category a row.

Table With Caption

Overview of records
Name	Type	Description
alpha	widget	The first record.
bravo	gadget	The second record.

Table With Caption on Top

Overview of *records*
Name	Type	Description
alpha	widget	The first record.
bravo	gadget	The second record.