Table Demo

5 min read • 857 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.

Wrapped Into Column Groups

Splits each record across three rows below the breakpoint: # and Name stay on the lead row, the four badges fold onto a row of their own, and the description takes the last. Mirrors a catalog table’s shape.

#	Name	Category	Plateau	Status	Role	Description
11	alpha	Database	launch	Shipped	both	The first record, with a description long enough to need wrapping.
12	bravo	Warehouse	plateau-1	Planned	target	The second record, also with a fairly long trailing description.
13	charlie	File	launch	Shipped	source	The third record. Short.
14	delta	Streaming	plateau-2	Planned	source	The fourth record, whose description runs on for a little while.
15	echo	API	plateau-3	Planned	both	The fifth record, added so the stripe pattern is visible.
16	foxtrot	Database	launch	Shipped	target	The sixth record, closing out the sample set.

Column Groups Without a Data Table

The same split on a plain table, which folds server-side with display utilities rather than in the browser. No sorting, paging or searching, so no data table.

#	Name	Category	Plateau	Status	Role	Description
21	golf	Database	launch	Shipped	both	A plain-table record, with a description long enough to wrap.
Database launch Shipped both
A plain-table record, with a description long enough to wrap.
22	hotel	Warehouse	plateau-1	Planned	target	A second plain-table record, also with a trailing description.
Warehouse plateau-1 Planned target
A second plain-table record, also with a trailing description.

Column Groups That No Longer Match

Both tables ask for 2,4 across seven columns — the shape a group list is left in when a column is added and the list is not updated. The list is refused and the table falls back to wrapping the last column only, rather than folding on stale boundaries. The first is a data table, the second a plain one.

#	Name	Category	Plateau	Status	Role	Description
31	india	Database	launch	Shipped	both	A record whose group list is stale.

#	Name	Category	Plateau	Status	Role	Description
32	juliet	Database	launch	Shipped	both	A record whose group list is stale.
A record whose group list is stale.