Сетка AG: cellRenderer отключает форматирование значений - PullRequest
Новая
       13

Сетка AG: cellRenderer отключает форматирование значений

0 голосов
/ 02 мая 2019

У меня есть пользовательский cellRenderer в моей AG-Grid, и я использую valueformatter: 

const columnDefs = R.map(
  R.pipe(x => ({
    headerName: strings[x.name],
    field: x.name,
    valueFormatter: contactInformationFormatter,
    comparator:
      x.name === 'group' || x.name === 'tendency'
        ? selectValueToComparableNumber
        : null,
    cellRenderer: x.compenent !== 'select' ? 'highlightCellRenderer' : null,
    cellEditor: componentToCellEditors[x.component],
    cellEditorParams:
      x.component === 'select' ? cellEditorParams[x.name] : null,
    getQuickFilterText: function(params) {
      return x.component === 'select' ? null : params.value;
    },
  })),
  contactInformationCells
);

Если я исключаю cellRenderer, отформатированные значения отображаются правильно. Если я включу его, я получу нетрансформированные значения. Это ошибка?

Вот мой форматер и мой cellRenderer: 

function contactInformationFormatter(params) {
  return strings[params.value] || params.value;
}

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

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

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

export default HighlightCellRenderer;

1 Ответ

1 голос
/ 06 мая 2019

Это не ошибка. Вы должны использовать свойство valueFormatted в params из cellRenderer, чтобы получить форматированный вывод valueFormatter. Свойство value содержит исходные неформатированные данные. Таким образом, cellRenderer будет похоже на 

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