<link href="http://www.example.com/wp/wp-content/themes/ang/css/ng-grid.min.css" rel="stylesheet">
<link href="http://www.example.com/wp/wp-content/themes/ang/css/grid1.css" rel="stylesheet">
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/ng-grid.min.js'></script>
<script type='text/javascript' src='http://www.example.com/wp/wp-content/themes/ang/js/grid1.js'></script>
<div ng-controller="MyCtrl">
<div class="row">
<div class="col-sm-12">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
</div>
</div>
var myApp = angular.module('googleMapApp', ['ui.bootstrap','ngGrid']);
myApp.controller('MyCtrl', function($scope) {
$scope.myData = [
{name: "product-A", day: "2014/08/12", count: 50},
{name: "product-B", day: "2014/08/12", count: 43},
{name: "product-A", day: "2014/09/11", count: 27},
{name: "product-B", day: "2014/07/23", count: 29},
{name: "product-F", day: "2014/09/11", count: 27}
];
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{field: 'day', displayName: 'day (update)'},
{field: 'name', displayName: 'name (update)'},
{field: 'count', displayName: 'count (update)'}
],
headerRowHeight: 64
};
});
.gridStyle {
border: 1px solid rgb(212,212,212);
height: 300px;
width: 300px;
}
.ngHeaderText {
white-space: normal !important;
}