ReactDataGrid

import { useState } from 'react'
import ReactDataGrid, {
  SelectColumn,
  textEditor
} from 'react-data-grid';
import 'react-data-grid/lib/styles.css';
// import type { Column, CopyEvent, FillEvent, PasteEvent } from 'react-data-grid';
function rowKeyGetter(row) {
  return row.id;
}
const columns = [
  SelectColumn,
  { key: "id", name: "ID", editable: true },
  {
    key: "title",
    name: "名称",
    resizable: true,
    // frozen: true,
    // 编辑单元格 textEditor { row, column, onRowChange, onClose }
    renderEditCell: textEditor
  },
  {
    key: "complete",
    name: "Complete",
    renderEditCell: textEditor,
    width: 'max-content',
  }
];
const initialRows = [
  { id: 0, title: "Task 1", complete: 340 },
  { id: 1, title: "List 2", complete: 40 },
  { id: 2, title: "Card 3", complete: 60 }
];
function GridTable() {
  const [rows, setRows] = useState(initialRows);
  const [selectedRows, setSelectedRows] = useState((): ReadonlySet<string> => new Set());
  return (
    <ReactDataGrid
      columns={columns}
      rows={rows}
      rowKeyGetter={rowKeyGetter}
      selectedRows={selectedRows}
      onSelectedRowsChange={setSelectedRows}
      onRowsChange={setRows}
      onCellClick={(row, data) => console.log({ row, data })}
      // 缩放 column { resizable: true }
      onColumnResize={(idx, width) =>
        console.log(`Column ${idx} has been resized to ${width}`)
      }
    />
  );
}
export default GridTable