Table

Table is the styled root element of Officina's low-level table primitives — it renders a real HTML <table> with sensible borders, typography, and spacing. Compose it by hand with TableHeader, TableBody, TableRow, TableHead, and TableCell when you want full control over markup and have a small, static dataset. For sorting, filtering, pagination, or large data, reach for DataTable or DataGrid instead. Every part forwards its ref and accepts the standard attributes of the underlying element.

Example

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@officina/ui';

function InvoicesTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>#1024</TableCell>
          <TableCell>$250.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

API

Table

The styled <table> root.

Table is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableHeader

The <thead> section; wraps the header TableRow with a bottom border.

TableHeader is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableBody

The <tbody> section; holds the data TableRows with dividers between them.

TableBody is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableFooter

The <tfoot> section — a muted, bold-topped row for totals or summaries.

TableFooter is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableRow

A <tr> with a hover highlight; wraps TableHead or TableCell cells.

TableRow is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableHead

A <th> column-header cell, styled as small uppercase muted text.

TableHead is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableCell

A <td> data cell with consistent padding and vertical alignment.

TableCell is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

TableCaption

The <caption> — a small muted label rendered below the table for context.

TableCaption is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.