Clear multiple selected rows in table with javascript

Is there a way to mimic the "Clear Selection" on a table feature with a javascript function? i want to be able to clear a multi select any time a close a modal.

Hey @aleakos — thanks for posting!

You can use this in a Javascript query to clear the multi select:

multiselect1.setValue([])

The default empty state for multi select components is an empty array, so I prefer to set it to that when clearing the component’s value. You could also set it to null with multiselect3.setValue(null) if you prefer.

You can trigger this when closing the modal, via a button, after form submit, or any other way you choose.

shoot, sorry @alex i phrased my question really poorly - and i forgot there was a multi select component (I’ve edited the title now).

i’m actually looking to clear a table that has “Allow selecting multiple rows” turned on whenever i close a modal

Ahh, no worries! Similarly, you can use the table’s .selectRow() function like this to deselect all rows from the table:

table1.selectRow()

This works for pretty much all components that have a similar select function.

While we're on the topic, here's another cool trick that may or may not be useful for you: you can dynamically control whether or not the "Allow selecting multiple rows" setting is enabled for the table by pressing the fx button next to the toggle. Then a text input will replace the toggle and you can write a JS expression inside {{ }} to control whether or not the setting is enabled.

Here's a GIF of me using a toggle to turn on the "enable selecting multiple rows" setting:
Shared with Zight

2 Likes

awesome, thanks!