<!DOCTYPE html>
<html>
<head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
    
    <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-app="main" ng-controller="DemoCtrl">


    <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
    <p><strong>Sorting:</strong> {{tableParams.sorting()|json}}

    <div class="ng-table-scrollcontainer">
    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td class="ng-table-fixedcolumn" header-class="ng-table-fixedcolumn" data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>
    </div>

</body>
</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')(data, params.orderBy()) :
                                data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});
body {
    padding: 10px !important;   
}

.ng-table-scrollcontainer {
    width: 300px; 
    overflow-x:scroll;  
    margin-left:5em; 
    overflow-y:visible;
}
.ng-table-fixedcolumn {
    position:absolute; 
    width:5em; 
    left:0;
    top:auto;
}