starter-angular-material/app/views/pkguid.html

<div layout="column" layout-fill layout-align="top">

    <div flex>
        <md-toolbar class="md-table-toolbar md-default" ng-show="!isFilterShown && selected.length == 0">
            <div class="md-toolbar-tools">
                <span>PkGuids</span>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="showFilter(true)">
                    <md-icon class="material-icons">filter_list</md-icon>
                </md-button>
                <md-button class="md-icon-button" ui-sref="pkguid_add">
                    <md-icon class="material-icons">add</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="getPkGuids()">
                    <md-icon class="material-icons">refresh</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-toolbar class="md-table-toolbar md-default" ng-show="isFilterShown && selected.length == 0">
            <div class="md-toolbar-tools">
                <md-icon class="material-icons">search</md-icon>
                <form autocomplete="off">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label>Filter</label>
                        <input type="text" ng-model="query.filter" ng-model-options="{debounce: 500}" ng-change="getPkGuids()">
                    </md-input-container>

                </form>
                <md-button class="md-icon-button" ng-click="showFilter(false)">
                    <md-icon class="material-icons">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-toolbar class="md-table-toolbar alternate" ng-show="selected.length > 0">
            <div class="md-toolbar-tools">
                <span>{{selected.length}} {{selected.length > 1 ? 'PkGuids' : 'PkGuid'}} selected</span>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="askRemoveSelected()">
                    <md-icon class="material-icons">delete</md-icon>
                </md-button>
            </div>
        </md-toolbar>
    </div>

    <div flex>
        <md-table-container>
            <table md-table md-row-select multiple ng-model="selected" md-progress="promise">
                <thead md-head md-order="query.order" md-on-reorder="getPkGuids">
                <tr md-row>
                    <th md-column md-order-by="id"><span>Id</span></th>
                    <th md-column md-order-by="someText"><span>Some Text</span></th>
                    <th md-column md-order-by="someInt" md-numeric>Some Int</th>
                    <th md-column md-order-by="createdAt">Created At</th>
                    <th md-column md-order-by="updatedAt">Updated At</th>
                    <th md-column>Actions</th>
                </tr>
                </thead>
                <tbody md-body>
                <tr md-row md-select="item" md-select-id="id" ng-repeat="item in pkGuids.data">
                    <td md-cell>{{item.id}}</td>
                    <td md-cell>{{item.someText}}</td>
                    <td md-cell>{{item.someInt}}</td>
                    <td md-cell>{{item.createdAt | date : 'medium'}}</td>
                    <td md-cell>{{item.updatedAt == null ? 'Never' : item.updatedAt | date : 'medium'}}</td>
                    <td md-cell>
                        <md-button class="md-icon-button" ui-sref="pkguid_edit({id: item.id, pkguid: item})">
                            <md-icon class="material-icons">mode_edit</md-icon>
                        </md-button>
                        <md-button class="md-icon-button" ng-click="askRemoveOne(item)">
                            <md-icon class="material-icons">delete</md-icon>
                        </md-button>
                    </td>
                </tr>
                </tbody>
            </table>
        </md-table-container>
    </div>

    <md-table-pagination class="col-xs-11" md-limit="query.limit" md-limit-options="[1, 5, 10, 15]" md-page="query.page" md-total="{{pkGuids.count}}" md-on-paginate="getPkGuids" md-page-select></md-table-pagination>

    <div class="isa_error" ng-show="error != null">
        <i class="fa fa-times-circle"></i>
        {{ error.data.message }}
    </div>
</div>