从Reactable表中删除check all/none复选框

import React, { useState } from 'react';

const Reactable = () => {
  const [selectAll, setSelectAll] = useState(false);
  const [data, setData] = useState([
    { id: 1, name: 'John', selected: false },
    { id: 2, name: 'Jane', selected: false },
    { id: 3, name: 'Bob', selected: false },
  ]);

  const handleSelectAll = () => {
    const updatedData = data.map(item => ({ ...item, selected: !selectAll }));
    setData(updatedData);
    setSelectAll(!selectAll);
  };

  const handleSelectRow = (id) => {
    const updatedData = data.map(item => {
      if (item.id === id) {
        return { ...item, selected: !item.selected };
      }
      return item;
    });
    setData(updatedData);
  };

  const handleDeleteSelected = () => {
    const updatedData = data.filter(item => !item.selected);
    setData(updatedData);
  };

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" checked={selectAll} onChange={handleSelectAll} />
            </th>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => (
            <tr key={item.id}>
              <td>
                <input type="checkbox" checked={item.selected} onChange={() => handleSelectRow(item.id)} />
              </td>
              <td>{item.id}</td>
              <td>{item.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button onClick={handleDeleteSelected}>Delete Selected</button>
    </div>
  );
};

export default Reactable;