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

Question

我想让过滤器图标在 Ag-grid 中永久可见。当前的行为是，只有当我将鼠标悬停在列标题上时，列中的筛选器图标才可见。

这是我正在使用的列定义示例。

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

我怎样才能达到这个结果？

Answer 1

你可以用一个小 CSS 来实现它。不用考虑ColDef.

看看我创建的插件：Built-In Filters Icon - show by default

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

Answer 2

正确答案在这里设置suppressMenuHide在gridOptions或直接在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.

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

How to make the search icon permanently visible in the column in ag-grid?

javascript

angularjs

ag-grid