How do I select all rows in a table?

Hi Retool Team,

Is there a way to "select all rows", or "check all checkboxes in each row" of a table?

My use case is:

  1. I have a table, in which the user can select multiple rows via checking the check box
  2. The checkbox column is a custom column of the table, with type = checkbox
  3. The user now needs to select row by row
  4. Is there a way to "select all" checkboxes, please? I am thinking along the lines of a JS query that sets the checkbox status to "True" for the checkbox column

Screenshot 2021-06-15 at 17.00.53

Thanks,
Oliver

Hey @oliver.ng — thanks for the great question! Yes you can write a JS query to select all rows in the table with the native table.selectRow() function that we expose. Here's an example:

table1.selectRow(_.range(0,table1.data.length))

You can even assign this as a custom button in the table footer. Here's a GIF:
Shared with Zight

2 Likes

Thanks Alex, that is very helpful.

  1. Is there a way to use the table.setData() function to set the checkbox column to be true for all rows
  2. And such update would trigger the recordUpdates property of the table component.

Thanks,
Oliver

Hi @oliver.ng I don't think you can access recordUpdates when updating with setData, but I think that general concept will still work:

First, use a JS query to temporarily update the table data with the checkboxes all set to true:


Then, on success, trigger a bulk update query:


@Tess thanks. this is very helpful. is there anyway at the moment to programatically access recordUpdates at the moment or it can only be done manually?

Potentially a useful feature request down the road.

@oliver.ng Do you mean to update the values inside of tablename.recordUpdates?

yes that is what I mean - updating the values of tablename.recordUpdates programatically other than just from the frontend UI

Got it! Unfortunately .recordUpdates is currently only read-only

Hi @alex , I'm trying to use this Select All method with a table that is mapped to a preceding Snowflake query. However, the Select All JavaScript doesn't appear to work when I do that.

I verified that the JavaScript works for a static table but it doesn't appear to work for a dynamic table.

Is this expected?

Hi @ryguy022 It should still work for a dynamic table. In the cases where it isn't working, is tableName.data formatted as an array? If not, you may need to wrap the data input in formatDataAsArray():

Also, be sure that selection mode for the table is set to multiple!

1 Like

That was it! Thank you :grinning: