React Material Table搜索时如何获取过滤后的数据？

要在前端处理搜索过滤并直接获取过滤后的数据集，你可以通过手动维护搜索状态+自行实现过滤逻辑的方式来实现，不用依赖组件内部的黑盒处理，具体方案如下：

实现步骤 #

1. 分别维护原始数据状态和搜索词状态
2. 基于搜索词对原始数据进行过滤，生成过滤后的数据集
3. 将过滤后的数据集传给Material Table的data属性，同时绑定搜索框的变化事件到搜索词状态

通过这种方式，你可以直接访问过滤后的数据集，无需调用后端API。下面是完整的代码示例：

import React, { useState, useMemo } from 'react';
import MaterialTable from '@material-table/core';

const FilterableTable = () => {
  // 存储完整的原始数据
  const [rawData, setRawData] = useState([
    { name: 'Alice', department: 'Engineering', salary: 80000 },
    { name: 'Bob', department: 'Marketing', salary: 65000 },
    { name: 'Charlie', department: 'Engineering', salary: 90000 },
    { name: 'Diana', department: 'HR', salary: 55000 },
  ]);
  // 存储当前搜索词
  const [searchTerm, setSearchTerm] = useState('');

  // 使用useMemo缓存过滤结果，避免每次渲染都重复过滤
  const filteredData = useMemo(() => {
    if (!searchTerm.trim()) return rawData;
    
    const lowerTerm = searchTerm.toLowerCase();
    // 对每个数据项的所有字段进行模糊匹配
    return rawData.filter(item => 
      Object.values(item).some(value => 
        String(value).toLowerCase().includes(lowerTerm)
      )
    );
  }, [rawData, searchTerm]);

  // 这里可以直接使用filteredData做任何操作，比如统计数量、导出等
  console.log('当前过滤后的数据集:', filteredData);

  return (
    <MaterialTable
      title="员工信息表"
      columns={[
        { title: '姓名', field: 'name' },
        { title: '部门', field: 'department' },
        { title: '薪资', field: 'salary', type: 'numeric' },
      ]}
      data={filteredData}
      options={{
        search: true, // 启用组件自带的搜索框
        searchFieldAlignment: 'right',
      }}
      onSearchChange={(query) => setSearchTerm(query)} // 监听搜索框输入变化
    />
  );
};

export default FilterableTable;

关键说明 #

• 过滤逻辑完全由你掌控，可以根据需求调整匹配规则（比如只匹配特定字段、精确匹配等）
• useMemo的作用是避免每次组件渲染都重新执行过滤操作，提升性能
• 过滤后的filteredData可以直接在组件内使用，比如用于展示统计信息、导出Excel等场景
• 如果你的原始数据是从API获取的，只需要在获取数据后更新rawData状态即可，过滤逻辑会自动生效

内容的提问来源于stack exchange，提问作者Muhammad Asad Attari