Displayreadycomponentready

Table

Semantic table primitives for captions, column headers, body rows, footers, responsive containers, and app-owned formatting.

Importimport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from 'radcn/table'

Preview

Live package example

Render the upstream invoice table with seven rows, caption, aligned amounts, and a footer total.

Table Demo

Render the upstream invoice table with seven rows, caption, aligned amounts, and a footer total.

Preview

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from 'radcn/table'

const invoices = [
  ['INV001', 'Paid', 'Credit Card', '$250.00'],
  ['INV002', 'Pending', 'PayPal', '$150.00'],
  ['INV003', 'Unpaid', 'Bank Transfer', '$350.00'],
  ['INV004', 'Paid', 'Credit Card', '$450.00'],
  ['INV005', 'Paid', 'PayPal', '$550.00'],
  ['INV006', 'Pending', 'Bank Transfer', '$200.00'],
  ['INV007', 'Unpaid', 'Credit Card', '$300.00'],
] as const

export function TableDemo() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead class="w-[100px]" style="width:100px;">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead class="text-right" style="text-align:right;">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map(([invoice, status, method, amount]) => (
          <TableRow>
            <TableCell class="font-medium" style="font-weight:500;">{invoice}</TableCell>
            <TableCell>{status}</TableCell>
            <TableCell>{method}</TableCell>
            <TableCell class="text-right" style="text-align:right;">{amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell class="text-right" style="text-align:right;">$2,500.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from 'radcn/table'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Table renders native table, caption, thead, tbody, tfoot, tr, th, and td elements so browser table semantics are present in server HTML.
TableHead renders scope="col" for column headers while caption text describes the invoice table.
The named demo keeps the upstream caption, headers, seven invoice rows, and footer total as plain semantic table content.
Native colspan on the footer Total cell preserves the intended footer grouping without React or table-state dependencies.

Customization

Container, table, caption, header, body, footer, row, head, and cell parts expose public data-radcn-table hooks and package classes.
TableHead className="w-[100px]" maps to class plus explicit width:100px style evidence on the Invoice header.
text-right maps to class plus explicit text-align:right style evidence on Amount header, body cells, and footer amount cell.
font-medium maps to class plus explicit font-weight:500 style evidence on invoice id cells.
Existing dense and footer fixtures remain evidence for broader Table modifiability, while DataTable remains a separate composition layer.

Remix 3 Notes

use client and React intrinsic ComponentProps aliases map to explicit Remix UI props and native table elements.
data-slot maps to public data-radcn-table-container, data-radcn-table, data-radcn-table-caption, data-radcn-table-header, data-radcn-table-body, data-radcn-table-footer, data-radcn-table-row, data-radcn-table-head, and data-radcn-table-cell hooks.
className maps to class, cn maps to explicit class composition, and Tailwind utilities map to package CSS, classes, style, CSS variables, and app-owned CSS.
The upstream responsive overflow container maps to RadCN table container markup and overflow styling.
radcn/data-table is related composition evidence, not a substitute for direct plain Table example parity.
Vendor source remains read-only evidence and is not imported by RadCN.