Table

Sortable, selectable, resizable data grid: Table, TableHeader, Column, TableBody, Row, Cell.

Playground

Set rows to 0 for the empty state. Columns sort and resize.

<Table aria-label="People" selectionMode="multiple">
  <TableHeader>
    <Column isRowHeader allowsSorting>Name</Column>
    <Column allowsSorting>Company</Column>
    <Column>Role</Column>
    <Column>Last touch</Column>
  </TableHeader>
  <TableBody items={people} renderEmptyState={() => "No people yet."}>
    <Row>
      <Cell>{item.name}</Cell>
      <Cell>{item.company}</Cell>
      <Cell>{item.role}</Cell>
      <Cell>{item.touched}</Cell>
    </Row>
  </TableBody>
</Table>

Name	Company	Role	Last touch
Alice Chen	Acme	CTO	2h ago
Ben Ortiz	Globex	Founder	Yesterday
Chloe Park	Initech	Head of Sales	3d ago
Dev Patel	Hooli	PM	Last week