When I try to render custom element using cell render,

here is my ponent: Action.jsx

import React from 'react';

export default (props) => (
    <div>
        <button
            class="action-button cancel">
            cancel
        </button>
    </div>
);

here are my grid options and import:

import AcRenderer from './Action.jsx'
...
const gridOptions = {
    rowData: renderdata(),
    columnDefs: [
      {
        headerName: "action",
        cellRenderer: AcRenderer,
        editable: false,
        colId: "action",
        filter: false,
        minWidth: 220
      }
    ],

but I keep getting this error:

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

Does anyone know why?

with many thanks!!

When I try to render custom element using cell render,

here is my ponent: Action.jsx

import React from 'react';

export default (props) => (
    <div>
        <button
            class="action-button cancel">
            cancel
        </button>
    </div>
);

here are my grid options and import:

import AcRenderer from './Action.jsx'
...
const gridOptions = {
    rowData: renderdata(),
    columnDefs: [
      {
        headerName: "action",
        cellRenderer: AcRenderer,
        editable: false,
        colId: "action",
        filter: false,
        minWidth: 220
      }
    ],

but I keep getting this error:

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

Does anyone know why?

with many thanks!!

• javascript
• reactjs
• ag-grid
• ag-grid-react
• cellrenderer

• 1 Here is a tricky thing, if I use a functionconst actionCellRenderer = (params) => { let eGui = document.createElement("div"); eGui.innerHTML = ` <button class="action-button update" data-action="update"> update </button> ` return eGui; } and put this in gridOption it will work and no error. what will be the problems? – Haofang Liu Commented Feb 11, 2022 at 10:13

2 Answers 2

problem solved.

I have no idea somehow i was reading 27.0.0 version of document but actually using 26.2. In this version, it support you write a functional ponent and use is directly.(when I test, there is a new release 27.0.1 in 6 mins ago, but after test, there are issues logged on console, so decided to use back to 26.2)

But in 26.2 version, you have to export in string or import it using frameworkComponents inside the ag grid options, after that you can use you ponent.

To be honest, can we have some warning like: you are reading which version of document? I saw 27.0.0 was released on 08 Feb but the project started several days early than that, during these days I didn't even notice that there is a huge version release...

sorry about my plaint (this issue really wasted a lot of time) but hope my findings can help!

We've met the similar issue (ag-grid-enterprise 24.1.0).

Our solution is:

<AgGridReact
  columnDefs={[{ cellRenderer: 'OurCustomRenderer' }]}
  rowData={rowData}
  frameworkComponents={{
    OurCustomRenderer: (props) => xxx,
  }}
  ...
/>

A very "user-friendly" API.