I have a table, each row can spawn a model with additional information. Is there a best practice for displaying tons of information like this?
I've considered the following options:
- Save all information as JSON and leave in html element for JS to populate the modal with when clicked.
- Render a separate modal for each table row and tie them with ids
- Use AJAX to fetch the necessary data to populate the modal when clicked.
The issues I foresee with each (respectively) are as follows:
- This leaves a metric crap ton of data floating around inside html tags. Leaving JSON in a data attribute seems hacky to me.
- This becomes computationally expensive when I have 200 table rows and custom svgs and data in each modal.
- Probably the best option, but I balk at querying multiple tables in a massive database for each row when I could get everything needed in a single query on page load.
So there you have it. In the grand scheme of things, what is the best way to get, save, and render a ton of data? Where is the threshold (quantity) for this sort of "optimization" to even matter?