How can I control the sidepanel for ag-grid so I only enable grouping

0
votes

I have the following plunkr: https://plnkr.co/edit/xtPbAztpG14bleAF9bgy?p=preview 

var gridOptions = {
defaultColDef: {
    // allow every column to be aggregated
    enableValue: false,
    // allow every column to be grouped
    enableRowGroup: true,
    // allow every column to be pivoted
    enablePivot: false
},  
sideBar: 'columns',

which let's me have a columns sidebar with options to edit pivot, grouping and values. However I'd like to only allow grouping for now and ideally show it above the table and not on the side. How would I go about doing that with the new Toolbar in AG grid?

Docs here: https://www.ag-grid.com/javascript-grid-tool-panel/

Ideally it should be like the Drag here to set row groups drop zone in this example: https://www.ag-grid.com/example.php#/

1
ag-gridag-grid-react

1 Answers

2
votes

Found it well "hidden away" in the docs

var gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    pivotMode: true,
    enableSorting: true,
    sideBar: 'columns',
    // THIS IS THE ONE!!!
    rowGroupPanelShow: 'always',
    pivotPanelShow: 'always',
    functionsReadOnly: true
};

Use the suppress options to fine-tune and control the display of the columns sidepanel

Example of custom sidepanel: https://www.ag-grid.com/javascript-grid-tool-panel-columns/#suppress-sections

To customise further, see https://www.ag-grid.com/javascript-grid-tool-panel-columns/#column-tool-panel-example

Example with code and plunkr: https://plnkr.co/edit/TaX0CWTKX4WKPHEijzLS?p=preview