Ag-Grid：过滤时颜色匹配

Question

我正在使用 AG-Grid 来显示一个值。我想知道：有没有办法在快速过滤时给匹配的单元格着色？

例如我有

[
  { firstName: 'Tom', lastName: 'Doe', company: 'Tesla' },
  { firstName: 'Tim', lastName: 'Boulder', company: 'Tommy Hilfiger },
  { firstName: 'Ben', lastName: 'Miller', company: 'D3' }
]

然后我搜索 om Ben 不再显示，table 颜色 Tom 用于 Tom，Tommy Hilfiger 用于 Tim。

Answer 1

一种可能的方法：使用

获取快速过滤器文本

gridOptions.quickFilterText

然后在单元类函数中使用它：

var colDef = {
  name: 'First name',
  field: 'firstName',
  cellClass: function(params) { 
    return params.value.indexOf(this.gridOptions.quickFilterText) > -1
      ? 'value-found-class'
      : 'no-value-found-class'
  );}
}

如果 cellClass 函数没有被重新触发，监听 filterChanged 事件：

gridOptions.onFilterChanged = function() {
  gridOptions.api.refreshCells();
}

检查 refreshCells 的参数： https://www.ag-grid.com/javascript-grid-refresh/

Answer 2

这是一个针对 React 的 hacky 解决方案（顺便说一句，ag-grid 管道中的问题是 AG119）：

1 启用 reactNext 并给出 frameWorkComponents 值：

<AgGridReact
  animateRows={true}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  frameworkComponents={frameworkComponents}
  multiSortKey="ctrl"
  onFirstDataRendered={onFirstDataRendered}
  onGridReady={onGridReady}
  quickFilterText={searchValue}
  reactNext={true}
  rowData={contacts}
/>

2 定义 frameWorkComponents:

import HighlightCellRenderer from './HighlightCellRenderer';
// ...
const frameworkComponents = {
  highlightCellRenderer: HighlightCellRenderer,
};

3 在您的 colDefs 中添加 cellRenderer:

cellRenderer: 'highlightCellRenderer',

4 最后，创建您的自定义组件：

import React from 'react';
import { useSelector } from 'react-redux';

import { getSearchValue } from '../../layout/header/search-value-reducer';

function HighlightCellRenderer({ value }) {
  const searchValue = useSelector(getSearchValue);
  if (searchValue && value.toLowerCase().includes(searchValue)) {
    return <strong>{value}</strong>;
  }
  return <span>{value}</span>;
}

export default HighlightCellRenderer;

在我的例子中，我使用 Redux 获得 searchValue。

注意：像这样使用自定义单元格可能会影响性能并禁用自动调整大小等功能：

//  This won't work with the custom cells:
function onFirstDataRendered({ columnApi }) {
  var allColumnIds = [];
  columnApi.getAllColumns().forEach(function(column) {
    allColumnIds.push(column.colId);
  });
  columnApi.autoSizeColumns(allColumnIds);
}

Ag-Grid：过滤时颜色匹配

Ag-Grid: Color match when filtering

ag-grid

ag-grid-react