在无库的React表(React- table )中使用react钩子进行多重过滤

import React, { useState } from 'react';
import ReactTable from 'react-table';
import 'react-table/react-table.css';

const MyTable = () => {
  const [data, setData] = useState([]); // 表格数据
  const [filteredData, setFilteredData] = useState([]); // 过滤后的数据

  const columns = [
    {
      Header: '姓名',
      accessor: 'name',
    },
    {
      Header: '年龄',
      accessor: 'age',
    },
    // 其他列配置...
  ];

  // 处理过滤逻辑
  const handleFilter = (filter) => {
    // 根据过滤条件对数据进行过滤
    const filtered = data.filter((row) => {
      // 根据需要的过滤条件进行判断
      return row.name.includes(filter.name) && row.age >= filter.minAge;
    });

    setFilteredData(filtered);
  };

  return (
    <div>
      {/* 过滤条件输入框 */}
      <input
        type="text"
        placeholder="姓名"
        onChange={(e) => handleFilter({ name: e.target.value })}
      />
      <input
        type="number"
        placeholder="最小年龄"
        onChange={(e) => handleFilter({ minAge: parseInt(e.target.value) })}
      />

      {/* 表格组件 */}
      <ReactTable
        data={filteredData.length > 0 ? filteredData : data}
        columns={columns}
      />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>无库的React表格多重过滤示例</h1>
      <MyTable />
    </div>
  );
};