Próbuję wyświetlić tabelę danych na podstawie ako.observableArray gdzie zwracane kolumny nie są wcześniej określone.

Próbka przedmiotu z mojego observableArrayself.userData()[0] byłoby:

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

Te kolumny byłyby różne za każdym razem, w zależności od tego, co użytkownik wybrał do wyprowadzenia.

Chcę, aby nagłówki kolumn w moim wyjściu były określane przez to, co jest w tablicy, więc moim pożądanym wyjściem będzie:

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

Wiem, że mogę użyćforeach powtarzać wiersze i kolumny, ale nie jestem pewien, jak odwoływać się do niego dynamicznie na podstawie tego, co jest obecne w moimobservableArray.

W tej chwili mam tę podstawową strukturę:

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