What is the best way to apply wildcard filtering to a MatTableDataSource?

Question

What is the best way to apply wildcard filtering to a MatTableDataSource?

I found inspiration in the Table with filtering example on Angular Material's website, which can be accessed at https://material.angular.io/components/table/examples

My goal is to enable users to search using wildcards. For instance, I want to use a % as a wildcard character.

This is what I came up with:

    const filterValue = (event.target as HTMLInputElement).value;

    let filterArray = filterValue.trim().toLowerCase().split("%");

    for (let fil of filterArray) {
      //Although I understand that this line below won't work, since it will simply replace the filter with each iteration, I include it here for demonstration purposes
      this.tableData.filter = fil;
      
    }

Therefore, if the user inputs one%two into the input field, I expect the filter to locate table rows where both "one" and "two" appear somewhere within the row.

I have experimented with various code iterations, but none seem to provide the desired outcome. Do you have any suggestions on how I can successfully implement this functionality?

angular typescript angular-material

Answer 1

Answer №1

To implement a custom filter logic, you will need to modify the default behavior of this.dataSource.filterPredicate in the following manner:

constructor() {
    this.dataSource.filterPredicate = ((data, filters) => {
      let match = false;
      const filtersList = JSON.parse(filters);

      filtersList.forEach(filterObj => {
        match =
          match || !filterObj ||
          Object.values(data)
            .map(t => t.toLocaleString().toLocaleLowerCase())
            .includes(filterObj);
      });
      return match;
    }) as (PeriodicElement, string) => boolean;
  }

In your applyFilter method, ensure that you pass an array to the filterPredicate using JSON.stringify(filterArray); like so:

applyFilter(filterValue: KeyboardEvent) {
    let filterArray = (filterValue.target as any).value
      .trim()
      .toLowerCase()
      .split('%');
    this.dataSource.filter = JSON.stringify(filterArray);
  }

You can find a complete working example that I created for you here.

https://i.sstatic.net/HREzy.png

Answer 2

To implement a custom filter logic, you will need to modify the default behavior of this.dataSource.filterPredicate in the following manner:

constructor() {
    this.dataSource.filterPredicate = ((data, filters) => {
      let match = false;
      const filtersList = JSON.parse(filters);

      filtersList.forEach(filterObj => {
        match =
          match || !filterObj ||
          Object.values(data)
            .map(t => t.toLocaleString().toLocaleLowerCase())
            .includes(filterObj);
      });
      return match;
    }) as (PeriodicElement, string) => boolean;
  }

In your applyFilter method, ensure that you pass an array to the filterPredicate using JSON.stringify(filterArray); like so:

applyFilter(filterValue: KeyboardEvent) {
    let filterArray = (filterValue.target as any).value
      .trim()
      .toLowerCase()
      .split('%');
    this.dataSource.filter = JSON.stringify(filterArray);
  }

You can find a complete working example that I created for you here.

https://i.sstatic.net/HREzy.png

Answer 3

Answer №2

By implementing the code below in my applyFilter() method, I was able to successfully achieve my goal:

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;

    let filterArray = filterValue.trim().toLowerCase().split("%");

    let filteredData = [];

    // Iterate through each word in the filter and add matching arrays from the dataset to filteredData
    for (let str of filterArray) {
      filteredData.push(
        this.data.filter((o) =>
          Object.keys(o).some((k) => String(o[k]).toLowerCase().includes(str))
        )
      );
    }

    // Narrow down final dataset with array items that appear in all arrays produced by each search term
    filteredData = filteredData.reduce((a, b) =>
      a.filter((c) => b.includes(c))
    );

    this.tableData.data = filteredData;
  }

The solution I came up with was influenced by insights gathered from the following questions:

Filter array of objects based on property values
Calculating intersection of multiple arrays in JavaScript

Answer 4

By implementing the code below in my applyFilter() method, I was able to successfully achieve my goal:

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;

    let filterArray = filterValue.trim().toLowerCase().split("%");

    let filteredData = [];

    // Iterate through each word in the filter and add matching arrays from the dataset to filteredData
    for (let str of filterArray) {
      filteredData.push(
        this.data.filter((o) =>
          Object.keys(o).some((k) => String(o[k]).toLowerCase().includes(str))
        )
      );
    }

    // Narrow down final dataset with array items that appear in all arrays produced by each search term
    filteredData = filteredData.reduce((a, b) =>
      a.filter((c) => b.includes(c))
    );

    this.tableData.data = filteredData;
  }

The solution I came up with was influenced by insights gathered from the following questions:

Filter array of objects based on property values
Calculating intersection of multiple arrays in JavaScript

What is the best way to apply wildcard filtering to a MatTableDataSource?

Answer №1

Answer №2

Similar questions

What is the best way to disable a submit button based on form validity in Angular 4 with ng-content?

Looking to transform a psql query into typeorm syntax

How can Spring Boot be used to format time and save it in the database using the HH:mm format instead of the default HH:mm:ss format?

The Environment variable in React Native is not functioning when utilizing TypeScript

Error: Value Loop Detected in AngularFire Document ID

What is the most efficient method to retrieve an API in Angular?

Arranging an array of arrays based on the mm/dd/yyyy date field

Having difficulty resolving all parameters for the component: (?, [object Object]) in the Jasmine component Unit Test

Steps to establish a maximum font size for my buttons

How to stop a form from being cleared when a button is clicked in Angular 2

Install a MEAN Stack application on the server of my choosing

Encountering problem with '@datadog/browser-rum' compilation related to the 'allowedTracingOrigins' attribute

Issues with Firebase Cloud Messaging functionality in Angular 10 when in production mode

Calculate the variance between two variables

Ways to effectively implement a function type specified in an interface

Ionic Angular encountered an unexpected 'ERROR' without any detailed explanation or logging

Obtain the current state of an Angular Material radio button that has been selected

Is there a way to activate the final form when submitted?

What are the steps to incorporate a type-safe builder using phantom types in TypeScript?

Ensure the clarity tabs labels have the padding-left CSS property added