Warren UI

Table

Mono table primitives with hairline rows.

LATEST RUNS
RUNSTATUSLATENCY
RUN-0427RUNNING212MS
RUN-0426PASS187MS
RUN-0425FAIL421MS
RUN-0424PASS198MS
Source
"use client"

import { Badge } from "@/registry/warren/badge/badge"
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/registry/warren/table/table"

export default function TableDemo() {
  return (
    <Table>
      <TableCaption>LATEST RUNS</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>RUN</TableHead>
          <TableHead>STATUS</TableHead>
          <TableHead>LATENCY</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>RUN-0427</TableCell>
          <TableCell>
            <Badge variant="live" dot>
              RUNNING
            </Badge>
          </TableCell>
          <TableCell>212MS</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>RUN-0426</TableCell>
          <TableCell className="text-success-text">PASS</TableCell>
          <TableCell>187MS</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>RUN-0425</TableCell>
          <TableCell className="text-danger-text">FAIL</TableCell>
          <TableCell>421MS</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>RUN-0424</TableCell>
          <TableCell className="text-success-text">PASS</TableCell>
          <TableCell>198MS</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/table.json

Usage

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "@/components/ui/table"
<Table>
  <TableCaption>LATEST RUNS</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>RUN</TableHead>
      <TableHead>STATUS</TableHead>
      <TableHead>LATENCY</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>RUN-0427</TableCell>
      <TableCell>212MS</TableCell>
    </TableRow>
  </TableBody>
</Table>

Structure

Seven primitives compose into a full table. Table is the w-full mono <table> with collapsed borders. Pass bordered to wrap it in the standard 2px ink frame (border-2 border-border); without it the table is borderless and relies on the row hairlines (drop it inside a Panel for a framed readout). TableHeader sets the 10px uppercase muted labels under a 2px border, TableBody groups the data rows, and TableRow draws the hairline under each row. TableHead and TableCell pad their cells; TableCaption adds a 10px uppercase caption above the table.

Rows

Every TableRow ends in a 1px hairline (border-b border-border); only the header row is thicker at 2px. Rows carry no background of their own, so the table stays quiet — signal color comes entirely from what you put inside the cells.

Cells

TableHead is left-aligned, uppercase and text-muted-foreground; TableCell is plain foreground mono. Both pad px-2 py-1.5 — dense enough for run logs, wide enough to scan. Drop a Badge into a cell for live status, or use the text-grade tokens (text-success-text, text-danger-text, …) for signal values.

API Reference

Seven primitives compose into a full table. Only Table carries a custom prop (bordered); the other six forward every attribute of their underlying native element, with className merging via cn().

ExportRendersPurpose
Table<table>w-full mono container; bordered adds the 2px ink frame
TableHeader<thead>10px uppercase muted labels, 2px bottom border
TableBody<tbody>Data row group
TableRow<tr>Hairline-separated row (border-b border-border)
TableHead<th>Left-aligned uppercase header cell, px-2 py-1.5
TableCell<td>Mono tabular data cell, px-2 py-1.5
TableCaption<caption>10px uppercase caption above the table

Prop

Type

On this page

InstallationUsageStructureRowsCellsAPI Reference