Table

A data table with a header row, a line between rows and an optional summary row, for orders, invoices and reports.

Basic

Put TableRow elements with TableCell children in a TableHead and a TableBody, and the head cells become column headers.

Columns and data

Pass columns and dataSource to build the rows from records, with render drawing a status as a Tag and a total as a price.

Grouped headers

Give a column children to put a header above them, like a Seats group over used and total.

Cell spans

Return colSpan from a column's onCell to widen a cell, and 0 to hide the one it covers, like an Enterprise row with no price.

Title from data

Pass a function as title to build the heading from the records, here a count of this week's renewals.

Summary from data

Pass summary to add a total row from the records, written with TableRow and TableCell.

Empty

Set locale.emptyText to say what is missing when dataSource has no records.

Four columns

Four short columns still fit a phone, with align set to end on the amounts.

Status tags

A round Tag in a cell shows each order's status.

Progress bars

A Progress in a cell shows how full each project is, and width on the first header sets its column.

Change indicators

A Tag with an arrow-up or arrow-down icon in green or red shows how each metric moved this week.
A Link at the end of each row opens that record.

Images and actions

An Image in its own narrow cell, a name with a second line of muted text, and a Link at the end of each row.

Summary row

Put a total in a TableFoot, which sets its row in strong text under a line.

Striped

Set striped to fill every second body row.

Bordered

Set bordered to frame the table with rounded corners and draw lines between its columns.

Elevated

Set elevated to round the corners and lift the table off the page with a light shadow.

Title

Pass title to put a heading row inside the table's frame.
Pass footer to put a row under the table, inside its frame, here a link to the full list.

Row span

Set rowSpan on a cell to let it cover several rows, like a workspace beside each of its resources.

Size

Set size to large, medium or small to change the cell padding.