Table with dynamic rows and columns, and responsive

I wanted to share an example of a table with dynamic columns, rows, and that is responsive as i haven’t seen much on how to do this.

this isn’t a detailed post but i can give more detailed instructions if others are interested.

objective:

  • build a table that allows the user to filter rows, columns and is responsive
  • data: i am using health data of a persons body composition (“dexa scan” which measures fat, muscle, bone density)
  • each dexa scan is done on a specific date, returning the same information
  • the data structure is flexible allowing. The main table referenced is a Data Log table, which holds the Value, a lookup to another Thing which is the Log Type (example: fat %, the users can add different Log Types they want to track in this table), and a link to the Scan Date (the user creates the Scan in the Scan table prior to logging the data they wan to capture)
  • even though this data is stored all in one table in “long” format, allowing the user to turn on / off Scans (rows) and turn on/off Log Types (columns) was a bit tricky due to the nesting
  • BONUS: i added another Compare Dexas row which you can turn on and off to see the change between previous scan

here is a gif of the table, i have a few design clean up items to do. i also added an animated skeleton ui component while the table loads.
CleanShot 2022-07-20 at 17.37.08

special thanks to @keith for making this possible with List Shifter. this is the most important pluggin i have seen for anything complex such as charts / tables. i embedded a List Shifter into each repeating row to make it possible to fill in the cell Values. This is because you cant look the the parent of the parent on nested objects.

special thanks to @gregjohnkeegan for his buildcamp showing how to make tables pretty and responsive.

Side note, you could probably create some sort of side table that pulls all data into one table as text then use that table, but this would make it not as robust as users can create Log Types, Scans, and Logs all they want and the table will update.

please add to this topic or let me know if i should post a more details.

3 Likes

Is it possible to share the structure of the table? How have you set up the repeating group and leveraged the list shifter plugin?

Can you share a more detailed guide?

sorry for the late response. here is a link to view the structure.

i switched away from bubble, i love bubble but needed a better native app experience so i haven’t been in this projected for a while so i don’t remember exactly how i built it but you should be able to see from the widget tree.