
<div class="page page-table" data-ng-controller="TableCtrl">

    <div class="row ui-section">
    <div class="col-lg-8 clearfix">
        <h2 class="section-header">Dynamic Table</h2>
    </div>
    <div class="col-md-12">
        <section class="panel panel-default table-dynamic">
        <div class="table-filters">
            <div class="row">
            <div class="col-sm-4 col-xs-6">
                <form>
                <input type="text"
                     placeholder="Search..."
                     class="form-control"
                     data-ng-model="searchKeywords"
                     data-ng-keyup="search()">
                </form>
            </div>
            <div class="col-sm-3 col-xs-6 filter-result-info">
                <span>
                Showing {{filteredStores.length}}/{{stores.length}} entries
                </span>                
            </div>
            </div>
        </div>

        <table class="table table-bordered table-striped table-responsive">
            <thead>
            <tr>
                <th><div class="th">
                Store Name
                <span class="fa fa-angle-up"
                    data-ng-click=" order('name') "
                    data-ng-class="{active: row == 'name'}"></span>
                <span class="fa fa-angle-down"
                    data-ng-click=" order('-name') "
                    data-ng-class="{active: row == '-name'}"></span>
                </div></th>
                <th><div class="th">
                Price
                <span class="fa fa-angle-up"
                    data-ng-click=" order('price') "
                    data-ng-class="{active: row == 'price'}"></span>
                <span class="fa fa-angle-down"
                    data-ng-click=" order('-price') "
                    data-ng-class="{active: row == '-price'}"></span>
                </div></th>
                <th><div class="th">
                Sales (in 7 days)
                <span class="fa fa-angle-up"
                    data-ng-click=" order('sales') "
                    data-ng-class="{active: row == 'sales'}"></span>
                <span class="fa fa-angle-down"
                    data-ng-click=" order('-sales') "
                    data-ng-class="{active: row == '-sales'}"></span>
                </div></th>
                <th><div class="th">
                Rating
                <span class="fa fa-angle-up"
                    data-ng-click=" order('rating') "
                    data-ng-class="{active: row == 'rating'}"></span>
                <span class="fa fa-angle-down"
                    data-ng-click=" order('-rating') "
                    data-ng-class="{active: row == '-rating'}"></span>
                </div></th>
            </tr>
            </thead>
            <tbody>
            <tr data-ng-repeat="store in currentPageStores">
                <td>{{store.name}}</td>
                <td>{{store.price}}</td>
                <td>{{store.sales}}</td>
                <td>{{store.rating}}</td>
            </tr>
            </tbody>
        </table>

        <footer class="table-footer">
            <div class="row">
            <div class="col-md-6 page-num-info">
                <span>
                Show 
                <select data-ng-model="numPerPage"
                    data-ng-options="num for num in numPerPageOpt"
                    data-ng-change="onNumPerPageChange()">
                </select> 
                entries per page
                </span>
            </div>
            <div class="col-md-6 text-right pagination-container">
                <uib-pagination class="pagination-sm"
                    ng-model="currentPage"
                    total-items="filteredStores.length"
                    max-size="4"
                    ng-change="select(currentPage)"
                    items-per-page="numPerPage"
                    rotate="false"
                    previous-text="&lsaquo;" next-text="&rsaquo;"
                    boundary-links="true"></uib-pagination>
            </div>
            </div>
        </footer>
        </section>
    </div>
    </div>
    
</div>