Material React Table渲染Firebase Firestore数组字段异常问题咨询

1. 让数组字段显示为带分隔符的字符串 #

在列配置中通过cell属性自定义单元格渲染逻辑，将数组转换为用逗号（或其他你需要的分隔符）分隔的字符串：

{
  accessorKey: "searcharray",
  header: "searcharray",
  cell: ({ cell }) => {
    const arrayData = cell.getValue();
    // 判断是否为数组，避免非数组值报错
    return Array.isArray(arrayData) ? arrayData.join(', ') : arrayData;
  },
}

2. 让数组字段支持搜索 #

默认搜索逻辑只会匹配数组toString()后的连续字符串，需要自定义过滤函数实现数组元素的精准匹配：

单个列的过滤配置 #

给该列添加filterFn属性，指定自定义过滤逻辑：

{
  accessorKey: "searcharray",
  header: "searcharray",
  cell: ({ cell }) => {
    const arrayData = cell.getValue();
    return Array.isArray(arrayData) ? arrayData.join(', ') : arrayData;
  },
  filterFn: (row, column, filterValue) => {
    const arrayData = row.getValue(column.accessorKey);
    if (!Array.isArray(arrayData)) return false;
    // 检查数组中是否有元素包含搜索关键词（不区分大小写）
    return arrayData.some(item => 
      String(item).toLowerCase().includes(filterValue.toLowerCase())
    );
  },
}

全局搜索支持数组字段 #

如果需要全局搜索也能匹配数组内的元素，在MaterialReactTable组件的props中配置globalFilterFn：

<MaterialReactTable
  data={yourFirestoreDocs}
  columns={yourColumns}
  // 自定义全局搜索逻辑
  globalFilterFn={(rows, globalFilter) => {
    const lowerCaseFilter = globalFilter.toLowerCase();
    return rows.filter(row => {
      return Object.values(row.original).some(value => {
        if (Array.isArray(value)) {
          // 数组元素匹配检查
          return value.some(item => 
            String(item).toLowerCase().includes(lowerCaseFilter)
          );
        }
        // 普通字段匹配检查
        return String(value).toLowerCase().includes(lowerCaseFilter);
      });
    });
  }}
  // 其他配置...
/>

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