Customize tree icon on ag grid

Question

I want to add icon before the tree view in ag grid in first column before the collapse and expand arrow and also the leaf level.. how can i write custom render for this thing.

Answer 1

You can add icon or button in first column in tree view as below:-

 autoGroupColumnDef: {
                headerName: 'OrgHierarchy',
                field: 'OrgHierarchy'
            //user valueGetter and valueSetter
                 valueGetter: (params) => {

                },
                valueSetter: (params) => {
                    return true;
                },
                cellRendererParams: {
                    suppressCount: true,
                    innerRenderer: 'orgHierarchyRenderer',  //<=====add it as
                },

}

components: {
  orgHierarchyRenderer: this.OrgHierarchyRenderer(),
}


 OrgHierarchyRenderer() {
        function orgHierarchyRenderer() {}
        orgHierarchyRenderer.prototype.init = function (params) {
            this.eGui = document.createElement('div');
            this.eGui.innerHTML = params.value;

            // add buttons or any icon as below and style to position
            this.btnEle = document.createElement('button');
            this.btnEle.className = 'btnDivDetails';
            this.btnEle.innerHTML = "Details <i class='kr-right_arrow'></i>";
            this.btnEle.addEventListener('click', function (event) {
                
                }
            
            });
            this.eGui.appendChild(this.btnEle);
        };

        orgHierarchyRenderer.prototype.getGui = function () {
            return this.eGui;
        };
        orgHierarchyRenderer.prototype.getValue = () => {
            return this.eGui;
        };
        orgHierarchyRenderer.prototype.destroy = function () {};
        orgHierarchyRenderer.prototype.isPopup = function () {
            return false;
        };
        return orgHierarchyRenderer;
    }
}

Answer 2

Adding Icons before the Expanding/Collapse arrow is not possible out of the box using Cell Renderer Components, however you can leverage CSS to do this.

For example, targeting the grouping nodes and then adding an icon (in this case, Font Awesome icon):

    .ag-theme-alpine span.ag-row-group::before {
      font-family: 'Font Awesome 5 Free';
      font-weight: bold;
      content: '\f00d';
      color: red;
    }

Please see the following example to see how: https://plnkr.co/edit/Dn5nIqzyaeOFld9q