データグリッドライブラリ比較

'use client';
import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule, ModuleRegistry, type ColDef } from 'ag-grid-community';
import { useState, useMemo } from 'react';

ModuleRegistry.registerModules([AllCommunityModule]);

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
}

const rowData: Employee[] = [
  { id: 1, name: '田中太郎', department: 'エンジニアリング', salary: 7500000 },
  { id: 2, name: '佐藤花子', department: 'デザイン', salary: 6000000 },
  { id: 3, name: '鈴木一郎', department: 'マーケティング', salary: 5500000 },
];

export function AgGridDemo() {
  const columnDefs = useMemo<ColDef<Employee>[]>(() => [
    { field: 'id', headerName: 'ID', width: 80 },
    { field: 'name', headerName: '氏名', editable: true },
    { field: 'department', headerName: '部署', editable: true },
    {
      field: 'salary',
      headerName: '年収',
      editable: true,
      valueFormatter: p => `¥${p.value.toLocaleString()}`,
    },
  ], []);

  const defaultColDef = useMemo(() => ({
    sortable: true,
    filter: true,
    resizable: true,
  }), []);

  return (
    <div className="ag-theme-alpine" style={{ height: 300, width: '100%' }}>
      <AgGridReact rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} />
    </div>
  );
}

'use client';
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  type ColumnDef,
} from '@tanstack/react-table';
import { useMemo } from 'react';

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
}

const data: Employee[] = [
  { id: 1, name: '田中太郎', department: 'エンジニアリング', salary: 7500000 },
  { id: 2, name: '佐藤花子', department: 'デザイン', salary: 6000000 },
  { id: 3, name: '鈴木一郎', department: 'マーケティング', salary: 5500000 },
];

export function TanStackTableDemo() {
  const columns = useMemo<ColumnDef<Employee>[]>(() => [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: '氏名' },
    { accessorKey: 'department', header: '部署' },
    {
      accessorKey: 'salary',
      header: '年収',
      cell: info => `¥${info.getValue<number>().toLocaleString()}`,
    },
  ], []);

  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });

  return (
    <div className="overflow-x-auto border border-gray-200 rounded-lg">
      <table className="w-full text-sm">
        <thead>
          {table.getHeaderGroups().map(hg => (
            <tr key={hg.id} className="bg-gray-100 border-b border-gray-200">
              {hg.headers.map(h => (
                <th key={h.id} className="text-left px-3 py-2.5 font-semibold text-gray-700">
                  {flexRender(h.column.columnDef.header, h.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id} className="border-b border-gray-100 hover:bg-blue-50">
              {row.getVisibleCells().map(cell => (
                <td key={cell.id} className="px-3 py-2">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

'use client';
import { useState, useMemo } from 'react';

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
}

const initialData: Employee[] = [
  { id: 1, name: '田中太郎', department: 'エンジニアリング', salary: 7500000 },
  { id: 2, name: '佐藤花子', department: 'デザイン', salary: 6000000 },
  { id: 3, name: '鈴木一郎', department: 'マーケティング', salary: 5500000 },
];

export function CustomGridDemo() {
  const [data, setData] = useState(initialData);
  const [sortField, setSortField] = useState<keyof Employee | null>(null);
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc');

  const sorted = useMemo(() => {
    if (!sortField) return data;
    return [...data].sort((a, b) => {
      const av = a[sortField], bv = b[sortField];
      if (typeof av === 'number' && typeof bv === 'number') return sortDir === 'asc' ? av - bv : bv - av;
      return sortDir === 'asc' ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
    });
  }, [data, sortField, sortDir]);

  const handleSort = (field: keyof Employee) => {
    if (sortField === field) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSortField(field); setSortDir('asc'); }
  };

  return (
    <div className="overflow-x-auto border border-gray-200 rounded-lg">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-slate-700 text-white">
            {(['id', 'name', 'department', 'salary'] as (keyof Employee)[]).map(key => (
              <th
                key={key}
                className="text-left px-3 py-2.5 font-semibold cursor-pointer hover:bg-white/10"
                onClick={() => handleSort(key)}
              >
                {key} {sortField === key ? (sortDir === 'asc' ? '▲' : '▼') : ''}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {sorted.map((row, i) => (
            <tr key={row.id} className={`border-b border-gray-100 ${i % 2 === 0 ? 'bg-white' : 'bg-gray-50'}`}>
              <td className="px-3 py-2">{row.id}</td>
              <td className="px-3 py-2">{row.name}</td>
              <td className="px-3 py-2">{row.department}</td>
              <td className="px-3 py-2">¥{row.salary.toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}