angular-data-grid-new
Version:
Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching, seamless synchronization with browser address bar and total freedom in mark-
203 lines (199 loc) • 11.9 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular Data Grid - Material Design</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.3.0/material.indigo-blue.min.css">
<link rel="stylesheet" href="css/angular-data-grid.material.css">
</head>
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
<div layout="column" layout-fill>
<md-toolbar layout="row" layout-align="center">
<div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
<span>Angular Data Grid — Material Design</span>
<md-menu md-position-mode="target-right target">
<md-button ng-click="$mdOpenMenu($event)">
<span layout="row" layout-align="center center">
Change theme
<i class="material-icons">arrow_drop_down</i>
</span>
</md-button>
<md-menu-content>
<md-menu-item>
<a href="../bootstrap/">Bootstrap Design</a>
</md-menu-item>
<md-menu-item>
<a href="index.html"><strong>Material Design</strong></a>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<div layout-padding layout="row" layout-align="center">
<div flex-gt-md="60" flex-md="80" flex-xs="100">
<h4>Angular Data Grid sample using Material Design styling</h4>
<p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and input controls used,
along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for grid styling.
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
target="_blank">Project GitHub</a></p>
<h4>Additional Demos</h4>
<ul>
<li>
<a href="../fixed-header/angular-md-grid.html" target="_blank">Fixed header table</a>
</li>
</ul>
<hr>
<div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
<div layout="row" layout-align="start center">
<md-input-container md-no-float md-is-error="false" class="md-block">
<input ng-model="code"
class="md-input"
ng-change="gridActions.filter()"
id="order"
placeholder="Search by Order #"
filter-by="code"
filter-type="text"
aria-invalid="false">
</md-input-container>
</div>
<div layout="row" layout-align="start center">
<md-datepicker ng-model="dateFrom"
md-placeholder="From Date"
is-open="dateFromOpened"
ng-click="dateFromOpened = true"
filter-by="placed"
filter-type="dateFrom"
ng-change="gridActions.filter()">
</md-datepicker>
</div>
<div layout="row" layout-align="start center">
<md-datepicker ng-model="dateTo"
md-placeholder="To Date"
is-open="dateToOpened"
ng-click="dateToOpened = true"
filter-by="placed"
filter-type="dateTo"
ng-change="gridActions.filter()">
</md-datepicker>
</div>
<div layout="row" layout-align="start center">
<md-button ng-show="dateTo || dateFrom"
class="md-raised md-primary"
ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
</md-button>
</div>
</div>
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
<div layout-gt-sm="row" layout-sm="column" layout-align="center">
<div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
<span>{{filtered.length}} items total</span>
</div>
<div flex-gt-sm="75" flex-xs="100">
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination mdl-shadow--2dp"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<md-option ng-value="10">10</md-option>
<md-option ng-value="25">25</md-option>
<md-option ng-value="50">50</md-option>
<md-option ng-value="75">75</md-option>
</md-select>
</md-input-container>
</div>
</div>
</div>
<div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
<span>Order #</span>
<span class="arrow"></span>
</th>
<th class="st-sort-disable th-dropdown">
<md-select filter-by="statusDisplay"
filter-type="select"
ng-model="status"
placeholder="Status"
ng-change="filter()">
<md-option value="">All Statuses</md-option>
<md-option ng-repeat="option in statusOptions track by option.value"
value="{{option.value}}">
{{option.text}}
</md-option>
</md-select>
</th>
<th sortable="placed" class="sortable">
<span>Date Placed</span>
<span class="arrow"></span>
</th>
<th sortable='total.value' class="sortable">
<span>Total</span>
<span class="arrow"></span>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td class="mdl-data-table__cell--non-numeric">
<span ng-bind="item.code"></span>
</td>
<td ng-bind="item.statusDisplay"></td>
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
<td ng-bind="item.total.formattedValue"></td>
</tr>
</tbody>
</table>
</div>
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
<grid-pagination max-size="5"
boundary-links="true"
class="pagination"
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
total-items="paginationOptions.totalItems"
ng-model="paginationOptions.currentPage"
ng-change="reloadGrid()"
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
<md-option ng-value="10">10</md-option>
<md-option ng-value="25">25</md-option>
<md-option ng-value="50">50</md-option>
<md-option ng-value="75">75</md-option>
</md-select>
</md-input-container>
</div>
</div>
<hr>
<md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
<div ng-show="showCode" class="codepen-wrap">
<p data-height="768" data-theme-id="21603" data-slug-hash="eJWWpM" data-default-tab="html" data-user="AngularDataGrid" class='codepen'>See the Pen <a
href='http://codepen.io/AngularDataGrid/pen/eJWWpM'>eJWWpM</a> by AngularDataGrid (<a href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<hr>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<script src="../../dist/pagination.min.js"></script>
<script src="../../dist/dataGrid.min.js"></script>
<script src="js/demoApp.js"></script>
</html>