向React-Table中的标头添加HTML输入控件

import React from "react";
import { useTable, useSortBy, useTableState } from "react-table";

const columns = [
  {
    Header: "Name",
    accessor: "name",
    // 使用自定义的React组件作为表头
    HeaderCell: () => <input type="text" />,
  },
  {
    Header: "Age",
    accessor: "age",
  },
  {
    Header: "Email",
    accessor: "email",
  },
];

const data = [
  { name: "John Doe", age: 25, email: "john.doe@example.com" },
  { name: "Jane Smith", age: 30, email: "jane.smith@example.com" },
  // 更多数据...
];

const ReactTableWithCustomHeader = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSortBy, useTableState);

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                {/* 使用自定义的表头组件 */}
                <column.HeaderCell />
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default ReactTableWithCustomHeader;