Getting started with angular-ui-grid – Creating a Simple Grid

Step 1 – Include the uiGrid in your project

<link rel="styleSheet" href="release/ui-grid.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="/release/ui-grid.min.js"></script>

Step 2 – Add uiGrid module as a dependency to your app

var app = angular.module("myApp", ["ui-grid"]);

Step 3 – Data for the grid

$scope.myData = [
    {
        "firstName": "John",
        "lastName": "Doe"
    },
    {
        "firstName": "Jane",
        "lastName": "Doe"
    }
];

Step 4 – HTML Markup for the Grid

Use the ui-grid directive and pass in your scope property of myData.

<div ng-controller="mainCtrl">
    <div id="grid1" ui-grid="{ data: myData }"></div>
</div>

This should render a grid with two columns – First Name and Last Name.

It takes the keys of the first item of data array as column names and converts the camelCase style keys into proper words: "firstName" to "First Name".

Example on Plnkr

if you want to reproduce, please indicate the source:
Getting started with angular-ui-grid – Creating a Simple Grid - CodeDay