CODEWITHSUNDEEP
javascriptag-grid
jgr0
jgr0

Reputation: 727

Edit headers in Ag-grid

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

Upvotes: 3

Views: 3355

Answers (2)

Nguyễn Trung
Nguyễn Trung

Reputation: 1

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();

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

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();

Upvotes: 1

Related Questions