Table v0.1.0 Data display

Composable data table: Root (scroll container), Header, Body, Row, Head, Cell, Caption.

import { Table } from "latticeui-react";

Examples

Striped and hoverable

Service	Region	Latency	Status
api-server	us-east-1	23 ms	Healthy
worker-pool	eu-west-2	41 ms	Degraded
cdn-edge	ap-south-1	—	Down

Show code

<Table.Root striped hoverable>
  <Table.Header>
    <Table.Row>
      <Table.Head>Service</Table.Head>
      <Table.Head>Region</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>api-server</Table.Cell>
      <Table.Cell>us-east-1</Table.Cell>
      <Table.Cell><Badge tone="success">Healthy</Badge></Table.Cell>
    </Table.Row>
    ...
  </Table.Body>
</Table.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="table"][data-part="root"]`
`table`	`table`	`[data-scope="table"][data-part="table"]`
`caption`	`caption`	`[data-scope="table"][data-part="caption"]`
`header`	`thead`	`[data-scope="table"][data-part="header"]`
`body`	`tbody`	`[data-scope="table"][data-part="body"]`
`row`	`tr`	`[data-scope="table"][data-part="row"]`
`head`	`th`	`[data-scope="table"][data-part="head"]`
`cell`	`td`	`[data-scope="table"][data-part="cell"]`

Props

Prop	Type	Default	Description
`Root.striped`	`boolean`	—
`Root.hoverable`	`boolean`	—

Accessibility

Roles: table (native semantics)

Root is a scroll container so wide tables overflow gracefully.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="table"][data-part="cell"] {
  /* your overrides */
}

State attributes: data-stripeddata-hoverable