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).