Edgecom Design System

Table

A styled HTML table for tabular data.

Header, body rows, a caption, and right-aligned numeric cells.

Consumption by site — last billing period.
Site	Commodity	Usage	Cost
Toronto Distribution Center	Electricity	1,284 MWh	$182,940
Hamilton Manufacturing Plant	Gas	94,500 m³	$61,220
Mississauga Cold Storage	Electricity	612 MWh	$88,010
Ottawa Head Office	Water	3,410 m³	$9,740

The `density="compact"` prop tightens row padding for dense, text-heavy datasets.

Consumption by site — compact density for dense datasets.
Site	Commodity	Usage	Cost
Toronto Distribution Center	Electricity	1,284 MWh	$182,940
Hamilton Manufacturing Plant	Gas	94,500 m³	$61,220
Mississauga Cold Storage	Electricity	612 MWh	$88,010
Ottawa Head Office	Water	3,410 m³	$9,740
London Logistics Hub	Electricity	744 MWh	$102,530
Windsor Assembly	Gas	51,200 m³	$33,180

A styled HTML table wrapped for horizontal overflow — header, body, optional footer, rows, cells, and a caption.

Anatomy

`Table`	Root table, wrapped in an overflow-x container.
`TableHeader`	The thead grouping header rows.
`TableBody`	The tbody grouping data rows.
`TableFooter`	Optional tfoot for totals or summaries.
`TableHead`	A header cell (th).
`TableRow`	A single row with hover and selected states.
`TableCell`	A data cell (td).
`TableCaption`	A caption describing the table.