AG Grid: cellRenderer disables value formatter

Question

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;

score 6 · Accepted Answer · answered May 06 '19 at 12:58

6

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>;
}

answered May 06 '19 at 12:58

abd995

1,649
6
13

Thanks, I was breaking my head to find what was wrong. The ag-grid docs says _"It is possible to use a combination of both, in which case the result of the value formatter will be passed to the cell renderer."_- but they didn't mention that you had to use valueFormatted field. – Sarun Feb 24 '21 at 13:57
In case anyone is reusing the same cell renderer for fields with and without value formatter - ` value = params.valueFormatted!=null ? params.valueFormatted : params.value; ` – Sarun Feb 24 '21 at 14:10

AG Grid: cellRenderer disables value formatter

1 Answers1