title: Return every value in spreadsheet to web app table
body: <p>What I'm trying to do:</p>
  
  <ol>
  <li><p>Get every value from a spreadsheet (6 columns, ~10+ rows)</p>
  
  <ul>
  <li><p>I can get the values. I will probably get each column individually with <code>.getRange(row, column, sheet.getLastRow() - 1, 1).getValues();</code>. Or I could get every single value with <code>.getDataRange().getValues()</code> and then put them in the table that way?</p></li>
  <li><p><strong>Or</strong> would it be better to just use a for loop? -- <strong>example at very bottom</strong></p></li>
  </ul></li>
  <li><p>Return those values [as Templated HTML?] surrounded by <code>&lt;table&gt;, &lt;tr&gt;, &lt;th&gt;, &lt;td&gt;</code> code -- <strong>example below</strong></p></li>
  <li><p>Display the table with the values on a web app when a name gets
  clicked</p>
  
  <ul>
  <li>Can the inserted <code>&lt;table&gt;</code> code start as <code>style="display: none;"</code>, and then when the name gets clicked, have the table show? Or have it in a div that is invisible then visible once clicked?</li>
  </ul></li>
  </ol>
  
  <p>&nbsp;</p>
  
  <p><strong>Example of table:</strong></p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;th&gt;header1&lt;/th&gt;
    &lt;th&gt;header2&lt;/th&gt;
    &lt;th&gt;header3&lt;/th&gt;
    &lt;th&gt;header4&lt;/th&gt;
    &lt;th&gt;header5&lt;/th&gt;
    &lt;th&gt;header6&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;value1&lt;/td&gt;
    &lt;td&gt;value2&lt;/td&gt;
    &lt;td&gt;value3&lt;/td&gt;
    &lt;td&gt;value4&lt;/td&gt;
    &lt;td&gt;value5&lt;/td&gt;
    &lt;td&gt;value6&lt;/td&gt;
   &lt;/tr&gt;
   //etc
  &lt;/table&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <p>I dont know if what I'm trying to do counts as Templated HTML or not, or if it would be better to do this using Templated Html...</p>
  
  <p>The big thing I need help with is returning every value in a table and displaying it on the web app. </p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <p>&nbsp;</p>
  
  <p><strong>Example of for loop</strong></p>
  
  <p>If I do a for loop and return every value in a column or a row    </p>
  
  <pre><code>column1[i]  
  column2[i]  
  etc  
  </code></pre>
  
  <p>or  </p>
  
  <pre><code>row1[i]  
  row2[i]  
  etc 
  </code></pre>
  
  <p>How would I return those values as a table?</p>
  
  <p>Would it be something like:</p>
  
  <pre><code>var x = "&lt;tr&gt;";
  var y = row1[i];
  var z = "&lt;/tr&gt;";
  
  return x + y + z
  </code></pre>
  
  <p>If so, how would I make a whole table out of all the row/column values?</p>
  
  <p>Also, how would I style the table with css once it's fully built? I'm assuming I can still add an id to the table and style it from there.</p>
  
  <p>I don't know the exact number of rows there will be in the spreadsheet, so making this dynamic would be best -- probably getting all the rows instead of columns and using a for loop for each row?</p>
  
  <p>Any help would be appreciated. Thanks.</p>
  
  <p>&nbsp;</p>
  
  <hr>
  
  <p>&nbsp;</p>
  
  <p>If I wanted to add another column to the table (not in the spreadsheet), how would I go about doing that? I'm trying to add an add row button to the header row, and a delete row button on the end of every row of table data.</p>
  
  <p>Also, I know that you can set the <code>&lt;td&gt;</code> to <code>&lt;td contenteditable='true'&gt;</code>... but, how would I have it where the data is only editable on a newly added row AND the table cell cant be edited once a value is submitted? -- Would I need an event listener or some trigger that sees when a value is inputted and triggers that cell to <code>contenteditable='false'</code>?</p>
  
  <p>Thanks again.</p>