I am looking to allow my users to change the column header names to whatever they would like in ag-grid. I am using the javascript implementation.
I could not find an example of anyone doing this on stack overflow or the documentation, my initial idea is to create a new header component and add my own code to handle it that way via the ag grid api.
I found this page https://www.ag-grid.com/javascript-data-grid/component-header/
It does not appear to have the default header component as an example. And I would like to use that to start off with... So my question is either:
This is how the default header template looks like. You could use it as a base to define your custom header component. Instead of those ref attributes, you need to inline component parameters, bind events etc. as shown in the example of header components.
<div class="ag-cell-label-container" role="presentation">
<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button" aria-hidden="true"></span>
<div ref="eLabel" class="ag-header-cell-label" role="presentation">
<span ref="eText" class="ag-header-cell-text"></span>
<span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
<span ref="eSortOrder" class="ag-header-icon ag-header-label-icon ag-sort-order" aria-hidden="true"></span>
<span ref="eSortAsc" class="ag-header-icon ag-header-label-icon ag-sort-ascending-icon" aria-hidden="true"></span>
<span ref="eSortDesc" class="ag-header-icon ag-header-label-icon ag-sort-descending-icon" aria-hidden="true"></span>
<span ref="eSortNone" class="ag-header-icon ag-header-label-icon ag-sort-none-icon" aria-hidden="true"></span>
</div>
</div>
Source: https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates
I allow the user to edit column names in my table editor application which is based on AG Grid Community.
Table Editor App: https://eviltester.github.io/grid-table-editor/
I do this using a custom header.
The source for my custom header is here: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
I based my header on the header templates from AG Grid documentation:
https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates
My header is:
<div class="customHeaderTop">
<div class="customFilterMenuButton">
<i class="ag-icon ag-icon-filter"></i>
</div>
<div class="customHeaderLabel">${this.agParams.displayName}</div>
<div class="customSort">
<span class="customSortDownLabel inactive">
<i class="ag-icon ag-icon-desc"></i>
</span>
<span class="customSortUpLabel inactive">
<i class="ag-icon ag-icon-asc"></i>
</span>
<span class="customSortRemoveLabel inactive">
<i class="ag-icon ag-icon-cancel"></i>
</span>
</div>
</div>
<div class="headerbuttons">
<span title="add left" onclick="addNeighbourColumnId(-1,'${this.agParams.column.colId}')">[<+]</span>
<span title="rename" onclick="renameColId('${this.agParams.column.colId}')">[~]</span>
<span title="delete" onclick="deleteColId('${this.agParams.column.colId}')">[x]</span>
<span title="duplicate" onclick="duplicateColumnId(1,'${this.agParams.column.colId}')">[+=]</span>
<span title="add right" onclick="addNeighbourColumnId(1,'${this.agParams.column.colId}')">[+>]</span>
</div>
Renaming the column itself can be done using the API:
renameColId(id,name){
var colDefs = this.gridApi.getColumnDefs();
var editColDef;
colDefs.forEach(colDef =>{
if(colDef.colId==id){
editColDef = colDef;
}
})
editColDef.headerName = name;
this.gridApi.setColumnDefs(colDefs);
}