如何基于动态列字段实现MUI DataGrid全列搜索过滤？

找到useSearchTable Hook中处理allColumns搜索的分支，将过滤逻辑调整为任意列匹配即保留该行，同时兼容空值与不同数据类型：

// 修复后的全列搜索过滤逻辑
const filteredData = valueOne.filter(row => {
  // 遍历动态列数组，只要有一列匹配搜索词就保留当前行
  return valueTwo.some(column => {
    const cellValue = row[column.field];
    // 处理空值/undefined，避免报错
    if (cellValue == null) return false;
    // 统一转为字符串，兼容数字、布尔等非字符串类型的搜索
    const valueStr = String(cellValue).toLowerCase();
    const searchStr = searchTerm.toLowerCase();
    return valueStr.includes(searchStr);
  });
});

核心修复点 #

• 替换遍历方法：把every()改为some()——every()要求所有列匹配才保留，而some()只要有一列匹配就返回true，完全符合「任意列匹配即筛选」的需求
• 空值防护：避免单元格值为null/undefined时触发报错
• 类型统一：将所有单元格值转为字符串，确保数字、布尔值等类型能被正确搜索

扩展：处理嵌套字段 #

如果列的field是嵌套路径（比如user.name），可以添加字段路径解析逻辑：

// 解析嵌套字段值
const getCellValue = (row, field) => {
  return field.split('.').reduce((acc, key) => acc?.[key], row);
};

// 在过滤逻辑中使用
return valueTwo.some(column => {
  const cellValue = getCellValue(row, column.field);
  if (cellValue == null) return false;
  const valueStr = String(cellValue).toLowerCase();
  return valueStr.includes(searchTerm.toLowerCase());
});

内容的提问来源于stack exchange，提问作者Mohammed Zourdy