Table

The bare table primitives. For sorting and search, use DataTable.

The <table> family with the theme’s rules and spacing, nothing more. If you need sorting, search or pagination, use DataTable.

export const client = "only";

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@squadbase/vantage/ui";

const rows = [
  { region: "関東", revenue: 640_000 },
  { region: "関西", revenue: 380_000 },
  { region: "九州", revenue: 220_000 },
];

export default function Example() {
  return (
    <Table className="w-[28rem]">
      <TableCaption>2026 年 7 月の地域別売上</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>地域</TableHead>
          <TableHead className="text-right">売上</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.region}>
            <TableCell>{row.region}</TableCell>
            <TableCell className="text-right tabular-nums">
              ¥{row.revenue.toLocaleString("ja-JP")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell>合計</TableCell>
          <TableCell className="text-right tabular-nums">¥1,240,000</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  );
}

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@squadbase/vantage/ui";

The mapping is the plain HTML one — Table is <table>, TableHeader is <thead>, TableHead is <th>, TableCell is <td> — and the native props pass through.

Add text-right tabular-nums to numeric columns so the digits line up.