Add debounce to filter component on value change

[Guang_Yong_Teng]

• Goal: I have a table that is doing server side querying. it is tagged to to a filter component, when the filter value change(as the user is typing) I would like to add a debounce before triggering the query

• Steps: I tried to add debouce in event handler but found no such section for the filter compoent

• Details:

• Screenshots:
  

  

In this screenshot above, I would like the query to be triggered only 0.5 seconds after user stop typing. But i cant seems to find a way to add a debouce.

• App json export: (here's how to get a json export)

[pyrrho]

Hello @Guang_Yong_Teng and welcome to the forums!

If you need to insert a delay into the query which is tied to user filtering I don't think you will be able to use the OOTB filter. What you can do instead is create a generic text input component and tie that to a JS Query which returns the input value. That query output could then be used in your table's Search Term property (which filters the results for the whole table across all columns).

The trick here would be to trigger the query on the change event of the text input component and run a script with a built in async delay illustrated here:

async function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

async function filterDelay() {
  await delay(500)
await textSearchDelay.trigger()
}

filterDelay();

[Guang_Yong_Teng]

Hello thanks for the suggestion. For the approach you given, is there a way to filter only by certain column label (dynamically) ? I tried to

1. create a select input for user to select the filter column
2. Create a select input for user to select the filter operator
3. Create a text input for user to enter filter value (this is where the debounce will happen)

However, for point 1, I am unable to retrieve the column label to map as choices as the new table component does not expose those value as far as I can find.

[pyrrho]

You can use Object.keys(formatDataAsObject(tableName.data)) to get the columns that come from the data source query. You would need to have a default row selection made to use Object.keys(tableName.selectedSourceRow) if there are additional columns that have been added to the table outside of the query.