# Dash Ag Grid does not apply the custom cell renderer

**URL:** <https://community.plotly.com/t/dash-ag-grid-does-not-apply-the-custom-cell-renderer/83564>\
**Category:** Dash Python\
**Created:** [April 3, 2024, 5:05pm UTC](https://community.plotly.com/t/dash-ag-grid-does-not-apply-the-custom-cell-renderer/83564 "2024-04-03T17:05:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![231530353](https://avatars.discourse-cdn.com/v4/letter/2/ecae2f/32.png) [@231530353](https://community.plotly.com/u/231530353)\
**Post date:** [April 3, 2024, 5:05pm UTC](https://community.plotly.com/t/dash-ag-grid-does-not-apply-the-custom-cell-renderer/83564/1 "2024-04-03T17:05:45Z")

</div>

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):

```auto
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:

```auto
  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?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [April 3, 2024, 5:24pm UTC](https://community.plotly.com/t/dash-ag-grid-does-not-apply-the-custom-cell-renderer/83564/2 "2024-04-03T17:24:48Z")

</div>

Hello @231530353,

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

```auto
var dagcomponentfuncs =
  (window.dashAgGridComponentFunctions =
  window.dashAgGridComponentFunctions =
    {});

```

---

<div class="post-metadata">

**Author:** ![231530353](https://avatars.discourse-cdn.com/v4/letter/2/ecae2f/32.png) [@231530353](https://community.plotly.com/u/231530353)\
**Post date:** [April 3, 2024, 5:30pm UTC](https://community.plotly.com/t/dash-ag-grid-does-not-apply-the-custom-cell-renderer/83564/3 "2024-04-03T17:30:36Z")

</div>

thanks a lot 🙂