JSFiddle - React, Tailwind, and code Playground
by matmuchrapna
HTML
<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="https://raw.github.com/romanych/ko.editables/master/ko.editables.jshttps://raw.github.com/romanych/ko.editables/master/ko.editables.js"></script>
<table class="grid">
<thead>
<tr>
<th>
Name
</th>
<th>
Address
</th>
<th>
Phones
</th>
<th>
</th>
</tr>
</thead>
<tbody data-bind="foreach: Albums">
<tr data-bind="foreach: tracks">
<td data-bind="text: title">
</td>
<td data-bind="text: AddressString">
</td>
</tr>
</tbody>
</table>
JavaScript
var initialData = [
{
id: 101,
image: 'http://placekitten.com/140/140',
date: '10.10.2525',
title: 'Danny',
artists: [
{ id: 11, title: 'Timati' },
{ id: 12, title: 'Busta Rhymes'}],
genres: [
{ id: 21, title: 'Noise' },
{ id: 22, title: 'EBM'}],
composers:[
{ id: 31, title: 'Bach' },
{ id: 32, title: 'Mozart'}],
lyricists:[
{ id: 41, title: 'Andre Montagar' },
{ id: 42, title: 'Zbignev Zapert'}],
explicit: 'true',
tracks: [
{id: 101,
title: 'Unforgiven',
artists: [
{ id: 11, title: 'Timati' },
{ id: 12, title: 'Busta Rhymes'}],
genres: [
{ id: 21, title: 'Noise' },
{ id: 22, title: 'EBM'}],
composers:[
{ id: 31, title: 'Bach' },
{ id: 32, title: 'Mozart'}],
lyricists:[
{ id: 41, title: 'Andre Montagar' },
{ id: 42, title: 'Zbignev Zapert'}],
lyrics: 'text text'
},
{id: 102,
title: 'Pony',
artists: [
{ id: 11, title: 'Timati' },
{ id: 12, title: 'Busta Rhymes'}],
genres: [
{ id: 21, title: 'Noise' },
{ id: 22, title: 'EBM'}],
composers:[
{ id: 31, title: 'Bach' },
{ id: 32, title: 'Mozart'}],
lyricists:[
{ id: 41, title: 'Andre Montagar' },
{ id: 42, title: 'Zbignev Zapert'}],
lyrics: 'text text'
},
{id: 103,
title: 'Is',
artists: [
{ id: 11, title: 'Timati' },
{ id: 12, title: 'Busta Rhymes'}],
genres: [
{ id: 21, title: 'Noise' },
{...