How to dynamically add new rows to a table?

App Building
1

I am building an admin dashboard using PostgreSQL. It is used to create new sites. After setting up the site, the user enters 10 different values for each site. I have a table in the DB that lists all the field names for the values (E.g.: parking spots, receptionists, ... )
Based on the settings of each site, some of the fields where these values are entered repeat.

E.g.:
Site 1 (general site creation page)

  • Does the building have a parking lot: True/False --> If true, the details table should have a row for the number of spots
  • Does the building have a reception: True/False --> If true, the details table should have a row for the number of receptionists
  • Number of entrances: 2 --> Because there are 2 entrances, we need to repeat the entrance related fields twice in the site details page:

Site details page for Site 1:

  • Row 1, Column 2: enter the # of parking spots
  • Row 2, Column 2: enter the # of receptionists
    /the following fields will repeat twice because the number of entrances is 2/
  • Row 3, Column 2: enter the number of card readers for entrance 1
  • Row 4, Column 2: enter the number of cameras for entrance 1
  • Row 5, Column 2: enter the number of turnstiles for entrance 1
    /repeated fields for entrance 2/
  • Row 6, Column 2: enter the number of card readers for entrance 1
  • Row 7, Column 2: enter the number of cameras for entrance 1
  • Row 8, Column 2: enter the number of turnstiles for entrance 1

How can I make the table add the repeating rows programatically?

2

I think it depends on the use case.
Once the user adds all fields, do you want to then add the entire data to the database, and if so when that completes simply reload the table with the latest data.

3

I want to add a 'SAVE' button to insert all in the DB after all fields are filled.

4
5

Thank you for sharing this.

My question was about 'how to add the repeating rows' programatically.

Page 1: user selects the number of each value at a site (E,g: Number of doors)
Page 2: Table that shows all the field names in table for the user to enter the values for

For example if I have 3 doors, the table should have fields for the following:
Door 1 qty of card readers
Door 1 qty of cameras
Door 2 qty of card readers
Door 2 qty of cameras
Door 3 qty of card readers
Door 3 qty of cameras

6

You would have to allow for the user to enter the number of doors and then based on that number you can build JSON that will store an array that would then become the the number of rows needed for each door.

Thinking about in general what you need to do is starting with the most general to the more specific and work your way down

  1. There will always be 1 site.
  2. Parking lot T/F if T number of spots
  3. Entrances 1 to many
    I would store all of that in one table using a form to submit that data and use the site ID as the foreign key in another table that contains the site details via another form in step 2, for example...
    Doing it all in one form and trying to display it will probably be congested and not optimal for the user experience. IMO :slight_smile:
7

Thank you!
I ended up adding 10 tables for each type.
Based on the number of each type of asset selected on the previous page, unused tables are hidden.
I am very new to retool and coding. I think it's the most convenient solution for now.

1 Like