a beginner here with ag-grid.

I’m having an issue with my ag-grid column headers. I’ve recently upgraded the dependency from v28.2 to v31.2. Upon upgrading, it seems that my column headers along with the floating filter has been re-positioned to the bottom of the grid. I’ve been messing around with the Column Definitions and behaviors but still couldn’t figure out what caused this to happen.

*I’m calling ag-grid via cdn in my code.

Here is a snippet of my code for my Column Definitions:

function getColumnDefs() { return [ {
                        field: 'name',
            headerName: 'Group name',
            comparator: $scope.stringComparator,
            cellRenderer: function (params) {
                return '<div class="lh-2">' + params.data.name
                    + '</a></div>';
            },
            filter: 'agTextColumnFilter',
            lockPinned: true,
            pinned: 'left',
            lockVisible: false,
            suppressColumnsToolPanel: true,
            sort: 'asc',
        },
        {
            field: 'description',
            headerName: 'Description',
            comparator: $scope.stringComparator,
            cellRenderer: function (params) {
                var result;
                if (!params.data.description) {
                    result = 'N/A';
                } else {
                    result = params.data.description;
                }
                return '<div class="description">' + result + '</a></div>';
            },
            filter: 'agSetColumnFilter'
        },
        {
            field: 'typeLabel',
            headerName: 'Type',
            minWidth: 120,
            width: 120,
            maxWidth: 120,
            comparator: $scope.userComparator,
            filter: 'agSetColumnFilter'
        },`

and my Grid Options:

$scope.gridOption = {
        columnDefs: getColumnDefs(),
        
        rowData: [],
        rowHeight: 65,
        suppressContextMenu: true,
        defaultColDef: {
            lockPinned: true,
            filter: 'agTextColumnFilter',
            filterParams: {
                buttons: ['reset', 'apply'],
                closeOnApply: true,
                debounceMs: 2000
            },
            floatingFilter: true,
            resizable: true,
            sortable: true,
            enablePivot: false,
            enableRowGroup: false,
            suppressMovable: false,
            suppressHeaderMenuButton: false,
            unSortIcon: true,
            menuTabs: [],
            tooltipComponent: 'agGridActionButtonTooltip'
        },
        autoGroupColumnDef: {
            minWidth: 400,
            headerValueGetter: function (e) {

                var rowGroupsName = '';

                if (e != null && e != null
                    && e != null
                    && e.rowGroupColumns != null
                    && e.rowGroupColumns.length > 0) {
                    for (var j = 0; j < e.rowGroupColumns.length; j++) {

                        var item = e.rowGroupColumns[j];

                        if (rowGroupsName.length > 0) {
                            rowGroupsName += ' ❯ ';
                        }
                        rowGroupsName += item.userProvidedColDef.headerName;
                    }
                }

                if (rowGroupsName.length > 0) {
                    return rowGroupsName;
                }
                else {
                    return 'Group';
                }
            },
            onCellClicked: CellClickedEvent
        },
        isRowSelectable: function (params) {
            return !!params.data && params.data.canBeSelected;
        },
        floatingFiltersHeight: 0,
        domLayout: "autoHeight",
        enableCellTextSelection: true,
        suppressRowHoverHighlight: false,
        columnHoverHighlight: true,
        animateRows: false,
        icons: $scope.icons,
        pagination: true,
        paginationPageSize: 5,
        suppressPaginationPanel: true,
        isExternalFilterPresent: false,
        doesExternalFilterPass: doesExternalFilterPass,
        pinnedBottomRowData: [],
        sideBar: {
            toolPanels: [
                {
                    id: 'columns',
                    labelDefault: '',
                    labelKey: 'columns',
                    iconKey: 'columns',
                    toolPanel: 'agColumnsToolPanel',
                    toolPanelParams: {
                        suppressValues: true,
                        suppressPivots: true,
                        suppressPivotMode: true
                    }
                }
            ],
            position: 'right'
        },
        onFirstDataRendered: function (params) {
            return $scope.agGrid.forEachNode(function (node) {
                return node.setSelected(node.data.alreadySelected)
            });
        },
        getRowStyle: function (params) {
            if (!params.node.data.canBeSelected) {
                return { opacity: '0.7' };
            }
        },
        onSelectionChanged: function (params, event) {
            $scope.disableNextButton = $scope.agGrid.getSelectedRows().length == 0;
            $scope.$apply();
        },
        suppressRowClickSelection: true,
        enableBrowserTooltips: false,
        tooltipShowDelay: 0,
        components: {
            agGridActionButtonTooltip: agGridActionButtonTooltipFactory,
        },
        getContextMenuItems: function (params) {
            var result = [];

            if (params.node.data.isMember) {
                result.push({
                    name: 'Suggest member',
                    action: function () {
                        $rootScope.$broadcast('msh.open.suggest.member.modal', params.node.data);
                    }
                });
                result.push({
                    name: 'Leave group',
                    action: function () {
                        // console.log(params.node.data);
                        $rootScope.$broadcast('msh.open.leave.group.modal', params.node.data);
                    }
                })
            } else {
                result.push({
                    name: 'Cancel Request',
                    action: function () {
                        $rootScope.$broadcast('msh.open.cancel.request.modal', params.node.data);
                    }
                });
            }
            return result;
        }
    };

I’m taking over a legacy code and not sure what changes happened in v31.2 that cause this to happen:

(https://i.sstatic.net/lfB6pp9F.png)

upgrading from v28.2 to v31.2, some of the changes I’ve done is:

• changed ag-grid init from new agGrid.Grid to agGrid.createGrid
• change gridOptions.api calls
• changed any deprecated functions

Expecting header to remain as it was before the upgrade but unsure what are the header behaviors that are affecting this via the changes made.

Any help or assistance and explanation would be really valuable. Thanks.