Dash Ag Grid does not apply the custom cell renderer

Dash Python
1

Hi team,

I am using dash ag grid and trying to use React.createElement to create a custom cell renderer as follows (this is pasted in the asset folder, dashAgGridFunctions.js):

dagfuncs.fieldCellRenderer = function(params) {
    const value = params.value ? params.value.toString() : '';
    const searchText = ':';
    const index = value.indexOf(searchText);

    if (index !== -1){
        const italicizedPart = React.createElement('span', { style: { fontStyle: 'italic', color: 'grey'}}, value.substring(index));
        const parts = [
            value.substring(0, index),
            italicizedPart
        ];
        return React.createElement('span', null, ...parts);
    };

    return React.createElement("span", null, 'this is to see if the function is working');
         
};

and this is how I use it:

  columnDefs=[{'headerName': 'Field', 'field': 'HeaderName', "cellRenderer": "fieldCellRenderer"}],

although I can see the dashAgGridFunctions functions is loaded using Inspect Element, but the cell renderer does not apply on any cell. Any suggestion?

2

Hello @231530353,

That component is in the wrong namespace, it needs to be in the dashAgGridComponentFunctions namespace.

var dagcomponentfuncs =
  (window.dashAgGridComponentFunctions =
  window.dashAgGridComponentFunctions =
    {});
1 Like
3

thanks a lot :slight_smile:

1 Like