JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jsviews.com/download/jsviews.js"></script>
<script src="http://www.jsviews.com/download/jquery.observable.js"></script>
<script id="template" type="text/x-jsrender">
    {^{for R1}}
        <p>Column: {^{:#index+1}}</p>
        {^{for #data}}
            <p>{^{:K1}} {^{:K2}}</p>
        {{/for}}
    {{/for}}
</script>

<button id="refreshRowBtn">Refresh row</button>
<button id="refreshAllBtn">Refresh ALL</button>
<div id="div1"></div>

JavaScript

var structure = {
  R1: [
    [ // column 1
        { K1: 'V111', K2: 'V121' },
        { K1: 'V112', K2: 'V122' },
        { K1: 'V113', K2: 'V123' },
        { K1: 'V114', K2: 'V124' },
    ],
    [ // column 2
        { K1: 'V211', K2: 'V221' }
    ]
  ],
  R2: [],
  R3: [],
  R4: []
};

var structureNew = {
  R1: [
    [ // column 1
        { K1: 'V111 new', K2: 'V121 new' }
    ],
    [ // column 2
        { K1: 'V211 new', K2: 'V221 new' },
        { K1: 'V212 new', K2: 'V222 new' }
    ],
    [ // column 3
        { K1: 'V311 new', K2: 'V221 new' }
    ]
  ],
  R2: [],
  R3: [],
  R4: []
};

//$("#div1").html(
//    $("#template").render(structure)
//);
$.templates("#template").link("#div1", structure);

$('#refreshRowBtn').on('click', function () {
    console.log('Refreshing R1...');
    $.observable(structure).setProperty('R1', structureNew['R1']);
});
$('#refreshAllBtn').on('click', function () {
    console.log('Refreshing all...');
    $.observable(structure.R1).refresh(structureNew.R1);
});