custom filter ag grid react

Question

I was trying to implement a custom DropDown filter in ag grid using React. The link I followed is link

I was able to create the filter, however the filter doesnot appear by default. As a user, we need to click the 3 arrow icon next to the column header and then the filter appears.

Is there a way to display the custom filter dropDown by default?

Answer 1

I hope Floating filters can help you here.

Check this example in ag-grid documentation

      filter: "agNumberColumnFilter",
      floatingFilterComponent: "sliderFloatingFilter",
      floatingFilterComponentParams: {
        maxValue: 5,
        suppressFilterButton: true
      },

The example shows sliderFloatingFilter, to make it a dropdown filter, I think you need to create custom component for it.

Have a look at how ag-grid team has made TextFloatingFilterComp, DateFloatingFilterComp, NumberFloatingFilterComp etc. on GitHub code

Hope this helps.

Answer 2

I achieved dropdown/enum filter using this column configuration. I my case, I was trying to add a boolean filter.

Here is complete example

https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599

const getEnumColumnParams = (enumMap) => {
  return {
    cellRenderer: (params) => {
      if (!params.data) return "";
      const { value } = params;
      return enumMap[value];
    },
    filterParams: {
      buttons: ['reset', 'apply'],
      closeOnApply: true,
      filterOptions: [
        "empty",
        ...Object.keys(enumMap).map(key => {
          return {
            displayKey: key,
            displayName: enumMap[key],
            test: function (filterValue, cellValue) {
              return cellValue === true;
            },
            hideFilterInput: true,
          };
        })
      ],
      suppressAndOrCondition: true,
    },
  };
};

const boolEnum = {
  true: 'Yes',
  false: 'No'
};

const colorEnum = {
  '#ff00000': 'Red',
  '#00ff00': 'Green',
  '#0000ff': 'Blue',
};

const columnDefs = [
  {
    field: 'available',
    ...getEnumColumnParams(boolEnum),
  },
  {
    field: 'color',
    ...getEnumColumnParams(colorEnum),
  }
];

Or you can create column types and assign type: 'boolColumn' etc in column definition like I did in above codesandbox example