如何在React数据网格中选择所需的输入字段进行筛选

import React, { useState } from 'react';
import { Table, Input, Button } from 'antd';

const { Search } = Input;

const data = [
  { id: 1, name: 'John', age: 28 },
  { id: 2, name: 'Jane', age: 32 },
  { id: 3, name: 'Bob', age: 25 },
  // 更多数据...
];

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: 'Name', dataIndex: 'name', key: 'name', filters: [] },
  { title: 'Age', dataIndex: 'age', key: 'age', filters: [] },
  // 更多列...
];

const FilterableTable = () => {
  const [filteredData, setFilteredData] = useState(data);

  const handleFilterChange = (columnKey, filters) => {
    const filtered = data.filter((record) => {
      return filters.includes(String(record[columnKey]));
    });
    setFilteredData(filtered);
  };

  const handleSearch = (value) => {
    const filtered = data.filter((record) => {
      return record.name.toLowerCase().includes(value.toLowerCase());
    });
    setFilteredData(filtered);
  };

  const handleResetFilters = () => {
    setFilteredData(data);
  };

  return (
    <>
      <div>
        <Search placeholder="Search by name" onSearch={handleSearch} style={{ width: 200 }} />
        <Button onClick={handleResetFilters}>Reset Filters</Button>
      </div>
      <Table
        columns={columns}
        dataSource={filteredData}
        onChange={handleFilterChange}
        rowKey="id"
      />
    </>
  );
};

export default FilterableTable;