Here we will learn UI grid (ng-grid) in angularjs with example, UI grid with sorting, filtering, paging/pagination and grouping in angularjs with examples.
UI Grid formerly known as ng-grid which is purely built on angularjs library and it covered all core grid features like sorting, paging, filtering, exporting, etc.
Following are the features available in UI Grid.
Following are the steps to use ui-grid in angularjs applications.
First, create a new application and open page and add the following angularjs reference file in the header section.
Now add the following ui-grid css and script files in header section of your page
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">Now add ui.grid module reference in angularjs application while defining module like as shown following
var app = angular.module("uigridApp", ["ui.grid"]);
In JavaScript file define array of object like as shown below to render data with ui-grid
$scope.users = [
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
.
.
.
{ name: "Rohini Alavala", age: 29, location: 'Chennai' }
];
Add following css style to your application to define ui grid dimensions
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
In html code we need to define ui-grid directive and specify JSON object to render data with ui-grid like as shown following
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
This is how we can use ui grid in our angularjs applications to render data in table formats.
Following is the example of showing data in table format using ui grid in angularjs applications.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
If we run above code our data will be shown in grid format and by default sorting functionality enabled for all columns. Now we will run and see the output of ui grid example to show data in table format.
Following is the result of binding data in table format using ui grid module in angularjs applications.
In angularjs by using ui grid we can implement or remove sorting functionality for columns based on our requirement with few lines of code.
Following is the syntax of implementing sorting functionality for columns in angularjs ui grid.
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableSorting: false }
]
};
If you observe above code, we enabled sorting feature by setting property enableSorting: true and disabling sorting feature for particular columns by setting property enableSorting: false based on our requirement.
Following is the example of using a sorting feature in angularjs ui grid.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Sorting Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableSorting: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Sorting Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</body>
</html>
Now we will run and see the output of angularjs ui grid sorting example.
Following is the result of implementing a sorting feature in angularjs ui grid application.
If we use UI Grid in angularjs applications, we can implement filtering functionality easily with few configurations.
Following is the syntax of implementing filter/search functionality for columns in angularjs ui grid.
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
If you observe above code, we enabled filtering feature by setting property enableFiltering: true and disabled filtering feature for particular columns by setting property enableFiltering: false based on our requirement.
Following is the example of implementing a filtering feature using angularjs ui grid.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Filtering Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location', enableFiltering: false }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Fitering Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</body>
</html>
If you observe above example, we enabled filtering feature with enableFiltering: true property and disabled filtering feature for “location” column.
Following is the result of angularjs ui grid filtering example.
In angularjs UI Grid we can implement paging/pagination easily with few lines of code.
Following is the syntax of implementing pagination for ui grid
var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
});
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>
</div>
As mentioned in above code we need add “ui.grid.pagination” reference to angular module and need to define pagination size.
Following is the example of implementing paging to UI Grid in angularjs application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Paging Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination"]);
app.controller("uigridCtrl", function ($scope) {
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 5,
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' },
{ name: "Siva Prasad", age: 38, location: 'Nagpur' },
{ name: "Sudheer Rayana", age: 25, location: 'Kakinada' },
{ name: "Honey Yemineni", age: 7, location: 'Nagpur' },
{ name: "Mahendra Dasari", age: 22, location: 'Vijayawada' },
{ name: "Mahesh Dasari", age: 23, location: 'California' },
{ name: "Nagaraju Dasari", age: 34, location: 'Atlanta' },
{ name: "Gopi Krishna", age: 29, location: 'Repalle' },
{ name: "Sudheer Uppala", age: 19, location: 'Guntur' },
{ name: "Sushmita", age: 27, location: 'Vizag' }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Paging Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="myGrid"></div>
</div>
</body>
</html>
Now we will run and see the output of above example.
Following is the result of implementing pagination to UI grid in angularjs application.