Estoy tratando de hacer que los encabezados de mi tabla AgGrid tengan 2 líneas: la primera línea es el nombre, la segunda línea es la unidad. Quiero que el tamaño de fuente de la segunda línea sea más pequeño que el de la primera.
Intenté buscar esto pero no pude encontrar la respuesta. Encontré este blog sobre cómo diseñar el encabezado y seguí esta respuesta para que mis encabezados estén en 2 líneas. Pero ninguno de ellos muestra cómo mostrar encabezados de 2 líneas y diseñar cada línea de forma independiente. Agradezco cualquier ayuda.
Hice esto en mi Markdown Editor usando un encabezado personalizado y teniendo cada línea como un div separado.
El código de mi encabezado personalizado está aquí: https://github.com/eviltester/grid-table-editor/blob/master/customHeader.js
El HTML básico para el encabezado era:
this.eGui.innerHTML = ` <div class="customHeaderTop"> <div class="customFilterMenuButton"> <i class="ag-icon ag-icon-filter"></i> </div> <div class="customHeaderLabel">${this.agParams.displayName}</div> </div> <div class="headerbuttons"> <span title="add left">[<+]</span> <span title="rename">[~]</span> <span title="delete">[x]</span> <span title="duplicate">[+=]</span> <span title="add right">[+>]</span> </div> `;Los componentes de encabezado personalizados se describen aquí:
https://www.ag-grid.com/javascript-data-grid/component-header/
También es posible agregar una plantilla de encabezado si los requisitos de representación son simples.
Esto se trata en la publicación del blog de AG Grid https://blog.ag-grid.com/adding-hyperlinks-to-the-grid/
{ minWidth: 150, field: 'athlete', headerComponentParams: { template: '<div class="ag-cell-label-container" role="presentation">' + ' <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' + ' <div ref="eLabel" class="ag-header-cell-label" role="presentation">' + ' <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>' + ' <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' + ' <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' + ' <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' + ' <a href="https://ag-grid.com" target="_blank"> <span ref="eText" class="ag-header-cell-text" role="columnheader"></span></a>' + ' <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' + ' </div>' + '</div>' }, }