DevelopmentAngularJS

Create ergonomic grids with Angular UI Grid

angular, en

UI Grid is a library for AngularJS which adds a powerful tool to create tables. With UI Grid, you can organise your data, sort them, filter them, custom the grid, and a lot more ! It is very convenient to display and analyse data.
Here’s a short introduction to how UI Grid works, and some of its basic features.

Example of table made with UI Grid

How does it work ?

In your html page, a grid is basically only one <div> containing the ui-grid attribute that refers to the data and grid options (Make sure that this div tag is wrapped inside your Angular Controller).

1
<div ui-grid="gridOptions" class="grid"></div>

It’s inside the ui-grid attribute that the magic happens ! The ui-grid attribute refers to a JSON object (Let’s call it gridOptions) that contains all the information about the grid: the different options, and the link toward the data.

This is an example of the gridOptions object, located in the Controller:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$scope.gridOptions = {
    enableSorting: true,
    enableFiltering: true,
    data: 'data',
    columnDefs: [
        {
            field: 'firstName',
            displayName: 'First name'
      },
        {
            field: 'lastName',
            displayName: 'Last name'
      },
        {
            field: 'company',
            displayName: 'Company'
      },
        {
            field: 'employed',
            displayName: 'Employed',
            filter: {
                type: uiGridConstants.filter.SELECT,
                selectOptions: [
                    {
                        value: true,
                        label: 'True'
                    },
                    {
                        value: false,
                        label: 'False'
                    }
              ]
            }
      }]
};

It is easy to understand: you can see that the sorting and filtering features are enabled. The attribute data refers to a JSON object containing the data you want to display. The columnDefs attribute is where you define the values and options of the different columns of your grid.

There it is, you now know how to create a simple table with UI-Grid ! You can add a lot of other features, such as a tree view, column footers, custom filters…

UI-Grid has a great tutorial that presents and explains all its functionalities here.

Share