[備忘録太郎]TanStack

Gemini 生成コードのメモ

import React, { useMemo, useState } from 'react';
import { PanelProps } from '@grafana/data';
import { TableOptions } from '../types';
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  flexRender,
  createColumnHelper,
  SortingState
} from '@tanstack/react-table';
import { useTableData } from '../hooks/useTableData';
import { Icon } from '@grafana/ui';

export const SimplePanel: React.FC<PanelProps<TableOptions>> = ({ data, width, height }) => {
  const tableData = useTableData(data);
  const [sorting, setSorting] = useState<SortingState>([]);

  // TestDataのカラム名に合わせて定義（Time, ValueなどはTestDataのデフォルト）
  const columnHelper = createColumnHelper<any>();
  const columns = useMemo(() => {
    if (tableData.length === 0) return [];
    return Object.keys(tableData[0]).map((key) =>
      columnHelper.accessor(key, {
        header: key,
        cell: (info) => info.getValue(),
      })
    );
  }, [tableData]);

  console.log(tableData)

  const table = useReactTable({
    data: tableData,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),    // 必須事項1: ソート
    getFilteredRowModel: getFilteredRowModel(), // 必須事項2: フィルタ
  });

  return (
    <div style={{ width, height, overflow: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead style={{ background: 'rgba(255, 255, 255, 0.05)', position: 'sticky', top: 0 }}>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  onClick={header.column.getToggleSortingHandler()}
                  style={{ padding: '8px', textAlign: 'left', cursor: 'pointer', borderBottom: '1px solid gray' }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                    {flexRender(header.column.columnDef.header, header.getContext())}
                    {/* ソートアイコンの表示 */}
                    {header.column.getIsSorted() === 'asc' && <Icon name="arrow-up" />}
                    {header.column.getIsSorted() === 'desc' && <Icon name="arrow-down" />}
                  </div>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} style={{ padding: '8px', borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};