JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body ng-app="angularnews" ng-controller="controller">

	<table class="table" ng-repeat="table in tables">
		<tr>
			<td>{{table.name}}</td>
		</tr>
		<tr>
			<td ng-repeat="column in table.columns">{{column}}</td>
		</tr>
		<tr ng-repeat="item in table.items">
			<td ng-repeat="field in item">{{field}}</td>
		</tr>
		<tr>
			<td colspan="3">
				<form ng-submit="addRow($index)">
					<input type="text" ng-repeat="column in table.columns" ng-model="column">
					<input type="submit" value="add row">
				</form>
			</td>
		</tr>
	</table>
</body>

CSS

input[type="text"]{
    width:120px;
}

JavaScript

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

app.controller('controller',[
	'$scope',
	function($scope){

		$scope.tables = [
			{name: 'tweets',
			columns: ['id', 'message', 'user'],
			items: [
				{id: 1, message: 'hello', user: 'mike'},
				{id: 2, message: 'hi', user: 'bob'},
				{id: 3, message: 'whatup', user: 'bob'}
			]
			},
			{name: 'users',
			columns: ['id', 'username'],
			items: [
				{id: 1, username: 'mike'},
				{id: 2, username: 'bob'}
			]
			}
		];

		$scope.addRow = function(i){
			console.log($scope.id);
			$scope.tables[i].items.push({id: $scope.id});
		};

	}
]);