Programmatically Expand/Collapse (Expandable) Rows in Table

Feature Requests
9

+10 (myself and all my techs in the field that view data in this format).

1 Like
10

This is a must have guys, come on

11

+1

12

+1

13

+1

14

Hi there! Excited to share that Cloud now has expandRows and collapseRows methods for the table :slightly_smiling_face: (it should ship to on prem in the next couple of weeks)

4 Likes
15

:metal: :partying_face:

Thank you!

16

Yes!! Thank you to you and the Retool development team!!

Starting to implement now; will start new topics for anything that comes up as I do.

2 Likes
17

Looks like the way to expand all rows is this (assuming checklist_item_id is my table's key):

tblOutstandingChecklistItems.expandRows({
    mode:"key", 
    key: tblOutstandingChecklistItems.data.map(obj => obj.checklist_item_id)
})

Or if you are not using a key (and spread operator syntactic sugar is giving me diabetes :rofl:):

await tblOutstandingChecklistItems.expandRows({
    mode:"index", 
    index: [...Array(tblOutstandingChecklistItems.data.length).keys()]
})

Am I correct or is there a better way?

1 Like
18

Yes, I agree - not sure there's a better way currently

19

Can't seem to make it work. Am I doing it correctly? Thanks a lot!

image
image1095×521 48.6 KB

20

Hi @freekz It looks like you're using grouped rows, and the expandRows method is for the expandable rows feature. If you have expandable rows that are also grouped, it looks like the group needs to be open in order to expand the underlying rows.

1 Like
21

Just to share another post to allow only a single row in a table to be expanded

22

@Tess

Why am I unable to reference something in the expanded row?

I put {{expandedRowText}} for example as a text input in the expanded row.

Then I want to add an event handler to an action button on the table itself that is conditioned on {{!expandedRowText.hidden}} so it only occurs if the row is expanded. I'm not understanding how to reference an object in the expanded row or how to reference the expanded row itself.

23

Hi Shawn,

One way of referencing a component within an expanded row is by referencing the index of the selected row in your table, e.g. {{expandedRowText[table1.selectedDataIndex].hidden}}.

Bear in mind that the component would only be available if the row has been expanded any time during the user's session, so you'll have to make sure you're action button on the table is disabled if the row has not been expanded (as it won't find the component referenced in it).

24

I just keep getting 'expandedRowText is not defined'

25

Hi @shawnhoffman,

I don't think you can accurately use the expandedRowText's hidden property alone to check if a row is expanded

If you look at the state for the expandable row's child components, the component doesn't exist in state until you've expanded the row

Haven't expanded any rows yet:

State after expanding the first two rows (stays the same after closing the first row):

I thought Miguel's idea of checking if the row has ever been expanded, it'll be in the state, and can therefore be evaluated was working for me, but I seem to be running into some caching issues. We have a feature request for a collapse row event handler that would be helpful for maintaining a list of the currently expanded rows

2 Likes
26

Doesnt look like this is available on-prem cant see any expandRow method :frowning:

1 Like
27

Hi @peter.b what version are you using? I believe it shipped out in 3.37-edge (Self-hosted Retool 3.37 Edge release notes | Retool Docs)

1 Like
28

we are at 3.33(stable) - which explains why we dont have it yet