Filter

Supported column types

The filter is natively working for the amount, number, select, status and string.

Custom support

It's possible to activate the filter with the searchValue callback. The returned value must be a string or a number.

const accountsById = {
  '411A': { label: 'Client A' }
  '411B': { label: 'Client B' }
};

const config = {
  columns: [
    {
      key: 'account_id',
      options: [
        { label: 'Client A', value: '411A' },
        { label: 'Client B', value: '411B' }
      ],
      searchValue: (row) => accounts[row.account_id]?.label
    }
  ],
  ...
}

FilterComparator

You can define the matching mode among the following list startsBy, endsBy, equals or contains (default).

You can also define a custom function comparator (search:string, value: string): boolean

const config = {
  columns: [
    {
      key: 'account_number',
      filterComparator: 'startsBy',
      ...
    }
  ]
}

Cheatsheet

Number and amount

When filtering on a specific column of type number or amount, the user can use the following format to filter.

Search	Effect	Match	Dont match
10	Returns all values starting by 10.	-105 -10 10 105	-610 5.10
-10	Returns all negative values starting by 10.	-105 -10	10 105 -610 5.10
+10	Returns all positive values starting by 10.	10 105	-105 -10 -610 5.10
0	Returns all values starting by 0.	0 -0.50 0.01	1.00
.2	Returns all values with decimals starting by 2. This includes round values if the search is .0.	0.2 0.21 -6.25	50.1 0.10
.01	Returns all values with decimals starting by 01. This includes round values if the search is .00.	0.01 -7.01	0.11
12.33	Returns all values matching exactly 12.33.	12.33 -12.33	Anything else