Table

Live demo

Invoices
Customer	Plan	Amount	Status
Northwind	Team	$1,240.00	Paid
Acme Labs	Business	$4,800.00	Overdue
Initech	Starter	$240.00	Draft

How to use it

Data tables for B2B screens: quiet headers, hairline rows, right-aligned tabular numbers.

Provide columns (key, label, align: 'end' for numbers, numeric for tabular meta face, muted, render) and rows.
framed (default) wraps it in a surface card; set framed={false} when it already sits inside a card.
Always give a caption for screen readers.

Do: right-align amounts, put status in a Badge. Don't: zebra stripes, vertical borders, centered numbers.

In every theme

Follows the mode picked in the header.

Graphite

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Glass

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Paper

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Mineral

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Enamel

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Ember

Invoices
Customer	Amount	Status
Northwind	$1,240.00	Paid
Acme Labs	$4,800.00	Overdue

Code

React

import { Badge, Table } from 'enma/react';

<Table
  caption="Invoices"
  rowKey="id"
  columns={[
    { key: 'customer', label: 'Customer' },
    { key: 'plan', label: 'Plan', muted: true },
    { key: 'amount', label: 'Amount', align: 'end', numeric: true },
    { key: 'status', label: 'Status', render: (row) => <Badge tone={row.tone}>{row.status}</Badge> },
  ]}
  rows={invoices}
/>

Plain HTML

<div class="e-table-wrap e-sq"><table class="e-table">
  <caption class="e-visually-hidden">Invoices</caption>
  <thead><tr><th scope="col">Customer</th><th scope="col" class="is-end">Amount</th></tr></thead>
  <tbody><tr><td>Northwind</td><td class="is-end is-num">$1,240.00</td></tr></tbody>
</table></div>

Props

`TableProps`

Props of TableProps
Prop	Type	Default	Description
`columns` required	TableColumn<R>[]
`rows` required	R[]
`rowKey`	string
`caption`	string
`framed`	boolean	true	Draw the surface, border and shadow around the table. Default true.
`className`	string
`style`	React.CSSProperties

`TableColumn`

Props of TableColumn
Prop	Type	Default	Description
`key` required	string
`label` required	React.ReactNode
`align`	'start' \| 'end'
`numeric`	boolean
`muted`	boolean
`render`	(row: R) => React.ReactNode