Custom filter options in Ag Grid - Angular

Creating custom filter options Ag Grid

---

Attention

This article signifies custom filtering for each one of filter options in Ag grid. Before starting if you have no idea about Ag grid you can click here and move to the official web site.

Ag grid includes default and robust filtering options already. So you can filter each column separately using one of the options. However sometimes you may not want to filter the data as default options. Or the another circumstance might be like that the data you have doesn't match the filtering options.

As you know the currency formats might be change according to countries or regions. Some of them use comma and the others use point as separator in different digits.

Besides the situation above I just have encountered another problem nowadays. The data includes string values instead integer or float and currency format like #,###.##. In this situation neither text filter option nor number filter option is proper alone. Sounds like weird doesn't it ? So that I just wanted to share my this story.

The data in the picture above has two columns and the first column includes currency format. To filter the data like float number without comma I've modified filter options for each number filter option like following.

public columnDefs: ColDef[] = [
    {
      field: 'sale',
      headerName: 'Sale ($)',
      filter: 'agNumberColumnFilter',
      filterParams: {
        filterOptions: [
          {
            displayKey: 'equals',
            displayName: 'Equals',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null ||
                parseInt(valueCase) == parseInt(filterValue)
              );
            },
          },
          {
            displayKey: 'notEqual',
            displayName: 'Not equal',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              cellValue == null || parseInt(valueCase) != parseInt(filterValue);
            },
          },
          {
            displayKey: 'greaterThan',
            displayName: 'Greater than',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null || parseInt(valueCase) > parseInt(filterValue)
              );
            },
          },
          {
            displayKey: 'lessThans',
            displayName: 'Less than',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null || parseInt(valueCase) < parseInt(filterValue)
              );
            },
          },
          {
            displayKey: 'greaterThanOrEqual',
            displayName: 'Greater than or equals',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null ||
                parseInt(valueCase) == parseInt(filterValue)
              );
            },
          },
          {
            displayKey: 'lessThansOrEqual',
            displayName: 'Less than or equals',
            predicate: ([filterValue]: any, cellValue: string) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null || parseInt(valueCase) < parseInt(filterValue)
              );
            },
          },
          {
            displayKey: 'inRange',
            displayName: 'In range',
            predicate: ([fv1, fv2]: any, cellValue: any) => {
              var valueCase: any = '';
              if (cellValue.indexOf(',') != 0) {
                valueCase = cellValue.replace(/,/g, '');
              }
              return (
                cellValue == null ||
                (parseInt(fv1) < parseInt(valueCase) &&
                  parseInt(fv2) > parseInt(valueCase))
              );
            },
            numberOfInputs: 2,
          },
        ],
      },
    },
    {
      field: 'product',
      headerName: 'Product',
      filter: 'agTextColumnFilter',
    },
  ];

The other definitions like rowdata, defaultColDef, etc. as usual. I would like to point out that for each option the data was saved from comma. You can also add more custom filter using this way. If you use export options you are able to edit data using filterOptions like this which doesn't affect the export.

Note: You can find the entire project here .

Thank you for reading.