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

'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 { DataGrid, type GridColDef, type GridRowsProp } from '@mui/x-data-grid';
import { useState } from 'react';

const initialRows: GridRowsProp = [
  { id: 1, name: '田中太郎', department: 'エンジニアリング', role: 'シニアエンジニア', salary: 7500000 },
  { id: 2, name: '佐藤花子', department: 'デザイン', role: 'UIデザイナー', salary: 6000000 },
  { id: 3, name: '鈴木一郎', department: 'エンジニアリング', role: 'テックリード', salary: 9000000 },
  { id: 4, name: '山田次郎', department: 'マーケティング', role: 'マネージャー', salary: 8000000 },
  { id: 5, name: '伊藤三郎', department: 'デザイン', role: 'グラフィックデザイナー', salary: 5500000 },
];

const columns: GridColDef[] = [
  { field: 'name', headerName: '氏名', width: 130, editable: true },
  { field: 'department', headerName: '部署', width: 160, editable: true },
  { field: 'role', headerName: '役職', width: 160, editable: true },
  {
    field: 'salary',
    headerName: '年収',
    width: 130,
    editable: true,
    valueFormatter: (value) => `¥${Number(value).toLocaleString()}`,
  },
];

export function MUIDataGridDemo() {
  const [rows, setRows] = useState(initialRows);

  return (
    <div style={{ height: 350, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSizeOptions={[5, 10]}
        initialState={{ pagination: { paginationModel: { pageSize: 5 } } }}
        processRowUpdate={(newRow) => {
          setRows(rows.map(row => row.id === newRow.id ? newRow : row));
          return newRow;
        }}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </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>
  );
}

"use client";

import { useCallback, useMemo, useState } from "react";
import {
  DataEditor,
  GridCellKind,
  type GridCell,
  type GridColumn,
  type Item,
} from "@glideapps/glide-data-grid";
import "@glideapps/glide-data-grid/dist/index.css";

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

// 他セクションと同じ8名のサンプルデータ
const initialData: Employee[] = [
  { id: 1, name: "田中太郎", department: "エンジニアリング", position: "シニアエンジニア", email: "tanaka@example.com", salary: 7500000, joinDate: "2020-04-01" },
  { id: 2, name: "佐藤花子", department: "デザイン", position: "UIデザイナー", email: "sato@example.com", salary: 6000000, joinDate: "2021-07-15" },
  { id: 3, name: "鈴木一郎", department: "エンジニアリング", position: "テックリード", email: "suzuki@example.com", salary: 9000000, joinDate: "2019-01-10" },
  { id: 4, name: "高橋美咲", department: "マーケティング", position: "マーケター", email: "takahashi@example.com", salary: 5500000, joinDate: "2022-03-20" },
  { id: 5, name: "伊藤健太", department: "エンジニアリング", position: "フロントエンドエンジニア", email: "ito@example.com", salary: 6500000, joinDate: "2021-11-01" },
  { id: 6, name: "渡辺真理", department: "人事", position: "HRマネージャー", email: "watanabe@example.com", salary: 7000000, joinDate: "2018-06-01" },
  { id: 7, name: "山本大輔", department: "デザイン", position: "プロダクトデザイナー", email: "yamamoto@example.com", salary: 6800000, joinDate: "2020-09-15" },
  { id: 8, name: "中村さくら", department: "マーケティング", position: "コンテンツディレクター", email: "nakamura@example.com", salary: 6200000, joinDate: "2022-01-10" },
];

type SortKey = keyof Employee;

const columnDefs: { id: SortKey; title: string; width: number }[] = [
  { id: "id", title: "ID", width: 60 },
  { id: "name", title: "氏名", width: 110 },
  { id: "department", title: "部署", width: 150 },
  { id: "position", title: "役職", width: 190 },
  { id: "email", title: "メール", width: 190 },
  { id: "salary", title: "年収", width: 110 },
  { id: "joinDate", title: "入社日", width: 110 },
];

export default function GlideDataGridDemo() {
  // 列リサイズ結果を保持する（Glide は列幅を制御コンポーネントとして扱う）
  const [colWidths, setColWidths] = useState<Record<string, number>>(() =>
    Object.fromEntries(columnDefs.map((c) => [c.id, c.width]))
  );
  const [sortKey, setSortKey] = useState<SortKey>("id");
  const [sortAsc, setSortAsc] = useState(true);

  const columns = useMemo<GridColumn[]>(
    () =>
      columnDefs.map((c) => ({
        id: c.id,
        title: c.id === sortKey ? `${c.title} ${sortAsc ? "▲" : "▼"}` : c.title,
        width: colWidths[c.id],
      })),
    [colWidths, sortKey, sortAsc]
  );

  const rows = useMemo(() => {
    const sorted = [...initialData].sort((a, b) => {
      const av = a[sortKey];
      const bv = b[sortKey];
      if (typeof av === "number" && typeof bv === "number") return av - bv;
      return String(av).localeCompare(String(bv), "ja");
    });
    return sortAsc ? sorted : sorted.reverse();
  }, [sortKey, sortAsc]);

  // セルの内容は「座標 → セル」の関数で返す（データを配列で渡さないのが Glide の特徴）
  const getCellContent = useCallback(
    ([col, row]: Item): GridCell => {
      const employee = rows[row];
      const field = columnDefs[col].id;
      const value = employee[field];

      if (field === "salary") {
        return {
          kind: GridCellKind.Number,
          data: employee.salary,
          displayData: `¥${employee.salary.toLocaleString()}`,
          allowOverlay: false,
        };
      }

      return {
        kind: GridCellKind.Text,
        data: String(value),
        displayData: String(value),
        allowOverlay: false,
      };
    },
    [rows]
  );

  const onHeaderClicked = useCallback(
    (col: number) => {
      const field = columnDefs[col].id;
      setSortAsc((prev) => (field === sortKey ? !prev : true));
      setSortKey(field);
    },
    [sortKey]
  );

  const onColumnResize = useCallback((column: GridColumn, newSize: number) => {
    if (column.id === undefined) return;
    setColWidths((prev) => ({ ...prev, [column.id as string]: newSize }));
  }, []);

  return (
    <div>
      <p className="text-sm text-gray-600 mb-3">
        列ヘッダーをクリックでソート、列の境界をドラッグで幅を変更できます。
      </p>
      <div style={{ height: 320 }}>
        <DataEditor
          columns={columns}
          rows={rows.length}
          getCellContent={getCellContent}
          onHeaderClicked={onHeaderClicked}
          onColumnResize={onColumnResize}
          rowMarkers="number"
          smoothScrollX
          smoothScrollY
          width="100%"
          height={320}
        />
      </div>
      <p className="text-xs text-gray-500 mt-2">
        描画は canvas 1枚。表示中の行だけを描くため、行数が数万件に増えても DOM ノードは増えません。
      </p>
    </div>
  );
}