title: Set table columns dynamically from ko.observableArray
body: <p>I am trying to output a table of data based on a <code>ko.observableArray</code> where the columns that are returned are not pre-determined.</p>
  
  <p>A sample of an item from my observableArray <code>self.userData()[0]</code> would be:</p>
  
  <pre><code>Object {
          RowNum: 1, 
          ID: "123", 
          Surname: "Bloggs", 
          Forename: "Joe", 
          Address line 1: "1 Park Lane"
  }
  </code></pre>
  
  <p>These columns would be different each time based on what the user has selected to output.</p>
  
  <p>I want the column headings in my output to be determined by what is present in the array, so my desired output would be:</p>
  
  <pre><code>&lt;table&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th&gt;RowNum&lt;/th&gt;
           &lt;th&gt;ID&lt;/th&gt;
           &lt;th&gt;Surname&lt;/th&gt;
           &lt;th&gt;Forename&lt;/th&gt;
           &lt;th&gt;Address line 1&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;1&lt;/td&gt;
           &lt;td&gt;123&lt;/td&gt;
           &lt;td&gt;Bloggs&lt;/td&gt;
           &lt;td&gt;Joe&lt;/td&gt;
           &lt;td&gt;1 Park Lane&lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- repeated for each row --&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I know I can use <code>foreach</code> to repeat rows and columns but I'm unsure how to reference it dynamically based on what is present in my <code>observableArray</code>.</p>
  
  <p>At the moment I have this basic structure:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt; 
          &lt;tr data-bind="foreach: userData [property name] "&gt;
              &lt;th&gt;
                 &lt;span data-bind="text: [property name]"&gt;&lt;/span&gt;
              &lt;/th&gt;                   
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody data-bind="foreach: userData"&gt;                
          &lt;tr data-bind="foreach: userData [property name]&gt;
              &lt;td data-bind="text: [property value]"&gt;                            
              &lt;/td&gt;                        
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>