Mastering ag-grid: Make ag-grid Search for Formatted Value in “Quick Filter”

When it comes to working with ag-grid, one of the most powerful features is the “Quick Filter”. It allows users to quickly search for specific data within the grid. However, by default, the quick filter only searches for exact matches. But what if you want to search for formatted values? For instance, what if you want to search for a specific date range or a specific currency format? This is where things get tricky. In this article, we’ll dive into the world of ag-grid and explore how to make the quick filter search for formatted values.

Understanding the Problem

Before we dive into the solution, let’s first understand the problem. By default, the quick filter in ag-grid searches for exact matches. This means that if you have a column with dates in the format “dd/mm/yyyy” and you want to search for all dates within a specific range, the quick filter won’t be able to find them. Similarly, if you have a column with currency values in the format “$X,XXX.XX” and you want to search for all values within a specific range, the quick filter won’t be able to find them either.

This is because the quick filter is designed to search for exact matches, not formatted values. So, what can we do to overcome this limitation?

The Solution: Using the `filterValueGetter` Property

The solution lies in using the `filterValueGetter` property in ag-grid. This property allows you to specify a function that will be used to get the value to be filtered. By default, ag-grid uses the `getValue` method to get the value to be filtered. However, by using the `filterValueGetter` property, we can override this behavior and specify our own function to get the value to be filtered.

const columnDefs = [
  {
    field: 'date',
    filterValueGetter: params => moment(params.value).format('YYYYMMDD')
  }
];

In the above example, we’re using the `filterValueGetter` property to specify a function that will format the date value as “YYYYMMDD” before passing it to the quick filter. This means that when the user searches for a specific date range, the quick filter will search for the formatted value instead of the original value.

Using the `filterValueGetter` Property with Multiple Columns

But what if you have multiple columns that need to be formatted differently? For instance, what if you have a column with dates and another column with currency values? In this case, you can use the `filterValueGetter` property with multiple columns.

const columnDefs = [
  {
    field: 'date',
    filterValueGetter: params => moment(params.value).format('YYYYMMDD')
  },
  {
    field: 'price',
    filterValueGetter: params => params.value.replace(',', '').replace('$', '')
  }
];

In the above example, we’re using the `filterValueGetter` property to specify different formatting functions for the “date” and “price” columns. This means that when the user searches for a specific date range or a specific price range, the quick filter will use the formatted values to search for matches.

Using the `filterValueGetter` Property with Complex Formatted Values

But what if you have complex formatted values? For instance, what if you have a column with addresses in the format “123 Main St, Anytown, CA 12345”? In this case, you can use the `filterValueGetter` property to extract specific parts of the address before passing it to the quick filter.

const columnDefs = [
  {
    field: 'address',
    filterValueGetter: params => {
      const addressParts = params.value.split(',');
      return addressParts[0].trim() + addressParts[1].trim();
    }
  }
];

In the above example, we’re using the `filterValueGetter` property to extract the street name and city from the address before passing it to the quick filter. This means that when the user searches for a specific address, the quick filter will search for the extracted values instead of the original value.

Best Practices for Using the `filterValueGetter` Property

When using the `filterValueGetter` property, there are some best practices to keep in mind:

• Keep it simple: The `filterValueGetter` function should be simple and fast. Avoid using complex logic or database queries within the function.
• Use caching: If the `filterValueGetter` function is computationally expensive, consider caching the results to improve performance.
• Test thoroughly: Make sure to test the `filterValueGetter` function thoroughly to ensure it’s working as expected.

Conclusion

In this article, we’ve explored how to make ag-grid search for formatted values in the “Quick Filter”. By using the `filterValueGetter` property, we can specify our own functions to get the value to be filtered. This allows us to search for formatted values such as dates, currency values, and addresses. By following the best practices outlined in this article, you can make the most of the `filterValueGetter` property and create a more powerful and flexible filtering experience for your users.

Property	Description
filterValueGetter	A function that returns the value to be filtered
getValue	The default function used by ag-grid to get the value to be filtered

Related Articles

If you’re interested in learning more about ag-grid and its features, check out the following articles:

• Mastering ag-grid: Creating Custom Header Components
• ag-grid vs React Table: A Comprehensive Comparison
• ag-grid Tutorial: Getting Started with ag-grid

We hope you found this article helpful! If you have any questions or comments, please don’t hesitate to reach out.

Frequently Asked Question

Are you tired of struggling with ag-grid search functionality? Don’t worry, we’ve got you covered! Here are some frequently asked questions about making ag-grid search for formatted values in the “quick filter” feature.