React Data Grid 数据搜索过滤功能的实现方案

概述

在使用 React Data Grid 这类数据表格组件时，快速搜索和过滤功能是常见的业务需求。虽然 AG Grid 等商业组件提供了内置的搜索过滤功能，但在轻量级的开源解决方案中，开发者往往需要自行实现这一功能。

核心实现思路

React Data Grid 作为一个轻量级组件，虽然没有内置搜索功能，但我们可以利用 React 的特性轻松实现：

const filteredRows = useMemo(() => {
  if (filterText === "") { return rows; }
  const lowerCaseFilter = filterText.toLowerCase();
  return rows.filter(row => {
    return Object.keys(row).some(key => {
      return String(row[key]).toLowerCase().includes(lowerCaseFilter);
    });
  });
}, [rows, filterText]);

这段代码展示了实现的核心逻辑：

1. 使用 useMemo 进行性能优化，避免不必要的重复计算
2. 将搜索词和行数据都转换为小写，实现不区分大小写的搜索
3. 遍历每一行的所有属性值进行匹配
4. 返回包含搜索词的所有行

完整实现方案

一个完整的搜索过滤功能通常包含以下几个部分：

1. 状态管理

const [filterText, setFilterText] = useState("");

2. 搜索输入框

<input
  type="text"
  value={filterText}
  onChange={(e) => setFilterText(e.target.value)}
  placeholder="搜索..."
/>

3. 数据网格集成

<DataGrid
  columns={columns}
  rows={filteredRows}
/>

性能优化建议

1. 防抖处理：对于大数据集，可以考虑添加防抖功能，避免频繁触发过滤计算
2. 指定搜索列：如果只需要搜索特定列，可以修改过滤逻辑只检查这些列
3. 虚拟滚动：React Data Grid 本身支持虚拟滚动，与过滤功能配合良好

高级功能扩展

对于更复杂的需求，可以考虑：

1. 多条件过滤：支持 AND/OR 逻辑组合
2. 正则表达式：提供更强大的模式匹配能力
3. 保存搜索状态：将搜索条件持久化到URL或本地存储

总结

虽然 React Data Grid 没有内置搜索功能，但通过简单的 React 状态管理和数组操作，我们可以轻松实现高效的数据过滤。这种实现方式既保持了组件的轻量性，又提供了足够的灵活性来满足各种业务场景的需求。对于大多数中小型项目，这种方案已经足够应对常见的搜索过滤需求。