自定义过滤器 ag 网格反应

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