How to allow user to change column name's in AG-GRID?-CodePudding

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:

Does anyone know of an example or better method which achieves what I am trying to do? Or
Would anyone please be able to point me to where I could find the code of the default ag grid header component, which I can use to start off with, and alter using the example given in the documentation linked above.

CodePudding user response：

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  role="presentation">
    <span ref="eMenu"  aria-hidden="true"></span>
    <div ref="eLabel"  role="presentation">
        <span ref="eText" ></span>
        <span ref="eFilter"  aria-hidden="true"></span>
        <span ref="eSortOrder"  aria-hidden="true"></span>
        <span ref="eSortAsc"  aria-hidden="true"></span>
        <span ref="eSortDesc"  aria-hidden="true"></span>
        <span ref="eSortNone"  aria-hidden="true"></span>
    </div>
</div>

Source: https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates

CodePudding user response：

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 >
    <div >
        <i ></i>
    </div>
    <div >${this.agParams.displayName}</div>
    <div >
      <span >
          <i ></i>
      </span>
      <span >
          <i ></i>
      </span>
      <span >
          <i ></i>
      </span>
    </div>
  </div>
  <div >
    <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);
    }