Implementation：Claude Code 实战指南

表格组件の要件

数据表格は管理画面やダッシュボードの中心的なUIです。排序、筛选、分页、列のリサイズなど多くの機能が求められます。借助 Claude Code，TanStack Tableをベースに高機能な表格を快速构建可以。

TanStack Table通过基本实现

> TanStack Table使用...的排序・筛选付き表格を作って。
> 类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型安全で、カラム定義を宣言的に書けるようにして。

import {
  useReactTable, getCoreRowModel, getSortedRowModel,
  getFilteredRowModel, getPaginationRowModel,
  flexRender, createColumnHelper, SortingState,
} from '@tanstack/react-table';
import { useState } from 'react';

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
  createdAt: string;
}

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('name', {
    header: '名前',
    cell: (info) => <span className="font-medium">{info.getValue()}</span>,
  }),
  columnHelper.accessor('email', {
    header: 'メールアドレス',
  }),
  columnHelper.accessor('role', {
    header: '権限',
    cell: (info) => (
      <span className={`px-2 py-1 rounded text-xs ${
        info.getValue() === 'admin' ? 'bg-red-100 text-red-700' : 'bg-gray-100'
      }`}>
        {info.getValue()}
      </span>
    ),
  }),
  columnHelper.accessor('createdAt', {
    header: '登録日',
    cell: (info) => new Date(info.getValue()).toLocaleDateString('en-US'),
  }),
];

function DataTable({ data }: { data: User[] }) {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [globalFilter, setGlobalFilter] = useState('');

  const table = useReactTable({
    data,
    columns,
    state: { sorting, globalFilter },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  return (
    <div>
      <input
        value={globalFilter}
        onChange={(e) => setGlobalFilter(e.target.value)}
        placeholder="検索..."
        className="mb-4 px-3 py-2 border rounded w-full max-w-sm"
      />

      <table className="w-full border-collapse" role="grid">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  onClick={header.column.getToggleSortingHandler()}
                  className="px-4 py-3 text-left bg-gray-50 border-b cursor-pointer select-none"
                  aria-sort={header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : 'none'}
                >
                  {flexRender(header.column.columnDef.header, header.getContext())}
                  {{ asc: ' ↑', desc: ' ↓' }[header.column.getIsSorted() as string] ?? ''}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id} className="hover:bg-gray-50">
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="px-4 py-3 border-b">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      <Pagination table={table} />
    </div>
  );
}

分页

function Pagination({ table }: { table: any }) {
  return (
    <div className="flex items-center justify-between mt-4">
      <span className="text-sm text-gray-500">
        全{table.getFilteredRowModel().rows.length}件中{' '}
        {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}〜
        {Math.min(
          (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
          table.getFilteredRowModel().rows.length
        )}件
      </span>
      <div className="flex gap-2">
        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}
          className="px-3 py-1 border rounded disabled:opacity-50">Previous</button>
        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}
          className="px-3 py-1 border rounded disabled:opacity-50">Next</button>
      </div>
    </div>
  );
}

行选择と一括操作

const [rowSelection, setRowSelection] = useState({});

// 表格配置に添加
const table = useReactTable({
  // ...既存の配置
  state: { sorting, globalFilter, rowSelection },
  onRowSelectionChange: setRowSelection,
  enableRowSelection: true,
});

// 一括操作按钮
const selectedCount = Object.keys(rowSelection).length;
{selectedCount > 0 && (
  <div className="mb-4 p-3 bg-blue-50 rounded flex items-center gap-4">
    <span>{selectedCount}件選択中</span>
    <button onClick={() => handleBulkDelete(table.getSelectedRowModel().rows)}>
      一括Delete
    </button>
  </div>
)}

总结

借助 Claude Code，TanStack Tableベースの高機能表格を排序・筛选・分页付きで快速构建可以。数据の可視化は数据可視化の文章を、カレンダー显示はカレンダー组件。

TanStack Table的详细信息请参阅TanStack Table官方文档。