如何在Ag-grid中隐藏过滤器图标？

Question

我正在尝试删除ag-grid中的过滤器图标，同时保留过滤框

现在，我正在尝试使用纯CSS来隐藏图标，该图标在webpack中只会添加 aria-hidden="true"

我试过的CSS

* /deep/ div.ag-floating-filter-button{
    display:none !important;   
}

尝试删除此图标

我要么想使用完全删除网格图标，要么想columnsAPI通过CSS找到一种方法来真正禁用该图标。

Answer 1

文档中的此页面描述了如何更改图标。我建议您在gridOptions或CSS文件中将它们更改为空字符串。这是一个带有plunker的gridOptions方式：

<ag-grid-angular
    ...
    [icons]="icons"
    ...
    ></ag-grid-angular>


this.icons = {
  filter: ' '
}

Answer 2

使用floatFilter并检查floatFilterComponentParams。您可以通过在gridOptions的columnDefs中添加此按钮来隐藏过滤器按钮，如下所示

gridOptions = {
  floatingFilter: true
  columnDefs:[{
    ...
    suppressMenu: true,
    floatingFilterComponentParams: {suppressFilterButton:true}
    ...
  }]
}