AG-Grid：如何隐藏列标题名称但在过滤器中包含名称答案

【问题标题】：AG-Grid: How to hide column header name but include name in filterAG-Grid：如何隐藏列标题名称但在过滤器中包含名称
【发布时间】：2022-01-17 08:58:03
【问题描述】：

我有一个用例，我需要列标题名称应该为空。但是，如果用户单击过滤器，则名称应显示为过滤依据。例如请看截图。

那么：

我尝试了this，但它不起作用。

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

您可以自定义列的标题渲染器 (docs)，使其不包含标题名称。

在列定义中，将标题模板设置为：

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">' +
/* Leave this out ->
      '    <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
*/
      '    <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>' +
      '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
      '  </div>' +
      '</div>'
  }

【讨论】：