knockout.js - ko.observableArray からテーブル列を動的に設定する

Question

ko.observableArray返される列が事前に決定されていない場所に基づいて、データのテーブルを出力しようとしています。

私のobservableArrayからのアイテムのサンプルは次のself.userData()[0]ようになります:

Object {
        RowNum: 1, 
        ID: "123", 
        Surname: "Bloggs", 
        Forename: "Joe", 
        Address line 1: "1 Park Lane"
}

これらの列は、ユーザーが出力するために選択した内容に基づいて毎回異なります。

出力の列見出しを配列に存在するものによって決定したいので、望ましい出力は次のようになります。

<table>
   <thead>
      <tr>
         <th>RowNum</th>
         <th>ID</th>
         <th>Surname</th>
         <th>Forename</th>
         <th>Address line 1</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>123</td>
         <td>Bloggs</td>
         <td>Joe</td>
         <td>1 Park Lane</td>
      </tr>
      <!-- repeated for each row -->
   </tbody>
</table>

行と列を繰り返すために使用できることはわかってforeachいますが、に存在するものに基づいて動的に参照する方法がわかりませんobservableArray。

現時点では、次の基本構造があります。

<table>
    <thead> 
        <tr data-bind="foreach: userData [property name] ">
            <th>
               <span data-bind="text: [property name]"></span>
            </th>                   
        </tr>
    </thead>
    <tbody data-bind="foreach: userData">                
        <tr data-bind="foreach: userData [property name]>
            <td data-bind="text: [property value]">                            
            </td>                        
        </tr>
    </tbody>
</table>