Custom client side filters in Table component

App Building
1

The table component currently offers many options to filter by (is/isnot/includes/etc)
Is there an option to provide a custom filter to it?

Ex. I have a search bar -> On change I want to get the filtered rows from another js script ([here])(GitHub - DeuxHuitHuit/quicksearch: A jQuery plugin for searching through DOM Elements quickly) -> set the response from this script as filters to the table?

2

Hi @Rahul_Badenkal Thanks for reaching out!

You can't currently customize the options in the filter UI, but you can use components and the setFilterStack api to create custom filters.

For example, I've created a sample app where I only want to expose a couple of filter options to my end users:

  1. First, remove the filter button from the toolbar since we will want to create our own custom filter UI

2. Create a form or group of components that your end users can interact with to filter your table data:

3. Set up a setFilterStack event that will use the component's data to filter the table client side:

Now, my end users have a handful of custom options for filtering the Role, Name, and Enabled columns:

3

Thanks for the reply @Tess .
I wanted a more customised view of the filters (checkboxes, dropdown, etc), so i created a trasnformer that took the table data and the filter value as inputs and returned a list of ids after applying the filters

I then applied a filter on table of type "is any of" transformer.value

1 Like