Estoy buscando permitir que mis usuarios cambien los nombres de los encabezados de las columnas a lo que quieran en ag-grid. Estoy usando la implementación de javascript.
No pude encontrar un ejemplo de alguien que hiciera esto en el desbordamiento de pila o la documentación, mi idea inicial es crear un nuevo componente de encabezado y agregar mi propio código para manejarlo de esa manera a través de la api de cuadrícula agrícola.
Encontré esta página https://www.ag-grid.com/javascript-data-grid/component-header/
No parece tener el componente de encabezado predeterminado como ejemplo. Y me gustaría usar eso para empezar... Así que mi pregunta es:
Así es como se ve la plantilla de encabezado predeterminada. Puede usarlo como base para definir su componente de encabezado personalizado. En lugar de esos atributos de ref , debe incorporar parámetros de componentes, vincular eventos, etc., como se muestra en el ejemplo de componentes de encabezado.
<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>Fuente: https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates
Permito que el usuario edite los nombres de las columnas en mi aplicación de edición de tablas, que se basa en AG Grid Community.
Aplicación de edición de tablas: https://eviltester.github.io/grid-table-editor/
Hago esto usando un encabezado personalizado.
La fuente de mi encabezado personalizado está aquí: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
Basé mi encabezado en las plantillas de encabezado de la documentación de AG Grid:
https://www.ag-grid.com/javascript-data-grid/column-headers/#header-templates
Mi encabezado es:
<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>El cambio de nombre de la columna en sí se puede hacer usando la 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); }