如何使搜索图标在 ag-grid 的列中永久可见？

Question

I want to make the filter icon visible permanently in the Ag-grid. The current behaviour is such that the filter icons in the columns only become visible when I hover across the column headings .

This is an example of the column definition that I am using.

this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]

How can I achieve this result?

Answer 1

The correct answer is here to set suppressMenuHide in gridOptions or directly on HTML [suppressMenuHide]="true"

suppressMenuHide Set to true to always show the column menu button, rather than only showing when the mouse is over the column header.

Answer 2

You can achieve it with just a small CSS. No need to consider ColDef .

Have a look at the plunk I've created: Built-In Filters Icon - show by default

.ag-header-icon.ag-header-cell-menu-button {
  opacity: 1 !important;
}