除非打开浮动过滤器，否则不会显示 Ag-Grid 过滤器

Question

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?

Answer 1

I solved the issue, In order to make the filters appear I had to set the grid option enableFilter: true . I did not know this as it was never mentioned in the documentation.

Answer 2

我今天遇到了这个问题，我的问题是我的默认列定义中有suppressMenu: true 。

Answer 3

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>

Answer 4

在 gridOptions 中设置 enableFilter: true