如何配置PrimeReact DataTable全局过滤器基于单元格模板内容过滤？

方案一：自定义全局过滤逻辑（推荐） #

直接接管全局过滤的处理流程，手动根据单元格渲染后的文本筛选数据，完全避开内置过滤依赖原始数据的问题，同时不影响原始字段的排序逻辑。

实现步骤 #

• 保留原始数据源副本用于过滤计算
• 监听全局过滤器的输入变化，手动执行过滤逻辑
• 对每一行数据，生成对应列的渲染文本，检查是否匹配过滤关键词

import { useState, useMemo } from 'react';
import { DataTable, Column, FilterMatchMode } from 'primereact/datatable';
import moment from 'moment';

// 原始数据源示例
const originalData = [
  { date: new Date(), completed: 'Y' },
  { date: new Date(Date.now() - 86400000), completed: 'N' }
];

export default function CustomFilterTable() {
  const [filters, setFilters] = useState({
    global: {
      value: null,
      matchMode: FilterMatchMode.CONTAINS,
    },
  });

  // 根据过滤条件实时计算显示数据
  const filteredData = useMemo(() => {
    const globalKeyword = filters.global.value?.toLowerCase().trim();
    if (!globalKeyword) return originalData;

    return originalData.filter(row => {
      // 生成各列的渲染文本并转小写，统一匹配规则
      const dateDisplayText = moment(row.date).format("DD/MM/YYYY hh:mm:ss A").toLowerCase();
      const completedDisplayText = (row.completed === "Y" ? "Completed" : "Not Completed").toLowerCase();
      
      // 检查任意列的渲染文本是否包含关键词
      return dateDisplayText.includes(globalKeyword) || completedDisplayText.includes(globalKeyword);
    });
  }, [filters.global.value]);

  // 处理过滤器输入变化
  const handleGlobalFilterChange = (e) => {
    setFilters({
      global: {
        ...filters.global,
        value: e.target.value
      }
    });
  };

  return (
    <>
      <input
        type="text"
        placeholder="全局搜索..."
        value={filters.global.value || ''}
        onChange={handleGlobalFilterChange}
        className="p-inputtext mb-3"
      />
      <DataTable value={filteredData}>
        <Column
          field="date"
          header="Date"
          body={(row) => moment(row.date).format("DD/MM/YYYY hh:mm:ss A")}
        />
        <Column
          field="completed"
          header="Completed"
          body={(row) => row.completed === "Y" ? "Completed" : "Not Completed"}
        />
      </DataTable>
    </>
  );
}

方案二：添加虚拟计算字段 #

在不修改原始数据的前提下，给每行数据临时添加对应渲染结果的虚拟字段，将这些虚拟字段纳入全局过滤范围，同时指定排序依赖原始字段。

实现步骤 #

• 对原始数据做映射，添加存储渲染文本的虚拟字段
• 将虚拟字段加入globalFilterFields列表
• 通过sortField属性指定列排序使用原始字段

import { useState, useMemo } from 'react';
import { DataTable, Column, FilterMatchMode } from 'primereact/datatable';
import moment from 'moment';

const originalData = [
  { date: new Date(), completed: 'Y' },
  { date: new Date(Date.now() - 86400000), completed: 'N' }
];

export default function VirtualFieldTable() {
  const [filters, setFilters] = useState({
    global: {
      value: null,
      matchMode: FilterMatchMode.CONTAINS,
    },
  });

  // 给每行添加存储渲染文本的虚拟字段，不修改原始数据
  const dataWithDisplayFields = useMemo(() => {
    return originalData.map(row => ({
      ...row,
      date_display: moment(row.date).format("DD/MM/YYYY hh:mm:ss A"),
      completed_display: row.completed === "Y" ? "Completed" : "Not Completed"
    }));
  }, []);

  return (
    <DataTable
      value={dataWithDisplayFields}
      filters={filters}
      globalFilterFields={['date_display', 'completed_display']}
      onFilter={(e) => setFilters(e.filters)}
    >
      <Column
        field="date"
        header="Date"
        body={(row) => row.date_display}
        // 指定排序使用原始date字段，避免渲染文本影响排序
        sortField="date"
      />
      <Column
        field="completed"
        header="Completed"
        body={(row) => row.completed_display}
        // 指定排序使用原始completed字段
        sortField="completed"
      />
    </DataTable>
  );
}

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