The Advanced Filter Component helps you filter a datatable or datalist based on specific properties and relational data. You can use up to 6 levels of relational filtering.
The whitelist is a feature that lets you choose which properties should be shown on the left-hand side (LHS) of the filter. This includes both direct properties and properties from related data.
How to use the whitelist
- Go to the Property Whitelist section in the component options.
- Enter the properties you want to see in the LHS field and separate them with a comma (,).
The properties you enter should have the same format as the dataAPI (camelCase). You can read more information on this topic here: Getting started with the data API.
For now, here is a TLDR:
- Go to the selected model
- Check the
DATABASE NAMEcolumn for the property. - Replace each character after the underscore (_) with a capital letter and remove the underscore. So, for example: if the property is
my_property_name, it becomesmyPropertyName.
If you want to include properties from related data, follow this format:
Let's say we have a model called shoppingCart andshoppingCart has many shopItems. To include the properties of shopItems in the whitelist, use the following format:
shopItems.name
The blacklist is the exact opposite of the whitelist. It allows you to specify which properties should not be shown on the LHS of the filter.
Occassionally you wish to use the filter that the user has defined in your actions. For example, when exporting filtered data. Here's how to do it:
- Drop a form on your page if not already present.
- Place the Custom Filter Component in the form. The 'Action Variable' picker should display in the options panel of the component.
- Select/Create an action variable.
- To use the filter, you still have to parse it using the block
Parse JSONwhich can be found here. - You can now use the filter in your actions!
You can create feature requests in the Issues section of the original repository, which can be found here
Everybody can contribute to this component. If you wish to help maintain this project, please do so by creating a pull request.


