Edit headers in Ag-grid

Question

Ag-grid gives support to edit column cells. How do I edit column headers in ag-grid?

Answer 1

It's there on documentations itself. Link: Updating Column Definitions

After the grid has been initialised it may be necessary to update the column definition. It is important to understand that when a column is created it is assigned a copy of the column definition defined in the GridOptions. For this reason it is necessary to obtain the column definition directly from the column.

The following example shows how to update a column header name after the grid has been initialised. As we want to update the header name immediately we explicitly invoke refreshHeader() via the Grid API.

 // get a reference to the column var col = gridOptions.columnApi.getColumn("colId"); // obtain the column definition from the column var colDef = col.getColDef(); // update the header name colDef.headerName = "New Header"; // the column is now updated. to reflect the header change, get the grid refresh the header gridOptions.api.refreshHeader();

Answer 2

A. Set header before init:

var columnDefinition = [{headerName: 'yourHeaderName', field:'fieldNameFromDataSource'}]//define
gridOptions = {columnDefs: columnDefinition}

B. Change header after rendered:

var col = gridOptions.columnApi.getColumn('fieldName');
var colDef = col.getColDef();
colDef.headerName = 'newHeaderName';
gridOptions.api.refreshHeader();