Filtering values by their class

In this article we will demonstrate how to leverage a filterValueGetter to filter rows on our grid:

How it works

We first create our metaData - this is a complex object, which has a style key and a value key:

const sandwichData = [
  {
    typeOfSandwich: {
      style: 'Red',
      value: 'Tuna Melt',
    },
  },
  {
    typeOfSandwich: {
      style: 'Yellow',
      value: 'Cheese Panini',
    },
  },
... more sandwich objects ...
];

Then in our column definitions, we simply use a valueGetter to display our value and cellClassRules to style the row:

  columnDefs: [
    {
      headerName: 'Type of Sandwich',
      valueGetter: (params) => params.data.typeOfSandwich.value,
      cellClassRules: {
        redRow: (params) => params.data.typeOfSandwich.style === 'Red',
        yellowRow: (params) => params.data.typeOfSandwich.style === 'Yellow',
        greenRow: (params) => params.data.typeOfSandwich.style === 'Green',
      },
    },
  ],

Finally, in our filterValueGetter we set the values we want it to be filtered by:

  columnDefs: [
    {
     filterValueGetter: (params) => params.data.typeOfSandwich.style
    },
  ],

You can find the example with all the code here