React AG Grid Cell Custom Renderer

Question

I have following problem:

I use ag-grid together with React and I want to use a custom cellRenderer.

      obj.cellRendererParams = {
        values: elems,
        cellRenderer: function cellRenderer(params: any) {
          return `<div style="display:inline-block;width:${width * 6}px">${
            params.value || ""
          }</div>`;
        },
      };

This code worked so far, but I want to use a functional Component instead.

      obj.cellEditorParams = {
              values: elems,
              cellRenderer: function cellRendererFrameWork(params: any) {
                return TestCellRenderer;
              },
      }

The code above shows one version on how I tried to render it.

The code below shows the functional component.

import * as React from "react";


const TestCellRenderer = (props: any) => {
  return (
    <div>
      hallo
    </div>
  );
};

export default TestCellRenderer;

Inside of a dropdown this should just display hallo so far, but the result is actually a string as shwon in the picture.

When I remove the wrapping function and just write cellRenderer: TestCellRenderer I receive following error message:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Any ideas? According to the AG-Grid docs it should work...

Answer 1

I just figured out, that my question is a duplicate of this:

Cell Renderer a custom componenent, keeps getting "Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'."

So the code would be:

        obj.cellEditorParams = {
          values: elems,
          cellRenderer: 
            'helloCellRenderer'
        };

and in the grid options I have to add the helloCellRenderer as frameworkComponents like this:

frameworkComponents: {
  priorityCellRenderer: ratingCellRenderer,
  helloCellRenderer: TestCellRenderer
},