DataTable

TanStack Table ベースの表。並べ替え・検索・ページング・選択。

並べ替え・検索・ページング・行選択・列の表示切り替えを備えた表です。中身は TanStack Table で、 列定義は TanStack の ColumnDef そのものです。ひととおり揃った形が欲しいだけなら DataTablePreset の 1 コンポーネントで済みます。

export const client = "only";

import { DataTablePreset } from "@squadbase/vantage/components";
import type { ColumnDef } from "@squadbase/vantage/components";
import { StatusBadge } from "@squadbase/vantage/components";

interface Row {
  customer: string;
  region: string;
  revenue: number;
  status: string;
}

const columns: ColumnDef<Row>[] = [
  { accessorKey: "customer", header: "顧客" },
  { accessorKey: "region", header: "地域" },
  {
    accessorKey: "revenue",
    header: "売上",
    cell: ({ row }) => (
      <span className="tabular-nums">
        ¥{row.original.revenue.toLocaleString("ja-JP")}
      </span>
    ),
  },
  {
    accessorKey: "status",
    header: "状態",
    cell: ({ row }) => <StatusBadge status={row.original.status} />,
  },
];

const data: Row[] = [
  { customer: "Acme 株式会社", region: "関東", revenue: 412_000, status: "active" },
  { customer: "Globex", region: "関西", revenue: 288_000, status: "pending" },
  { customer: "Initech", region: "九州", revenue: 150_400, status: "inactive" },
  { customer: "Umbrella", region: "関東", revenue: 96_800, status: "error" },
];

export default function Example() {
  return (
    <div className="w-[42rem]">
      <DataTablePreset columns={columns} data={data} enableColumnVisibility />
    </div>
  );
}

import {
  DataTable,
  DataTableToolbar,
  DataTableContent,
  DataTablePagination,
  DataTableColumnVisibility,
  DataTablePreset,
  useDataTable,
} from "@squadbase/vantage/components";
import type { ColumnDef, SortingState, PaginationState } from "@squadbase/vantage/components";

DataTablePreset

まずこれを試してください。ツールバー・本体・ページャを既定の並びで組み上げます。

sorting / columnFilters / globalFilter / pagination / rowSelection / columnVisibility は、対応する on…Change と一緒に渡せば制御コンポーネントになります。渡さな ければ内部で状態を持ちます。

自分で組む

配置を変えたいときはパーツを直接使います。状態は DataTable が持ち、子のパーツが読みます。

<DataTable columns={columns} data={data} enableSorting enableFiltering>
  <DataTableToolbar showSearch toolbar={<FilterBarPreset … />} />
  <DataTableContent />
  <DataTablePagination pageSizeOptions={[10, 25, 50]} />
</DataTable>

useDataTable() を使うと、子コンポーネントから TanStack の table インスタンスを直接触れます。

サーバー側でページングする

pagination と onPaginationChange を自分で持ち、pageCount に総ページ数を渡します。

const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });

const { data } = useQuery({
  queryKey: ["sales", pagination],
  queryFn: () => apiFetch(`/api/sales?page=${pagination.pageIndex}`).then((r) => r.json()),
});

<DataTablePreset
  columns={columns}
  data={data.rows}
  pagination={pagination}
  onPaginationChange={setPagination}
  pageCount={data.pageCount}
/>;

ソースを編集したいとき

DataTable だけは編集可能なソースをコピーできます。

vantage add ui data-table