'Ag-Grid filter does not show up unless floating filter is on

I am building a grid with ag-grid and react I am trying to add a text filter to my grid but the filter does not show up on the grid. If I turn on floating filter it is there but not regularly.

Here is the code

type Props = {
  gridData: Array<any>;
}

type State = {}

class filteredGrid extends PureComponent<Props, State> {
  private gridOptions = {};
  static propsType = {
    gridData: ImmutablePropTypes.list
  }
  constructor(props) {
    super(props);
    gridOptions = {
      defaultColDef: { filter: true },
      columnDefs: [
        { headerName: "Location", field: 'location', filter: "agTextColumnFilter" },
      ],
      suppressMenuHide: true,
      suppressMovableColumns: true,
      enableSorting: true,
      rowSelection: 'single',
      rowDeselection: true,
      onGridReady: debounce(function (params) {
        params.api.sizeColumnsToFit();
        window.addEventListener('resize', function () {
          setTimeout(function () {
            params.api.sizeColumnsToFit();
          });
        });
      }),
      pagination: true,
      paginationPageSize: 10,
      rowClass: 'grid-row',
      gridAutoHeight: true,
      headerHeight: 50,
      rowHeight: 50,
      overlayNoRowsTemplate: '<span>No Data</span>',
    };
  }

  render(): ReactNode {
    const { gridData } = this.props;
    return (
      <div>
        <div className="ag-theme-material">
          <AgGridReact
            gridOptions={this.gridOptions}
            rowData={gridData}
          />
        </div>
      </div>
    );
  }
}

The grid has no filter and looks like this:

How can I get the filter icon that opens the filter to show up?

Solution 1:^[1]

I had this problem today and my issue was having suppressMenu: true in my default column definition.

Solution 2:^[2]

I have declared in filter: true in defaultColDef but the filer column not enabled in the grid after that I have directly declared enableFilter={true} with the <AgGridReact> then the filter is enabled.

Error:

const defaultColDef = useMemo(() => {
        return {
            cellStyle: { 
               'border-right': '1px dotted',
               'padding-left': 0, 
                textAlign: 'center' 
            },
            editable: false,
            filter: true,
            flex: 1,
            floatingFilter: true,
            floatingFilterComponentParams: { suppressFilterButton: true },
            resizable: true,
            sortable: true,
            suppressMenu: true
        }
    }, [])


<AgGridReact
  defaultColDef={defaultColDef}
</AgGridReact>

Solution:

<AgGridReact
  enableFilter={true}
  defaultColDef={defaultColDef}
</AgGridReact>

Solution 3:^[3]

set enableFilter: true in gridOptions

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	dichohecho
Solution 2	KARTHIKEYAN.A
Solution 3	iyerwal

'Ag-Grid filter does not show up unless floating filter is on

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]