0

I have a table that needs to be dynamically rendered based on data I pull from my database. I don't know how many rows or columns there will be until I pull the data. Because of that I'm currently looping through the data and adding it to my html table, creating th elements for each column header and a td element with 3 input fields for each cell. In addition, to that, I have a toggle above the table that allows the user to choose which input field they are editing, the others are hidden.

I've tried a couple of different approaches to speed it up and my current approach seems to be the fastest so far at 3 seconds to render the table and 1-2 seconds to toggle.

My current approach when toggling is using jquery to select all elements that match a certain criteria and using .hide() or .show().

I also tried looping through the data or looping through the cells to change them and only creating 1 input element under the td. While that sped up rendering to about 2 seconds, it slowed down the toggle to about 6-10 seconds each time.

So it's not incredibly slow at the moment, but slow enough that it's noticeable and slightly irritating. fyi there are around 8300 cells in the table.

Is there any way to speed up either rendering or toggling the table?

Nathan Allan
  • 27
  • 4
  • Please provide important parts of your code in a minimal example – Aaron3219 Mar 31 '23 at 16:30
  • General tips: rendering tables - each change to the DOM inside a `` requires a *complete redraw* of the table. Be sure to build the entire table first then output in a single step - unless there's a risk it will be *very* large, then batch/partition the rendering (or find an alternative such as export from server to xlsx)
     – freedomn-m Mar 31 '23 at 16:32
  • 1
    General tips: make changes via jquery to as many elements at once as possible - ie bulk update. So rather than `$("tr").each((_, e) => $(e).....hide() })` do `$("tr").filter((_, e) => ...).hide();` – freedomn-m Mar 31 '23 at 16:33
  • @freedomn-m this might be a good solution. Currently, I call the .append() method on each cell to add the td element. If I were to call that only once and compile all the html into one variable. What would be considered very large? – Nathan Allan Mar 31 '23 at 17:07
  • One row at a time, unlikely. 20,000+ rows at a time, yes. – freedomn-m Mar 31 '23 at 17:08

0 Answers0