How to dynamically create a table on the page


Request to please let know if its possible to dynamically create a table on the page. For example, suppose a table (Table A) is present on the page and there are some elements on its different rows. And, if someone selects some row in it, is it possible to launch a new table (Table A.1) on the page, which shows some other data. Further, if someone selects a different row, a new table will get launched and show up ( Table A.2).

Launching new table can be done by any thing present on the page, not particularly by selecting a row on some table (Just gave the table example to explain the case).

Request to please let know on this.

Thanks and regards,

Hi @rkr,

You can't "create" a new component in code, but there are three other options that may do what you need.

  1. Place you second table and set its Hidden value from a temp var like {{!tableVisible.value}}. You the tableVisible.setValue(true) when you want to see it. If you lay out your app correctly, the components below the table will dynamically move down when the table is displayed, and move back up when hidden so you aren't left with a big hole when not showing the table.

  2. Leave the table visible, but just populate it's Data property to what you want to display. If nothing to display you can use the new Empty State message to say "Nothing to see here now." or "Click a row in table A to see details here."

  3. Use a Modal window to show the second table if it only needs to be seen intermittently.

Anyone else have an idea?

Hey bradlymathews, great suggestions here! We have seen a lot of customers use they Hidden value field of the table or other components that they want to only have visible conditionally. Hope this helps!

Thanks a lot for the inputs and replies. Really appreciate the responses.

thanks and regards,