how conditionally render markup based on model data?

how conditionally render markup based on model data?

I have json data as follows:
var js = {
headers: [{
name: 'Id',
editable: false
}, {
name: 'Name',
editable: true
}],
data: [
[1, 'Ajay'],
[2, 'Ankur']
]
};
Goal is to generate a table element from the above data. The header
contains info which tells if the data in that particular column has to be
rendered as static text or if it has to be rendered in a text box (via the
editable property).
How to write the knockout data-bind for this scenario?
This is how far I've got:
<table border="1" style="border-collapse:collapse">
<thead>
<tr data-bind="foreach: Headers">
<th data-bind="text: $data.name"></th>
</tr>
</thead>
<tbody data-bind="foreach: Rows">
<tr data-bind="foreach: $data">
<!-- what to do here...?!!! -->
</tr>
</tbody>
</table>
Here is a fiddle I've tried to work with:
http://jsfiddle.net/deostroll/mLLrk/