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>{{ 'pkguid.name' | translate }}</span>
                <span flex></span>
                <md-button class="md-icon-button" ng-click="showFilter(true)" title="{{ 'common.filter' | translate }}">
                    <md-icon class="material-icons">filter_list</md-icon>
                </md-button>
                <md-button class="md-icon-button" ui-sref="pkguid_add" title="{{ 'common.new' | translate }}">
                    <md-icon class="material-icons">add</md-icon>
                </md-button>
                <md-button class="md-icon-button" ng-click="getPkGuids()" title="{{ 'common.refresh' | translate }}">
                    <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>{{ 'common.filter' | translate }}</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)" title="{{ 'common.close' | translate }}">
                    <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>{{ 'pkguid.selectedItems' | translate:{count:selected.length} }}</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>{{ 'pkguid.id' | translate }}</span></th>
                    <th md-column md-order-by="someText"><span>{{ 'pkguid.someText' | translate }}</span></th>
                    <th md-column md-order-by="someInt" md-numeric>{{ 'pkguid.someInt' | translate }}</th>
                    <th md-column md-order-by="createdAt">{{ 'pkguid.createdAt' | translate }}</th>
                    <th md-column md-order-by="updatedAt">{{ 'pkguid.updatedAt' | translate }}</th>
                    <th md-column>{{ 'common.actions' | translate }}</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 ? ('common.never' | translate ) : (item.updatedAt | date : 'medium')}}</td>
                    <td md-cell>
                        <md-button class="md-icon-button" ui-sref="pkguid_edit({id: item.id, pkguid: item})" title="{{ 'common.edit' | translate }}">
                            <md-icon class="material-icons">mode_edit</md-icon>
                        </md-button>
                        <md-button class="md-icon-button" ng-click="askRemoveOne(item)" title="{{ 'common.delete' | translate }}">
                            <md-icon class="material-icons">delete</md-icon>
                        </md-button>
                    </td>
                </tr>
                </tbody>
            </table>
        </md-table-container>
    </div>

    <md-table-pagination md-label="{of: '{{ 'common.pagination.of' | translate }}', page: '{{ 'common.pagination.page' | translate }}', rowsPerPage: '{{ 'common.pagination.rowsPerPage' | translate }}'}"
                         class="col-xs-11" md-limit="query.limit" md-limit-options="[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>