Pulling Data From Google Sheets into HTML Table

Question

I have a small web application setup on google sheets which have almost 10k rows and 9 columns.

currently, I took all the data from Google sheets and putting it on a

Answer 1

Apart from moving map() to async server call, you can optimize the client-side code by creating an ordering function that works over DOM. Currently, each time a keyup event is fired, you rerender the whole table (10K iterations each time if I understand the Spreadsheet size correctly).

First, access your table's children (assuming it is constructed with both <thead> and <tbody> elements: var collection = nameTable.children.item(1).children (returns HtmlCollection of all the rows).

Second, iterate over rows and hide ones that do not satisfy the filtering criteria with hidden property (or create and toggle a CSS class instead):

for(var i=0; i<collection.length; i++) {
  var row      = collection.item(i);
  var cells    = row.children;
  var itemName = cells.item(1).textContent; //access item name (0-based);
  var itemDesc = cells.item(2).textContent; //access item description (0-based);

  var complies = itemName==='' && itemDesc===''; //any criteria here;

  if( complies ) {
    row.hidden = false;
  }else {
    row.hidden = true;
  }

}

Third, move the renderTableRows() function to server async call as well, since you render your table rows with string concatenation (instead of createElement() on document) with htmlString.

Useful links

1. Document Object Model (DOM) reference;
2. Server-client communication in GAS reference;
3. Best practices for working with HtmlService;