Given that I have a table component with a checkbox column, how do I offer the user a feature to “select or deselect all checkboxes” with one click …
… while having all records highlighted as changes (looking like a usual manual change) and being able to still de/select one specific checkbox before persisting it with “Save Changes”?
I tried manipulating the recordUpdates property of the table component with a JS query, but the property update isn’t reflected in the GUI (I guess it’s read-only).
=> Is there a way to do manipulate the recordUpdates property and have these manipulations reflected in the GUI?
… (without any further requirement) ?
I have solved it now with a DB query by simply setting the checkbox column to false and then triggering the refresh of the table component.
Drawbacks:
In case the user wanted to select all checkboxes and then deselect one specific one before actually saving it, 2 instead of 1 DB queries were executed
Hey @emvau and welcome to the forum! You are correct - .recordUpdates is read-only, programmatically at least. We don’t expose a JS utility for the table to bulk set editable values like that - but one thing you might be able to do is work with temporary state and have your table’s data rely on an external JSON blob. Roughly:
Create a temporary state variable and initialize it to an array of boolean values (you could pull these from your DB, so the initial temp state value could be something like query.data)
In your checkbox column in the table, use a Mapper and set the value to {{ yourTempState.value[i] }} which will index it at the table row’s index
Create a JS query to manipulate the temporary state variable via yourTempState.setValue()
Hook up a “select all” button to that query
This should work - the basic idea is initialize the temp state based on your DB values, manipulate it, and then write the results back. LMK if this helps!
Was also wanting the exact same case: write-access to the recordUpdates variable. Unfortunately, this workaround suggested by Justin looks really overkill.