var app = angular.module('app', ['ngAnimate', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{
field: 'gender',
cellTemplate: 'myTemplate'
},
{ field: 'company', enableSorting: false }
]
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
.grid {
width: 500px;
height: 200px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
Click on a column header to sort by that column. (The third column has sorting disabled.)
<br>
<br>
<div id="grid1" ui-grid="gridOptions" class="grid" external-scopes="myScope"></div>
</div>
<script type="text/ng-template" id="myTemplate">
<div class="ui-grid-cell-contents">
<span ng-if="grid.getCellValue(row, col).indexOf('fe') == 0">Lady: </span>
{{COL_FIELD CUSTOM_FILTERS}}
</div>
</script>
<script src="app.js"></script>
</body>
</html>