Table

素の表プリミティブ。並べ替えや検索が要るなら DataTable を。

<table> 一式にテーマの罫線と余白を付けただけのプリミティブです。並べ替え・検索・ページングが要るなら 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";

対応は素の HTML そのままです — Table は <table>、TableHeader は <thead>、TableHead は <th>、TableCell は <td>。props もネイティブのものが通ります。

数値の列は text-right tabular-nums を付けると桁が揃います。