Data Table

Displays records in rows, with one column per field. Supports sortable headers, row selection and right-aligned numbers.

Contract

Status

Noah Reednoah@orbitlabs.io

Orbit LabsCompany

Product designerFull time

Contract.pdf240 KB

Active

Cara Brookcara@northwind.co

NorthwindCompany

Engineering leadFull time

Contract.pdf240 KB

Active

Ryan Millsryan@halcyon.dev

HalcyonCompany

ResearcherFull time

Contract.pdf240 KB

Inactive

Khadija Alaakhadija@lumen.app

LumenCompany

Design opsFull time

Contract.pdf240 KB

Active

Liam Hawkliam@fieldnote.so

FieldnoteCompany

Frontend engineerFull time

Contract.pdf240 KB

Inactive

import { Table, TableRow, TableHeaderCell, TableCell } from '@orvain/react';
 
<Table aria-label="Team members">
  <TableRow header>
    <TableHeaderCell label="Name" />
    <TableHeaderCell label="Role" />
  </TableRow>
  <TableRow>
    <TableCell title="Ada Lovelace" description="ada@example.com" />
    <TableCell title="Engineer" />
  </TableRow>
  <TableRow>
    <TableCell title="Alan Turing" description="alan@example.com" />
    <TableCell title="Researcher" />
  </TableRow>
</Table>

Add an Orvain Data Table of 5 members, X-Large (64) rows, with columns Members, Company, Role, Contract and Status and a more button on each row: • a toolbar with “All”, “Active” and “Inactive” tabs, a “Search...” field, Filter and Settings • each member with a checkbox, photo, name and email; “Cara Brook” selected • each contract a “Contract.pdf” file chip, each status an Active or Inactive badge

Orvain MCPIncluded with the library

When to use#

For records with the same fields that people compare, such as invoices, members or orders.
When people act on several rows at once through selection.

When not to use

Use a List for a few items with one or two fields.

Anatomy#

1Toolbar

All / Active / Inactive tabs, a 300px search field, Filter and Settings.

2Header row

38px on a 4% tint, rounded 8px. Satoshi 14 in #6d6d6d, with a select-all box and sort arrows.

3Row cells

64px (X-Large) with a description line, or 48px (Large). 12px left, 20px right, a #f2f2f2 rule below.

4Leading

A checkbox, avatar (40 or 32), logo or file chip before the title.

5Widget cells

A status badge, a more button, a switch, a rating, a progress bar or avatars.

States#

Default

White rows.

Hover

A 4% wash across the row.

Selected

The checkbox fills brand blue and the row takes a brand tint (Figma draws no selected row).

Sorted

The header shows the direction and is announced through aria-sort.

Passive

Secondary cells set their title in #6d6d6d.

Source#

Preview – final code pending

The Data Table is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

tables pagination filters