- AngularJS : 1.6.5
- ui-grid : 4.0.6
- include file
ui-grid.min.css,angular.min.js,ui-grid.min.js
<link href="http://www.example.com/wp/wp-content/themes/ang/css/ui-grid.min.css" rel="stylesheet"> <link href="http://www.example.com/wp/wp-content/themes/ang/css/grid.css" rel="stylesheet"> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ui-grid.min.js'></script> <script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid.js'></script> <div ng-controller="MyCtrl"> <div class="myGrid" ui-grid="gridOptions"></div> </div>
var myApp = angular.module('MyApp', ['ui.grid']);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.myData = [
{name: "product-A", day: "2014-08-12", price: 50, avg: 30.5422},
{name: "product-B", day: "2014-08-15", price: 43, avg: 52.4411},
{name: "product-C", day: "2014-09-11", price: 27, avg: 21.1190},
{name: "product-D", day: "2014-07-23", price: 29, avg: 34.8741},
{name: "product-E", day: "2014-09-19", price: 27, avg: 19.8000}
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{field: 'name', cellFilter: 'uppercase'},
{field: 'day', cellFilter: 'date: "mediumDate"'},
{field: 'price', cellFilter: 'currency'},
{field: 'avg', cellFilter: 'number: 2'}
]
};
}]);
(grid.css)
.myGrid {
height: 300px;
}