Menu
I'm stacked to add Custom columns dynamically in ag-grid. I have tried following approach.
additionalCol = { field:'SOME RANDOM', headerName: 'SOME RANDOM' };
$scope.gridOptions.columnApi.addValueColumn(additionalCol);
I have also tried
$scope.columns.push(additionalCol);
$scope.gridOptions.api.refreshView();
but didn't get success.
I even tried to add columns that exist in Data but failed.
Below is Image for what I am trying.
As shown in image "% dev" is Custom column which I need to add dynamically with dynamically calculated values.
653
So to achieve your goal (dynamically addemove columnDefs) you need to use setColumnDefs (colDefs) method setColumnDefs (colDefs) Call to set new column definitions into the grid. The grid will redraw all the column headers, and then redraw all of the rows.
Updating existing column definitions To update existing column definitions, we first call the ag-Grid API method getColumnDefs () to get a reference to the grid's current columns. We then map over the columns, changing any desired properties before updating our columnDefs bound property.
In the example above you'll see that we're creating ag-Grid Columns by mapping over a state variable columns and returning a agGridColumn React component for each column definition, spreading props while doing so: To add or remove columns, we simply have to call the setColumns setState method, passing in a new set of column definitions.
Most use-cases for AG Grid will have predefined column headers because this allows taking advantage of the grid configuration available e.g. in-cell editing etc. The AG Grid API offers you full configuration of the Column Definitions:
Try this:
var columnDefs = $scope.gridOptions.columnDefs;
columnDefs.push({ field:'SOME RANDOM', headerName: 'SOME RANDOM'});
$scope.gridOptions.api.setColumnDefs(columnDefs);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
