Table

A composable table component for displaying structured tabular data.

Import

tsx

import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@tac-ui/native';

Basic

A minimal table using TableHeader, TableBody, TableRow, TableHead, and TableCell. Rows gain a hover highlight by default.

Name

Role

Alice Martin

Engineer

[email protected]

Bob Chen

Designer

[email protected]

Carol White

Product

[email protected]

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice Martin</TableCell>
      <TableCell>Engineer</TableCell>
      <TableCell>[email protected]</TableCell>
    </TableRow>
    {/* ...more rows */}
  </TableBody>
</Table>

Invoice Example

A complete table with header, body, footer for totals, and a caption — demonstrating all subcomponents together.

Recent invoices — Q1 2025

Invoice

Client

Status

Amount

INV-001

Acme Corp

Paid

$1,250.00

INV-002

Globex Inc

Pending

$850.00

INV-003

Initech

Failed

$3,400.00

Total

$8,220.00

tsx

<Table>
  <TableCaption>Recent invoices — Q1 2025</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Client</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Acme Corp</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>$1,250.00</TableCell>
    </TableRow>
    {/* ...more rows */}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell></TableCell>
      <TableCell></TableCell>
      <TableCell>$8,220.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

With Caption

TableCaption renders an accessible caption below the table, useful for labeling the data context.

Team members — Engineering

Name

Role

Alice Martin

Engineer

Bob Chen

Designer

tsx

<Table>
  <TableCaption>Team members — Engineering</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice Martin</TableCell>
      <TableCell>Engineer</TableCell>
    </TableRow>
  </TableBody>
</Table>

Selected Rows

Use the selected prop on TableRow to highlight specific rows.

Name

Alice Martin

[email protected]

Bob Chen

[email protected]

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow selected>
      <TableCell>Alice Martin</TableCell>
      <TableCell>[email protected]</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Bob Chen</TableCell>
      <TableCell>[email protected]</TableCell>
    </TableRow>
  </TableBody>
</Table>

API Reference

All subcomponents accept standard React Native ViewProps and forward their ref to the underlying View.

Prop	Type	Default	Description
Table	ScrollView wrapper	-	Root table element wrapped in a horizontally-scrollable container.
TableHeader	View	-	Header section with muted background and border-bottom.
TableBody	View	-	Body section containing data rows.
TableFooter	View	-	Footer section with muted background and top border for totals or summaries.
TableRow	View	-	A single row. Accepts selected prop for highlight styling.
TableHead	View	-	Header cell with muted foreground text and medium font weight. Accepts width prop.
TableCell	View	-	Data cell with standard padding. Accepts width prop.
TableCaption	View	-	Caption text rendered below the table in muted foreground.