Search code examples
javascriptperformanceprototypejs

Javascript performance with creating large tables

I have a database table. I want the user to be able to modify the values in that table, through a web UI.

As such, I have my back-end retrieve the table's values, pass them to my Javascript through JSON. My Javascript builds objects representing table rows, and then uses prototype templates to generate HTML table rows, from the data.

this.varietyRowTemplate = new Template(
        "<tr class='#{stockLevel}'>" +
        "<td class='name'>#{name}</td>" +
        "<td class='source'>#{source}</td>" +
        "<td class='colour'><span class='colour'>#{colour}</span><input class='colour hiddenInput' type='text' value='#{colour}' /></td>" +
        "<td class='type'><span class='type'>#{type}</span><input class='type hiddenInput' type='text' value='#{type}' /></td>" +
        "<td class='packetSize'><span class='packetSize'>#{packetSize}</span><input class='packetSize hiddenInput' type='text' value='#{packetSize}' /></td>" +
        "#{yearCells}" +
        "<td class='total'>#{localStock}</td>" +
        "<td class='inventoryUpdate'><input class='inventoryUpdate' type='button' value='Update'/></td>" +
        "</tr>");
...
...
    //For every variety in the object array, add a row to the table
    tableString += this.varietyRowTemplate.evaluate(variety);

I then set the container's innerHTML to the table string

tableContainer.innerHTML = tableString;

With a table of 2,000 rows, 15 cells per row, ~10 input elements per row, as well as ~15 span tags, this takes me over a minute.

Is there a substantially faster way to generate and populate a large table? Should I give up trying to display all 2,000 rows at once, and break it up into pages? (Note - growing the table at say, 25 rows at a time, as they load is unacceptable, because the last elements will still take a minute to load).

Solution

  • What I would do is store the data on your browser, which is trivial, then show a table of about 100 rows at a time. Sort the data by column using Array.sort() (pass it a sorting function for different data types) and remember which page you are on so that it doesn't always reset to top or bottom. I've done this easily with 5K rows of data and it's lightning fast.

    One other trick I've used is having a single table row and one TD per column. Then I fill each TD with a stack of data containers, taking care to make sure they're the same height. That makes a faux table, but if you do it right the user can't tell the difference. It's orders of magnitude faster than rendering all those rows.