Material React Table V2日期全局过滤功能失效求助

问题原因 #

你的日期列通过accessorFn返回了Date对象，而全局过滤默认使用的contains函数会直接匹配Date对象的原生字符串形式（如Wed Sep 18 2024 00:00:00 GMT+0800），这和你在Cell中渲染的本地化日期字符串（如18/09/2024）格式完全不同，导致输入日期文本时无法匹配到结果。

解决方案 #

针对每个日期列，自定义globalFilterFn，将Date对象转换为和前端显示一致的字符串后再进行匹配：

修改日期列配置 #

1. 生日列（Cumpleaños）

{
  accessorFn: (originalRow) => new Date(originalRow.birth),
  id: 'birth',
  header: 'Cumpleaños',
  filterVariant: 'date',
  filterFn: 'contains',
  // 自定义全局过滤逻辑
  globalFilterFn: (row, column, filterValue) => {
    // 转换为和Cell显示一致的本地化日期字符串
    const displayDate = row.getValue(column.id).toLocaleDateString();
    // 忽略大小写匹配
    return displayDate.toLowerCase().includes(filterValue.toLowerCase());
  },
  Cell: ({ cell }) => {
    const formattedDate = cell.getValue().toLocaleDateString();
    return formattedDate;
  },
  size: 150,
},

2. 到达时间列（Arrival Time）

{
  accessorFn: (originalRow) => new Date(originalRow.access),
  id: 'access',
  header: 'Arrival Time',
  filterVariant: 'datetime',
  // 自定义全局过滤逻辑
  globalFilterFn: (row, column, filterValue) => {
    // 转换为和Cell显示一致的日期时间字符串
    const displayDateTime = `${row.getValue(column.id).toLocaleDateString()} ${row.getValue(column.id).toLocaleTimeString()}`;
    // 忽略大小写匹配
    return displayDateTime.toLowerCase().includes(filterValue.toLowerCase());
  },
  Cell: ({ cell }) =>
    `${cell.getValue().toLocaleDateString()} ${cell
      .getValue()
      .toLocaleTimeString()}`,
  size: 150,
},

额外说明 #

• 如果你希望全局统一处理所有列的过滤逻辑，也可以在useMaterialReactTable的配置中重写globalFilterFn，遍历列时判断是否为日期类型再做转换，但针对单列配置globalFilterFn更灵活。
• 确保toLocaleDateString和toLocaleTimeString的本地化设置和你的LocalizationProvider一致（这里是es-mx），保证转换后的字符串和前端显示完全匹配。

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