React材料表:一次编辑所有行

import React, { useState } from 'react';
import MaterialTable from 'material-table';

const DataTable = () => {
  const [selectedRows, setSelectedRows] = useState([]);
  const [isEditingAll, setIsEditingAll] = useState(false);

  const handleSelectionChange = (selection) => {
    setSelectedRows(selection.rows);
  };

  const handleEditAll = () => {
    setIsEditingAll(true);
  };

  const handleSaveAll = () => {
    // 处理保存逻辑
    setIsEditingAll(false);
  };

  return (
    <MaterialTable
      title="Editable Table"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: 'Birth Place', field: 'birthCity' },
      ]}
      data={[
        { name: 'John', surname: 'Doe', birthYear: 1987, birthCity: 'Los Angeles' },
        { name: 'Jane', surname: 'Doe', birthYear: 1990, birthCity: 'New York' },
      ]}
      options={{
        selection: true,
      }}
      onSelectionChange={handleSelectionChange}
      actions={[
        {
          icon: 'edit',
          tooltip: 'Edit selected rows',
          onClick: () => handleEditAll(),
        },
        {
          icon: 'save',
          tooltip: 'Save all edits',
          onClick: () => handleSaveAll(),
        },
      ]}
    />
  );
};

export default DataTable;