DataTable

The TanStack Table–backed table: sorting, search, pagination, selection.

A table with sorting, search, pagination, row selection and column visibility. TanStack Table sits underneath, and the column definitions are TanStack’s own ColumnDef. If you just want the whole thing, DataTablePreset is a single component.

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

Start here. It assembles the toolbar, the table and the pager in the usual order.

Pass sorting / columnFilters / globalFilter / pagination / rowSelection / columnVisibility together with their on…Change and the table becomes controlled. Omit them and it keeps the state internally.

Composing it yourself

Use the parts directly for a different arrangement. DataTable owns the state and the children read it.

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

useDataTable() gives a child component the TanStack table instance directly.

Paginating on the server

Own pagination and onPaginationChange, and pass the total in 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}
/>;

When you want to edit the source

DataTable is one of the two components with a copyable source.

vantage add ui data-table