Material Table自定义列筛选问题：选择筛选值后无法实现行数据筛选

我来帮你搞定这个问题！你之前的误区在于试图手动调用customFilterAndSearch方法——其实这个方法是Material Table内部用来逐行校验过滤规则的，根本不需要你直接调用。你要做的是通知Material Table「筛选值变了」，让它自动触发整个过滤流程。

核心思路 #

当使用自定义filterComponent时，别自己维护筛选值并手动触发过滤，而是利用Material Table给filterComponent传入的onFilterChange回调来更新筛选状态。只要通过这个回调把新的筛选值传递给Table，它就会自动遍历所有行，用你定义的customFilterAndSearch规则判断哪些行该显示。

修正后的完整代码 #

{ 
  title: "Birth Place", 
  field: "birthCity", 
  lookup: birthCity, 
  customFilterAndSearch: (filterValue, rowData) => { 
    // 这里实现你的实际过滤逻辑：
    // 比如筛选值为空时显示所有行，否则匹配行的birthCity字段
    if (!filterValue) return true;
    return rowData.birthCity === filterValue;
  }, 
  filterComponent: (props) => { 
    // 直接用Table内部维护的筛选值props.filterValue，避免状态不一致
    return ( 
      <Select 
        value={props.filterValue || ''} 
        onChange={(e) => { 
          // 调用Table提供的onFilterChange，通知筛选值更新
          props.onFilterChange(e.target.value);
        }} 
      > 
        {/* 建议添加"全部"选项，方便用户清空筛选 */}
        <MenuItem value="">All</MenuItem>
        {Object.keys(birthCity).map((key) => { 
          return <MenuItem value={key}> {key} </MenuItem>; 
        })} 
      </Select> 
    ); 
  } 
}

关键细节说明 #

1. props.onFilterChange的作用：这是Material Table专为自定义筛选组件提供的回调，它会把新的筛选值同步到Table内部状态，自动触发整个表格的重新过滤。
2. customFilterAndSearch的正确打开方式：这个方法会被Table自动调用，针对每一行数据传入两个参数——当前的筛选值和该行的rowData，你只需要返回true（显示该行）或false（隐藏该行）就行。
3. 放弃手动维护state：虽然你可以用自己的setCity维护筛选值，但更推荐用props.filterValue，它和Table内部状态完全同步，能避免很多状态不一致的坑。

这样修改后，你选择单选选项时，Table就会自动按照你的规则过滤行数据了！

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