Components/Table

Table

Composable table primitives — header, body, footer, rows, cells, caption. Everything else (sorting, filtering, pagination, selection, virtualization) is built on top with regular React patterns. The primitives don't impose state; you bring your own.

A list of your recent invoices.
Invoice	Client	Method	Amount
INV-101	Globex Corp	Card	$1,240
INV-102	Initech	Pix	$840
INV-103	Soylent Ltd	Bank	$3,120
INV-104	Umbrella Co.	Card	$210
INV-105	Acme Bank	Bank	$12,480
Total			$17,890

Installation

npx ajaxui add table

Sortable columns

Click a column header to sort ascending; click again to reverse. The active column shows a directional caret; inactive columns show a subtle stacked arrows hint. Pure useState — no library.


INV-101	2026-05-12	Globex Corp	$1,240
INV-102	2026-05-11	Initech	$840
INV-103	2026-05-09	Soylent Ltd	$3,120
INV-104	2026-05-08	Umbrella Co.	$210
INV-105	2026-05-07	Acme Bank	$12,480
INV-106	2026-05-04	Stark Ind.	$5,400
INV-107	2026-05-03	Wonka Co.	$98

Filter + search

Search input over title fields plus a chip-bar status filter. Filters compose — the empty-state row is the only fallback you need.

Invoice	Client	Status	Amount
INV-101	Globex Corp	Paid	$1,240
INV-102	Initech	Pending	$840
INV-103	Soylent Ltd	Overdue	$3,120
INV-104	Umbrella Co.	Paid	$210
INV-105	Acme Bank	Draft	$12,480
INV-106	Stark Ind.	Paid	$5,400
INV-107	Wonka Co.	Pending	$98
INV-108	Wayne Ent.	Overdue	$9,210
INV-109	Pied Piper	Paid	$320
INV-110	Hooli Inc.	Paid	$4,180
INV-111	Massive Dyn.	Pending	$2,640
INV-112	Tyrell Corp	Draft	$6,800

Pagination

Slice your rows by page-size and pair the table with a pagination control. Track the page in local state for client-side data, or fetch per page for server-side.

Invoice	Client	Status	Amount
INV-101	Globex Corp	Paid	$1,240
INV-102	Initech	Pending	$840
INV-103	Soylent Ltd	Overdue	$3,120
INV-104	Umbrella Co.	Paid	$210
INV-105	Acme Bank	Draft	$12,480

Showing 1–5 of 12

Selection + bulk actions

Per-row checkboxes plus a tri-state header (all / some / none) and a contextual action bar that surfaces when anything is selected. Track the selected ids in a Set.

Invoice	Client	Status	Amount
INV-101	Globex Corp	Paid	$1,240
INV-102	Initech	Pending	$840
INV-103	Soylent Ltd	Overdue	$3,120
INV-104	Umbrella Co.	Paid	$210
INV-105	Acme Bank	Draft	$12,480
INV-106	Stark Ind.	Paid	$5,400

Notes

Anatomy

<Table>
  <TableCaption/>      // optional title shown below the table
  <TableHeader>
    <TableRow>
      <TableHead/>     // <th>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell/>     // <td>
    </TableRow>
  </TableBody>
  <TableFooter>       // optional total row
    <TableRow>
      <TableCell/>
    </TableRow>
  </TableFooter>
</Table>

For pre-built sort + pagination + column filters in one component, see Data Table.

Props

Prop	Type	Default	Description
(no props)	—	—	Each sub-component is a styled <table>/<tr>/<td> with className passthrough.
className	string (on every subcomponent)	—	Tailwind classes — merged with the defaults.