Rows and columns of data, read across and down. A native <table> in a frame. Specification: docs/components/table.md
Basics
A <div class="canon-table"> around a <table> named by its <caption>: a header row of <th scope="col">, then the rows. Here the caption is visually hidden; the page's heading says the same.
Orders
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Shari Feeney PhD
cecelia_erdman@yahoo.com
$436.68
Waiting
Mrs. Jo Emard
jovany66@hotmail.com
$984.24
Delivered
Caption, row headers and footer
A visible <caption> is the table's title row. The first cell of a row can be its header (<th scope="row">), read with every cell of the row. A <tfoot> holds totals.
Invoices this quarter
Month
Invoices
Paid
Amount
July
42
40
$18,240.00
August
37
37
$15,915.50
September
51
44
$22,780.25
Total
130
121
$56,935.75
Alignment
Cells start-aligned. data-align="end" (or center) on a cell, its header included, lines up numbers. Figures are tabular, so digits line up anyway.
Orders
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Rich content
Cells hold more than text: links, <time>, an Avatar before a name (its fallback aria-hidden, since the name is written beside it), a status Tag. Selecting rows and a row's actions are Data Table's.
On the frame: data-lines="grid" adds lines between columns ("none" drops the ones between rows); data-striped fills every other row; data-hover highlights the row under the pointer; data-frame="none" drops the frame, so the table sits on the page. They combine.
Orders, with column lines
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, striped
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, row under the pointer highlighted
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, without a frame
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, striped without a frame or lines
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Density
data-density on the table or a container: compact rows the button's height, comfortable (the default) 16px taller, spacious 32px taller.
Orders, compact
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, comfortable
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Orders, spacious
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Size
data-size on the table or a container: header rows 32 / 40 / 48, text 12 / 14 / 16px, corners 8 / 12 / 16.
Orders, small
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Orders, medium
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Orders, large
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Wide tables
A table wider than its room scrolls sideways inside its frame. Then the frame is a region named after the table, which the keyboard can reach and scroll. Drag the frame's corner.
Orders
User
Email
Date
Amount
Status
Edwin Mueller
tyrese_nicolas@gmail.com
$495.90
Waiting
Suzanne Jacobi
cindy_murphy41@yahoo.com
$662.02
Ready
Kellie Schoen
troy.lubowitz@gmail.com
$235.71
Cancelled
Edge cases
Long text wraps in its cell; header cells stay on one line, and so does a cell with data-wrap="none" (the Title column here), widening the table if it must. An empty cell stays empty. Right to left, the columns read from the right and "end" is the left.
Title
Note
Words
Kickoff meeting with the design team
Scope agreed for the first release: the contract, the stylesheet and the reference pages, with checks for every component that ships.