How can I hide the filter icon in Ag-grid?

Question

I'm trying to remove the filter icon in ag-grid whilst keeping the filtering box

Right now I'm trying to use pure css to hide the icon which in webpack just adds the aria-hidden="true"

CSS I've tried

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

Trying to remove this icon

I either want to completely remove the grid icon using columnsAPI or find a way with CSS to disable the icon truely.

Chancellorship

Answer 1

This page in the docs describes how to change the icons. I suggest that you change them to an empty string, either in the gridOptions or in a css file. here is the gridOptions way with a plunker:

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


this.icons = {
  filter: ' '
}

Purulence

Answer 2

Use floatingFilter and check floatingFilterComponentParams. You can hide the filter button by adding this in columnDefs in gridOptions like below

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

Cryometer

Answer 3

Inside of your 'columnDef' array, you should add floatingFilterComponentParams: {suppressFilterButton: true}. Also if you want to remove menu button at top of your column, you can simply create an 'icons' array and bind it to the ag-grid as an option.

What i mean:

columnDef: [
    ...
    floatingFilterComponentParams: { suppressFilterButton: true }
]

and to remove icons:

icons = {
    menu: ' ',
    filter: ' ' //optional, we have already disabled it above.
}

then

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

Liebig

This actually answers the OP's question specifically - the actual marked answer is a bit of a convoluted way to remove the functionality. – Ronni

Answer 4

You can deactivate the filter icon by two ways.

1.) First way: global dactivation

Add enableFilter: false to you gridoptions.

gridOptions = {
  // turn off filtering
  enableFilter: true,
  ...
  columnDefs: [
    ...    
  ]
}

2.) Second way: disable per column

Add suppressFilter: true to column definition to turn off filter for this column.

gridOptions = {
    // turn on filtering
    enableFilter: true,
    ...
    columnDefs: [
        {headerName: "Athlete", field: "athlete", filter: "agTextColumnFilter"}, // text filter
        {headerName: "Age",     field: "age",     filter: "agNumberColumnFilter"}, // number filter
        {headerName: "Sport",   field: "sport",   suppressFilter: true} // NO filter
    ]
}

For more information read official ag-grid documentation.

Binny

I want the text box filter, I don't want that little funnel icon to exist at all on the page – Chancellorship

It would be really nice if you can remove your comment // turn off filtering or change enableFilter: false from your first way of implementation. Such misleading it is. Also this should be accepted answer. – Scavenger

Answer 5

For me the following css worked:

.ag-icon-filter {display: none;}

Soar

.ag-filter-icon { display: none; } is better – Hamid

Answer 6

We have to use the below two properties to disable icons

suppressMenu: true,
floatingFilterComponentParams: { suppressFilterButton: true }

const defaultColDef = {
        sortable: true,
        editable: false,
        flex: 1,
        filter: true,
        floatingFilter: true,
        suppressMenu: true,
        floatingFilterComponentParams: { suppressFilterButton: true },
    };

 <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
      defaultColDef={defaultColDef}
      onGridReady={onGridReady}
 ></AgGridReact>

Som

Worked for me too in React Grid – Acid

Answer 7

To hide the filter icon on a particular column, add:

menuTabs: []

to the column definition.

Zito

Answer 8

To remove all filter icons but still keep the default filter functionality in ag-grid, you can use the following configuration for your column definitions. This example shows how to configure a column to use a text filter without displaying the filter icon:

{ 
  headerName: 'field name', 
  field: 'field', 
  flex: 12, 
  filter: 'agTextColumnFilter',
  floatingFilter: true,
  suppressMenu: true, 
  sortable: true, 
  suppressHeaderFilterButton: true,
  floatingFilterComponentParams: { suppressFilterButton: true },
  filterParams: {
    textMatcher: ({ value, filterText }: { value: string, filterText: string }) => value.toLowerCase().includes(filterText.toLowerCase()),
    filterOptions: ['contains'], 
    suppressAndOrCondition: true,
    suppressFilterButton: true 
  }
}

Explanation:

• suppressMenu: true: This hides the filter menu icon.
• suppressHeaderFilterButton: true: This hides the filter button in the header.
• floatingFilterComponentParams: { suppressFilterButton: true }: This hides the floating filter button.
• filterParams.suppressFilterButton: true: This hides the filter button within the filter component.

With these settings, the filter functionality remains active, but all filter icons are hidden from the UI.

Fascinate

Answer 9

columnDefs: [ {headerName: "Athlete", field: "athlete", filter: "agTextColumnFilter",floatingFilterComponentParams: {suppressFilterButton:true}}]

Pliocene

You don't even close your first bracket, besides it's better to explain a bit instead of just a line of code. – Rothenberg