AngularJS Dynamic Table

by manoj

HTML

<div ng-app="" ng-controller="TableController">
    <table>
        <tr>
            <th ng-repeat='(key, value) in rows[0]'>{{key}}</th>
        </tr>
        <tr ng-repeat='row in rows'>
            <td ng-repeat='cell in row'>{{cell}}</td>
        </tr>
    </table>
</div>

CSS

td {
    border:1px #CCC solid;
    padding:10px;
}
th {
    border:1px #CCC solid;
    padding:10px;
}

JavaScript

var data = [{
    "recordno": "001",
        "firstname": "Brock",
        "middlename": "Edward",
        "lastname": "Lesnar",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "002",
        "firstname": "John",
        "middlename": "E",
        "lastname": "Cena",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "003",
        "firstname": "randy",
        "middlename": "E",
        "lastname": "Ortan",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}, {
    "recordno": "004",
        "firstname": "Triple",
        "middlename": "E",
        "lastname": "H",
        "gender": "male",
        "dateofbirth": "1980-01-01T20:20:19.198Z",
        "dateofdeath": null,
        "status": "archive"
}];

function TableController($scope) {
    $scope.rows = data;
}