Angular:

http://angularjs.org/

HTML

<div ng-controller="MyCtrl">
    <my-table rows='obj.rows'></my-table>
    <button ng-click="add()">Add New</button>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('myTable', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.rows, function (newRows) {
                if (typeof newRows !== 'undefined') {
                    var html = '<table>';
                    angular.forEach(newRows, function (row, index) {
                        html += '<tr><td>' + row.name + '</td></tr>';
                        if ('subrows' in row) {
                            angular.forEach(row.subrows, function (subrow, index) {
                                html += '<tr><td>' + subrow.name + '</td></tr>';
                            })
                        }
                    })
                    html += '</table>';
                    element.html(html);
                }
            }, true);

        }
    }
});

function MyCtrl($scope) {
    $scope.obj = {
        rows: []
    };
    $scope.obj.rows = [{
        name: 'row1',
        subrows: [{
            name: 'row1.1'
        }, {
            name: 'row1.2'
        }]
    }, {
        name: 'row2'
    }];
    $scope.add = function () {
        $scope.obj.rows.push({
            name: 'newRow'
        });
    }
}