ag-grid Group Column Pinned

I struggled with pinning a group column left and I wanted to share my solution with the world. Refer to the autoGroupColumnDef section. Hope this helps!

var columnDefs = [
    { headerName: "Console", field: "console", width: 140, rowGroup: true},
    { headerName: "Alarm Type", field: "AlarmType", width: 20, pivot: true },
    { headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
    { headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum', cellRenderer: roundNumber },
    { headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum', cellRenderer: roundNumber }
];

var gridOptions = {
    groupMultiAutoColumn: true,
    groupDefaultExpanded: -1,
    suppressAggFuncInHeader: true,
    groupSuppressBlankHeader: true,
    pivotMode: true,
    columnDefs: columnDefs,
    enableRangeSelection: true,
    toolPanelSuppressRowGroups: true,
    toolPanelSuppressPivotMode: true,
    toolPanelSuppressPivots: true,
    toolPanelSuppressValues: true,
    autoGroupColumnDef: {
        headerName: 'Consoles',//custom header name for group
        pinned: 'left',//force pinned left. Does not work in columnDef
        cellRendererParams: {
            suppressCount: true,//remove number in Group Column
        }
    }
};

To achieve expected use below option of removing pivotMode: true which is causing issue while pinning column to left

working soluion for reference

var columnDefs = [
    { headerName: "Console", field: "console", width: 140, rowGroup: true},
    { headerName: "Alarm Type", field: "AlarmType", width: 55, pivot: true },
    { headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
    { headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum'},
    { headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum'}
];

var gridOptions = {
   groupMultiAutoColumn: true,
   groupDefaultExpanded: -1,
   suppressAggFuncInHeader: true,
   groupSuppressBlankHeader: true,
   columnDefs: columnDefs,
    enableRangeSelection: true,
    toolPanelSuppressRowGroups: true,
    toolPanelSuppressPivotMode: true,
    toolPanelSuppressValues: true,
    autoGroupColumnDef: {
        headerName: 'Consoles',//custom header name for group
        pinned: 'left',//force pinned left. Does not work in columnDef
        cellRendererParams: {
            suppressCount: true,//remove number in Group Column
        }
    }
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
    var data = [
      {'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456},
    {'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456}
    ];
    gridOptions.api.setRowData(data);
});

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style media="only screen">
    html, body {
        height: 50%;
        width: 60%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }
    body {
        padding: 1rem;
        overflow: auto;
    }
</style>
<script src='https://unpkg.com/@ag-grid-community/[email protected]/dist/ag-grid-community.min.js'></script></head>
<body>

<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>

    <script src="main.js"></script>
</body>
</html>

Plunker for reference - https://plnkr.co/edit/eWc4HsKzLO80vTKtSxQp?p=preview

Recommended topics

Hot tags