ag-grid-react using cellRenderer DOMNodeInserted event error

Question

i'm using ag-grid-react

An error occurs when using the cellRenderer. How can I resolve that message?

''' reactComponent.js:57 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive. '''

try cellRenderer, cellRendererFramework ... Everything causes that message using cellRenderer... what can i do??

function BtnCellRenderer (props) {
return (
    <span><button >Click Me!</button></span>
)

export default function Test() {
  const columnDefs= [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" },
    {headerName: "Action",field:"price", cellRenderer: 'btnCellRenderer'}
    ]

  const rowData= [
    { make: "Toyota", model: "Celica", price: 35000 }, 
    { make: "Ford", model: "Mondeo", price: 32000 }, 
    { make: "Porsche", model: "Boxter", price: 72000 }]


  return (
    <div className="App">
      <h1 align="center">React-App</h1>
      <div className="ag-theme-alpine" style={ {height: '200px'} }>
        <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            defaultColDef={{flex:1}}
            frameworkComponents={{
                btnCellRenderer: BtnCellRenderer,
            }}
        >
        </AgGridReact>
      </div>
    </div>
  );

Sergi Nadal Sergi Nadal · Accepted Answer · 2020-12-23T11:08:45

First of all, without cellRenderer the app works?

If it works, modify frameworkComponents like this frameworkComponents={{ BtnCellRenderer }} then in columnDefs modify cellRenderer like this cellRenderer: 'BtnCellRenderer '}

Maybe you could try to use only one pair of brackets in fromeworkComponents, like this:

frameworkComponents={ btnCellRenderer: BtnCellRenderer}

Is the way I'm using it and it works fine!

ag-grid-react using cellRenderer DOMNodeInserted event error

1 Answers