Material UI Data Grid使用renderCell的字段过滤功能失效如何解决

失效原因 #

Data Grid 默认会读取列配置中field对应的数据行字段值执行过滤逻辑，你当前配置的movie列绑定的字段是movie，但实际渲染用的是行数据里的title字段，数据行不存在movie属性，过滤逻辑无法获取到待匹配的有效值，因此过滤失效。

解决方案 #

方案1：新增valueGetter配置（改动最小） #

给movie列添加valueGetter属性，指定该列用于过滤、排序的实际取值为title字段，即可复用默认过滤逻辑实现电影标题过滤：

const columns = [
  { field: "_id", headerName: "ID", width: 110 },
  {
    field: "movie",
    headerName: "Movie",
    width: 240,
    // 新增valueGetter指定该列实际取值
    valueGetter: (params) => params.row.title,
    renderCell: (params) => {
      return (
        <div className={Style.usercell}>
          <img src={params.row.featuredImg} alt="" />
          <span>{params.row.title}</span>
        </div>
      );
    },
  },
  { field: "genre", headerName: "Genre", width:  120 },
  { field: "year", headerName: "Year", width:  120 } 
]

方案2：自定义过滤函数（适配特殊需求） #

如果需要自定义匹配规则，比如模糊匹配之外的逻辑、多字段联合匹配，可以给列配置filterFn自定义过滤逻辑：

{
  field: "movie",
  headerName: "Movie",
  width: 240,
  // 自定义过滤逻辑，示例为不区分大小写的模糊匹配
  filterFn: (_, row, filterValue) => {
    if (!filterValue) return true;
    return row.title.toLowerCase().includes(filterValue.trim().toLowerCase());
  },
  renderCell: (params) => {
    return (
      <div className={Style.usercell}>
        <img src={params.row.featuredImg} alt="" />
        <span>{params.row.title}</span>
      </div>
    );
  },
}

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