4

When I try to render custom element using cell render,

here is my component: 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!!

Vidarshan Rathnayake
  • 484
  • 1
  • 10
  • 20
Haofang Liu
  • 141
  • 1
  • 5
  • 1
    Here is a tricky thing, if I use a function```const actionCellRenderer = (params) => { let eGui = document.createElement("div"); eGui.innerHTML = ` ` return eGui; }``` and put this in gridOption it will work and no error. what will be the problems? – Haofang Liu Feb 11 '22 at 10:13

1 Answers1

7

probloem sovled.

I have no idea somewhow i was reading 27.0.0 version of document but actually using 26.2. In this version, it support you write a functional component 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 loged 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 component.

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 complain(this issue really waste a lot of time) but hope my findings can help!

Haofang Liu
  • 141
  • 1
  • 5