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(table)">
					<input type="text" ng-repeat="column in table.columns" ng-model="table.newItem[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'}
                ],
                newItem: {}
			},
                {name: 'users',
                columns: ['id', 'username'],
                items: [
                    {id: 1, username: 'mike'},
                    {id: 2, username: 'bob'}
                ],
                newItem: {}
			}
		];

		$scope.addRow = function(table){
			table.items.push(table.newItem);
            table.newItem = {};
		};

	}
]);