Table

import { Table } from 'yarcl';

compactcomfortable

Invoices

Invoice	Customer	Status	Amount
INV-1042	Ada Lovelace	Paid	$1,200.00
INV-1043	Grace Hopper	Pending	$860.50
INV-1044	Alan Turing	Overdue	$45.00
INV-1045	Katherine Johnson	Paid	$13,075.25

<Table density="compact" striped interactive caption="Invoices">
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell>Customer</Table.HeaderCell>
      <Table.HeaderCell align="end">Amount</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Ada Lovelace</Table.Cell>
      <Table.Cell align="end">$1,200.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

• density accepts the keys of your density group.
• align="end" also uses tabular numbers, so amounts line up.
• caption is visible and names the table for screen readers.
• The table scrolls horizontally when it doesn’t fit.

Props

Table

Prop	Type	Default	Description
caption	ReactNode		Visible caption describing the table. Also its accessible name.
density	Densityconfig	config.defaults.density	Cell padding and font size, from the density config.
interactive	boolean		Highlights the row under the pointer. Use when rows are clickable.
striped	boolean		Shades every other row.

Table.Cell and Table.HeaderCell

Prop	Type	Default	Description
align	CellAlign	'start'	Content alignment.