AG-Grid: How to hide column header name but include name in filter

Issue

I have a usecase where I need the column header name should be blank. However, if the user clicks on the filter, then the name should show up as an option to filter by. For example see the screenshots please.

THEN:

I tried this but it does not work.

Solution

You can customize the header renderer (docs) for the column, so that it doesn't include the header name.

In the column definition, set the header template to this:

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>'
  }

Answered By - Josef Bláha