
<!DOCTYPE html>
<html>
<head>
    <title>Angular Tablesort</title>
    <link rel="stylesheet" href="tablesort.css"/>
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="tableTestCtrl">
        <h1>Angular Tablesort</h1>
        <table border="1" ts-wrapper>
            <thead>
            <tr>
                <th>Select</th>
                <th ts-criteria="Id">Id</th>
                <th ts-criteria="Name|lowercase" ts-default>Name</th>
                <th ts-criteria="Price|parseFloat">Price</th>
                <th ts-criteria="Quantity|parseInt">Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in items track by item.Id" ts-repeat>
                <td><input type="checkbox"></td>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Price | currency}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
            </tbody>
        </table>

        <h1>Angular Tablesort with tablesort filter and max 5 entries</h1>
        <table border="1" ts-wrapper>
            <thead>
            <tr>
                <th>Select</th>
                <th ts-criteria="Id">Id</th>
                <th ts-criteria="Name|lowercase" ts-default>Name</th>
                <th ts-criteria="Price|parseFloat">Price</th>
                <th ts-criteria="Quantity|parseInt">Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in items | tablesort | limitTo: 5 track by item.Id" ts-repeat>
                <td><input type="checkbox"></td>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Price | currency}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
            </tbody>
        </table>

        <h1>Angular Tablesort with Multi-Element ts-repeat-start &amp; ts-repeat-end</h1>
        <h2><em>Click Select to reveal item details.</em></h2>
        <table border="1" data-ts-wrapper>
            <thead>
            <tr>
                <th>Select</th>
                <th data-ts-criteria="Id">Id</th>
                <th data-ts-criteria="Name|lowercase" data-ts-default>Name</th>
                <th data-ts-criteria="Price|parseFloat">Price</th>
                <th data-ts-criteria="Quantity|parseInt">Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr data-ng-repeat-start="item in items track by item.Id" data-ts-repeat-start>
                <td><input type="checkbox" data-ng-model="item.selected"></td>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Price | currency}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
            <tr data-ng-repeat-end data-ts-repeat-end data-ng-show="item.selected">
                <td colspan="5">{{item.Description}}</td>
            </tr>
            </tbody>
        </table>



        <h1>Empty table</h1>
        <table border="1" ts-wrapper>
            <thead>
            <tr>
                <th>Select</th>
                <th ts-criteria="Id">Id</th>
                <th ts-criteria="Name|lowercase" ts-default>Name</th>
                <th ts-criteria="Price|parseFloat">Price</th>
                <th ts-criteria="Quantity|parseInt">Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in noitems" ts-repeat ng-click="clickRow()">
                <td><input type="checkbox"></td>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Price | currency}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
            </tbody>
        </table>

        <h1>Empty table without "No data" row</h1>
        <table border="1" ts-wrapper>
            <thead>
            <tr>
                <th>Select</th>
                <th ts-criteria="Id">Id</th>
                <th ts-criteria="Name|lowercase" ts-default>Name</th>
                <th ts-criteria="Price|parseFloat">Price</th>
                <th ts-criteria="Quantity|parseInt">Quantity</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in noitems" ts-repeat ts-hide-no-data ng-click="clickRow()">
                <td><input type="checkbox"></td>
                <td>{{item.Id}}</td>
                <td>{{item.Name}}</td>
                <td>{{item.Price | currency}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
            </tbody>
        </table>
        <br />
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="js/angular-tablesort.js"></script>
<script>
    var myApp = angular.module( 'myApp', ['tableSort'] )
            .controller( "tableTestCtrl",     function tableTestCtrl($scope)  {
                $scope.items = [
                    {Id: "01", Name: "A", Price: "1.00", Quantity: "1", Description: "This is the description for item A.", selected: false},
                    {Id: "02", Name: "B", Price: "10.00", Quantity: "1", Description: "This is the description for item B.", selected: false},
                    {Id: "04", Name: "C", Price: "9.50", Quantity: "10", Description: "This is the description for item C.", selected: false},
                    {Id: "03", Name: "a", Price: "9.00", Quantity: "2", Description: "This is the description for item a.", selected: false},
                    {Id: "06", Name: "b", Price: "100.00", Quantity: "2", Description: "This is the description for item b.", selected: false},
                    {Id: "05", Name: "c", Price: "1.20", Quantity: "2", Description: "This is the description for item c.", selected: false}
                ];
                $scope.noitems = [];
                $scope.clickRow = function () {
                    alert('You clicked the row.');
                }
            }
    );
</script>
</body>
</html>
