除非启用浮动过滤器,否则不会显示Ag-Grid过滤器

时间:2020-02-28 21:06:04

标签: reactjs ag-grid ag-grid-react

我正在使用ag-grid构建网格并做出反应,我试图向文本网格中添加文本过滤器,但是该过滤器未显示在网格上。如果我打开浮动过滤器,则该过滤器在那里但不定期。

这是代码

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>
    );
  }
}

网格没有过滤器,看起来像这样:

Grid

如何获取打开过滤器以显示的过滤器图标?

2 个答案:

答案 0 :(得分:1)

我解决了这个问题,为了使过滤器出现,我必须设置网格选项enableFilter: true。我不知道这一点,因为它在文档中从未提到过。

答案 1 :(得分:-1)

在 gridOptions 中设置 enableFilter: true

相关问题