AngularJS UI Grid (Sorting, Filtering, Paging, Grouping)

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.

AngularJS UI Grid

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.

 

  1. Column Sorting either asc or desc or none
  2. Column Filtering
  3. Bind complex functionalities to cell values
  4. Ability to change header and cell content with custom templates
  5. Grouping
  6. Expandable Rows

Steps to use UI-Grid in AngualrJS

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.

 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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.

AngularJS UI Grid Example

Following is the example of showing data in table format using ui grid in angularjs applications.

 

Live Preview

<!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.

Output of AngularJS UI Grid Example

Following is the result of binding data in table format using ui grid module in angularjs applications.

 

Angularjs ui grid example result or output

AngularJS UI Grid Sorting

In angularjs by using ui grid we can implement or remove sorting functionality for columns based on our requirement with few lines of code.

Syntax of AngularJS UI Grid Sorting

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.

AngularJS UI Grid Sorting Example

Following is the example of using a sorting feature in angularjs ui grid.

 

Live Preview

<!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.

Output of AngularJS UI Grid Sorting Example

Following is the result of implementing a sorting feature in angularjs ui grid application.

 

Angularjs ui grid sorting example result or output

AngularJS UI Grid Filtering

If we use UI Grid in angularjs applications, we can implement filtering functionality easily with few configurations.

Syntax of AngularJS UI Grid Filtering

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.

AngularJS UI Grid Filtering Example

Following is the example of implementing a filtering feature using angularjs ui grid.

 

Live Preview

<!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.

Output of AngularJS UI Grid Filtering Example

Following is the result of angularjs ui grid filtering example.

 

Angularjs ui grid filtering example result or output

AngularJS UI Grid Paging / Pagination

In angularjs UI Grid we can implement paging/pagination easily with few lines of code.

Syntax of AngularJS UI Grid with Paging

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.

AngularJS UI Grid Paging / Pagination Example

Following is the example of implementing paging to UI Grid in angularjs application.

 

Live Preview

<!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.

Output of AngularJS UI Grid Pagination Example

Following is the result of implementing pagination to UI grid in angularjs application.

 

Angularjs ui grid paging example result or output