CODEWITHSUNDEEP
reactjsag-gridag-grid-react
J. Hesters
J. Hesters

Reputation: 14768

AG Grid: cellRenderer disables value formatter

I have a custom cellRenderer in my AG-Grid and I'm using a 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
);

If I exclude the cellRenderer, the formatted values get displayed correctly. If I include it, I get the untransformed values. Is this a bug?

Here is my formatter and my 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;

Upvotes: 6

Views: 3756

Answers (1)

abd995
abd995

Reputation: 1839

This is not a bug. You have to use the valueFormatted property in the params of cellRenderer to get the formatted output of valueFormatter. value property holds the original unformatted data. So the cellRenderer will be like

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

Upvotes: 13

Related Questions