Data

Table

A real table: the markup DataTable renders, and all a plain table of figures needs. On a phone it scrolls sideways inside its own box instead of squeezing its columns. With maxHeight it scrolls down there too, and the header stays in view. Numbers go on the right, in tabular figures. No state, so a server page can render it.

view .md

Preview

last five entries
date	item	amount
2026-09-27	coffee	−$4.50
2026-09-27	books	−$62.00
2026-09-26	client invoice	$9,500.00
2026-09-26	rent	−$1,800.00
2026-09-25	groceries	−$123.80
total		+$7,509.70

Installation

terminal

bash

npx @entrepta/cli@latest add table

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

table.tsx

tsx

import {
  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/entrepta/table"

<Table>
  <TableCaption>September</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>item</TableHead>
      <TableHead align="end">amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>rent</TableCell>
      <TableCell align="end"><Amount value={-180000} /></TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Prop	Type	Default	Description
maxHeight	number \| string	-	Past it the table scrolls in its box, the header held at the top (Table)
align	"start" \| "center" \| "end"	"start"	end for numbers (TableHead, TableCell)