Disable multiple column filter in Ag Grid

Question

How can we enable only single column filter at a time?

In the following code we can apply multiple column filter but I want to allow only one filter and reset all other previous filters.

'use strict';

import React, { useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

const GridExample = () => {
  const [gridApi, setGridApi] = useState(null);
  const [gridColumnApi, setGridColumnApi] = useState(null);
  const [rowData, setRowData] = useState(null);

  const onGridReady = (params) => {
    setGridApi(params.api);
    setGridColumnApi(params.columnApi);

    const updateData = (data) => {
      setRowData(data);
    };

    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => updateData(data));
  };

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div
        id="myGrid"
        style={{
          height: '100%',
          width: '100%',
        }}
        className="ag-theme-alpine"
      >
        <AgGridReact
          defaultColDef={{
            flex: 1,
            minWidth: 150,
            filter: true,
          }}
          onGridReady={onGridReady}
          rowData={rowData}
        >
          <AgGridColumn field="athlete" />
          <AgGridColumn
            field="age"
            filter="agNumberColumnFilter"
            maxWidth={100}
          />
          <AgGridColumn field="country" />
          <AgGridColumn field="year" maxWidth={100} />
          <AgGridColumn
            field="date"
            filter="agDateColumnFilter"
            filterParams={filterParams}
          />
          <AgGridColumn field="sport" />
          <AgGridColumn field="gold" filter="agNumberColumnFilter" />
          <AgGridColumn field="silver" filter="agNumberColumnFilter" />
          <AgGridColumn field="bronze" filter="agNumberColumnFilter" />
          <AgGridColumn field="total" filter={false} />
        </AgGridReact>
      </div>
    </div>
  );
};

var filterParams = {
  comparator: function (filterLocalDateAtMidnight, cellValue) {
    var dateAsString = cellValue;
    if (dateAsString == null) return -1;
    var dateParts = dateAsString.split('/');
    var cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0])
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
  },
  browserDatePicker: true,
};

render(<GridExample></GridExample>, document.querySelector('#root'));

Here you will get the full ag grid example. https://www.ag-grid.com/react-grid/filtering/#example-simple-filters

Look at the attached image for your reference.

Help me to apply this logic. Thanks!

Austin Schrader Austin Schrader · Accepted Answer · 2021-07-09T18:02:50

You could attach an onClick handler to all AgGridColumns that resets all previous filters.

function resetFilters() {
    gridOptions.api.setFilterModel(null);
}

<AgGridColumn onClick={resetFilters} field="bronze" filter="agNumberColumnFilter" />

Here's the documentation for that reset filters method: https://www.ag-grid.com/javascript-grid/filter-api/#reset-all-filters

Disable multiple column filter in Ag Grid

1 Answers