https://ui-grid.info/

1<!doctype html>
2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6<head>
7  <meta charset="utf-8">
8  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10  <!-- <link rel="stylesheet" href="/docs/css/bootstrap.min.css" /> -->
11  <!-- <link rel="stylesheet" href="/css/bootstrap-responsive.min.css" /> -->
12  <link rel="stylesheet" href="/docs/css/bootstrap-flatly.min.css" />
13  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
14  <link rel="stylesheet" href="/css/site.css" />
15  <link rel="stylesheet" href="//ui-grid.info/release/ui-grid-unstable.min.css" />
16  <link rel="shortcut icon" href="/docs/favicon.ico" />
17  

17<script>
18    ((window.gitter = {}).chat = {}).options = {
19      room: 'angular-ui/ui-grid'
20    };
21  </script>

21
22  

22<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

22
23</head>
24<body>
25
26  <nav class="navbar navbar-default navbar-fixed-top">
27    <div class="container">
28      <!-- Brand and toggle get grouped for better mobile display -->
29      <div class="navbar-header">
30        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
31          <span class="sr-only">Toggle navigation</span>
32          <span class="icon-bar"></span>
33          <span class="icon-bar"></span>
34          <span class="icon-bar"></span>
35        </button>
36        <a class="navbar-brand" href="/">UI Grid</a>
37      </div>
38
39      <!-- Collect the nav links, forms, and other content for toggling -->
40      <div class="collapse navbar-collapse" id="navbar-collapse-1">
41        <ul class="nav navbar-nav">
42          <li><a href="/docs/#!/api"><i class="fa fa-book fa-fw"></i> API</a></li>
43          <li><a href="/docs/#!/tutorial"><i class="fa fa-book fa-fw"></i> Tutorial</a></li>
44          <li><a href="/customizer/"><i class="fa fa-wrench fa-fw"></i> Customizer</a></li>
45        </ul>
46        <div class="navbar-header navbar-right">
47          <p class="navbar-text hidden-phone">
48            <a class="nav-gitter-link" href="https://gitter.im/angular-ui/ui-grid?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge"
49              style="">
50              <img class="nav-gitter-image" src="https://badges.gitter.im/Join%20Chat.svg"/>
51              <span class="sr-only">Gitter Join Chat</span>
52            </a>
53            <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-grid&type=watch&count=true"
54                  allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
55            <iframe class="nav-ghbtn" src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=ui-grid&type=fork&count=true"
56                  allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
57          </p>
58        </div>
59      </div><!-- /.navbar-collapse -->
60    </div><!-- /.container-fluid -->
61  </nav>
62  <div class="main-content">
63  <div class="intro">
64    <div class="jumbotron">
65      <div class="description">
66        <h1 class="text-center">Angular UI Grid</h1>
67        <p class="lead text-center">A data grid for <strong>AngularJS</strong>; part of the <strong><a href="http://angular-ui.github.io/">AngularUI</a></strong> suite</p>
68        <ul class="benefits text-left">
69          <li>Native AngularJS implementation, no jQuery</li>
70          <li>Performs well with large data sets; even <strong>10,000+</strong> rows</li>
71          <li>Plugin architecture allows you to use only the features you need</li>
72        </ul>
73        <p class="btn-group2 text-center">
74          <a class="btn btn-success btn-large" href="https://github.com/angular-ui/ui-grid" title="Code on Github">
75            <i class="fa fa-github fa-fw"></i>
76              Code on Github
77          </a>
78
79          <a class="btn btn-danger btn-large" href="https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release" title="Download 4.12.7">
80            <i class="fa fa-download fa-fw"></i>
81            <!-- Download <small>( 4.12.7 / 4.12.7 )</small> --> <!-- TODO(c0bra): note: not showing stable version till 3.0.0 is released -->
82
83            Download <small>( 4.12.7 )</small>
84          </a>
85
86          <a class="btn btn-success btn-large" href="/docs/#!/tutorial" title="Tutorial">
87            <i class="fa fa-book fa-fw"></i>
88            Tutorial
89          </a>
90        </p>
91        <div class="row">
92          <div class="col-sm-6 text-left">
93            <h4>Bower</h4>
94            <pre>bower install angular-ui-grid</pre>
95          </div>
96          <div class="col-sm-6 text-left">
97            <h4>NPM</h4>
98            <pre>npm install angular-ui-grid</pre>
99          </div>
100        </div>
101        <br>
102        <div class="alert alert-info">
103          <h3 class="text-center">
104            UI Grid <strong>v4.0.0</strong> has been released!  Check out the <a class="info-link" href="https://github.com/angular-ui/ui-grid">project on GitHub</a> for more information.
105          </h3>
106        </div>
107      </div>
108    </div>
109  </div>
110
111  <div class="container-fluid">
112    <div class="row">
113      <div class="col-xs-12 col-sm-6 col-lg-3">
114        <div class="feature">
115          <div class="feature-heading">
116            <i class="fa fa-4x fa-wrench"></i>
117          </div>
118          <h4 class="feature-heading">Configurable</h4>
119          <ul>
120            <li>Customizeable templates</li>
121            <li>Change look and feel with CSS and the <a href="/customizer/">customizer</a></li>
122            <li>Drop-in plugin system</li>
123          </ul>
124        </div>
125      </div>
126      <div class="col-xs-12 col-sm-6 col-lg-3">
127        <div class="feature">
128          <div class="feature-heading">
129            <i class="fa fa-4x fa-gear"></i>
130          </div>
131          <h4 class="feature-heading">Standard Features</h4>
132          <ul>
133            <li>Sorting</li>
134            <li>Filtering</li>
135            <li>User interaction</li>
136            <li>e2e testing integration</li>
137          </ul>
138          <h4 class="feature-heading">Advanced Features</h4>
139          <ul>
140            <li>Virtualization</li>
141            <li>Column pinning</li>
142            <li>Grouping</li>
143            <li>Edit in place</li>
144            <li>Expandable rows</li>
145            <li>Internationalisation</li>
146          </ul>
147          <h4 class="feature-heading">Third Party Features</h4>
148          <ul>
149            <li><a href="/docs/#!/tutorial/498_third_party_features">List of Third Party Features</a></li>
150          </ul>
151        </div>
152      </div>
153      <div class="col-xs-12 col-sm-12 col-lg-6">
154        <div class="feature" ng-app="demo">
155          <div class="feature-heading">
156            <i class="fa fa-4x fa-certificate"></i>
157          </div>
158          <h4 class="feature-heading">Basic Example</h4>
159          <div class="grid" ui-grid="gridOptionsSimple"></div>
160
161          <h4 class="feature-heading">Complex Example</h4>
162          <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns ui-grid-pagination></div>
163          <label>Language: </label>
164          <select ng-options="language for language in languages" ng-model="currentLanguage" ng-change="changeLanguage()"></select>
165        </div>
166      </div>
167    </div>
168  </div>
169
170  <br>
171  <br>
172  <br>
173
174  <div class="container-fluid">
175    <div class="row text-center">
176      <small class="muted">Special thanks to <a href="http://saucelabs.com">Sauce Labs</a> and <a href="http://browserstack.com">BrowserStack</a> for providing their testing platforms to open source projects for free.</small>
177    </div>
178  </div>
179
180  <br>
181  <br>
182
183  

183<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

183
184  

184<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

184
185  

185<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>

185
186  

186<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>

186
187  

187<script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>

187
188  

188<script>
189    angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns', 'ui.grid.pagination'])
190    .run(function($rootScope, uiGridConstants, i18nService) {
191      $rootScope.gridOptionsSimple = {
192        data: [
193          {
194              "name": "Ethel Price",
195              "gender": "female",
196              "company": "Enersol"
197          },
198          {
199              "name": "Claudine Neal",
200              "gender": "female",
201              "company": "Sealoud"
202          },
203          {
204              "name": "Beryl Rice",
205              "gender": "female",
206              "company": "Velity"
207          },
208          {
209              "name": "Wilder Gonzales",
210              "gender": "male",
211              "company": "Geekko"
212          },
213          {
214              "name": "Georgina Schultz",
215              "gender": "female",
216              "company": "Suretech"
217          },
218          {
219              "name": "Carroll Buchanan",
220              "gender": "male",
221              "company": "Ecosys"
222          },
223          {
224              "name": "Valarie Atkinson",
225              "gender": "female",
226              "company": "Hopeli"
227          },
228          {
229              "name": "Schroeder Mathews",
230              "gender": "male",
231              "company": "Polarium"
232          },
233          {
234              "name": "Lynda Mendoza",
235              "gender": "female",
236              "company": "Dogspa"
237          },
238          {
239              "name": "Sarah Massey",
240              "gender": "female",
241              "company": "Bisba"
242          },
243          {
244              "name": "Robles Boyle",
245              "gender": "male",
246              "company": "Comtract"
247          },
248          {
249              "name": "Evans Hickman",
250              "gender": "male",
251              "company": "Parleynet"
252          },
253          {
254              "name": "Dawson Barber",
255              "gender": "male",
256              "company": "Dymi"
257          },
258          {
259              "name": "Bruce Strong",
260              "gender": "male",
261              "company": "Xyqag"
262          },
263          {
264              "name": "Nellie Whitfield",
265              "gender": "female",
266              "company": "Exospace"
267          },
268          {
269              "name": "Jackson Macias",
270              "gender": "male",
271              "company": "Aquamate"
272          },
273          {
274              "name": "Pena Pena",
275              "gender": "male",
276              "company": "Quarx"
277          },
278          {
279              "name": "Lelia Gates",
280              "gender": "female",
281              "company": "Proxsoft"
282          },
283          {
284              "name": "Letitia Vasquez",
285              "gender": "female",
286              "company": "Slumberia"
287          },
288          {
289              "name": "Trevino Moreno",
290              "gender": "male",
291              "company": "Conjurica"
292          }
293        ]
294      };
295
296      $rootScope.gridOptionsComplex = {
297        enableFiltering: true,
298        showGridFooter: true,
299        showColumnFooter: true,
300        paginationPageSizes: [10, 20, 30],
301        paginationPageSize: 10,
302        columnDefs: [
303          { name: 'name', aggregationType: uiGridConstants.aggregationTypes.count, width: 150 },
304          { name: 'gender', filter: { term: 'male' }, width: 150, enableCellEdit: false,
305            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
306              if (grid.getCellValue(row,col) === 'male') {
307                return 'blue';
308              } else if (grid.getCellValue(row,col) === 'female') {
309                return 'pink';
310              }
311            }
312          },
313          { name: 'age', aggregationType: uiGridConstants.aggregationTypes.avg, width: 100 },
314          { name: 'company', enableFiltering: false, width: 200 }
315        ],
316        data: [
317          {
318              "name": "Ethel Price",
319              "gender": "female",
320              "company": "Enersol",
321              "age": 25
322          },
323          {
324              "name": "Claudine Neal",
325              "gender": "female",
326              "company": "Sealoud",
327              "age": 19
328          },
329          {
330              "name": "Beryl Rice",
331              "gender": "female",
332              "company": "Velity",
333              "age": 44
334          },
335          {
336              "name": "Wilder Gonzales",
337              "gender": "male",
338              "company": "Geekko",
339              "age": 26
340          },
341          {
342              "name": "Georgina Schultz",
343              "gender": "female",
344              "company": "Suretech",
345              "age": 53
346          },
347          {
348              "name": "Carroll Buchanan",
349              "gender": "male",
350              "company": "Ecosys",
351              "age": 64
352          },
353          {
354              "name": "Valarie Atkinson",
355              "gender": "female",
356              "company": "Hopeli",
357              "age": 35
358          },
359          {
360              "name": "Schroeder Mathews",
361              "gender": "male",
362              "company": "Polarium",
363              "age": 29
364          },
365          {
366              "name": "Lynda Mendoza",
367              "gender": "female",
368              "company": "Dogspa",
369              "age": 49
370          },
371          {
372              "name": "Sarah Massey",
373              "gender": "female",
374              "company": "Bisba",
375              "age": 40
376          },
377          {
378              "name": "Robles Boyle",
379              "gender": "male",
380              "company": "Comtract",
381              "age": 32
382          },
383          {
384              "name": "Evans Hickman",
385              "gender": "male",
386              "company": "Parleynet",
387              "age": 38
388          },
389          {
390              "name": "Dawson Barber",
391              "gender": "male",
392              "company": "Dymi",
393              "age": 21
394          },
395          {
396              "name": "Bruce Strong",
397              "gender": "male",
398              "company": "Xyqag",
399              "age": 61
400          },
401          {
402              "name": "Nellie Whitfield",
403              "gender": "female",
404              "company": "Exospace",
405              "age": 54
406          },
407          {
408              "name": "Jackson Macias",
409              "gender": "male",
410              "company": "Aquamate",
411              "age": 49
412          },
413          {
414              "name": "Pena Pena",
415              "gender": "male",
416              "company": "Quarx",
417              "age": 25
418          },
419          {
420              "name": "Lelia Gates",
421              "gender": "female",
422              "company": "Proxsoft",
423              "age": 54
424          },
425          {
426              "name": "Alfred Oscar",
427              "gender": "male",
428              "company": "Transprop",
429              "age": 34
430          },
431          {
432              "name": "John Alfred",
433              "gender": "male",
434              "company": "Haymans",
435              "age": 70
436          },
437          {
438              "name": "Leonie Warren",
439              "gender": "female",
440              "company": "Hilltop",
441              "age": 25
442          },
443          {
444              "name": "Belinda Gosford",
445              "gender": "female",
446              "company": "Archison",
447              "age": 42
448          },
449          {
450              "name": "Tracey Misoni",
451              "gender": "female",
452              "company": "Verizona",
453              "age": 34
454          },
455          {
456              "name": "Trevino Moreno",
457              "gender": "male",
458              "company": "Conjurica",
459              "age": 31
460          }
461        ]
462      };
463
464      $rootScope.languages = i18nService.getAllLangs();
465      $rootScope.currentLanguage = i18nService.getCurrentLang();
466      $rootScope.changeLanguage = function(){
467          i18nService.setCurrentLang($rootScope.currentLanguage);
468      };
469    });
470  </script>

470
471
472  

472<script>

472
473    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
474    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
475    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
476    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
477
478    ga('create', '

478UA-46391685-1

478', 'auto');
479    ga('send', 'pageview');
480
481  

481</script>

481
482</body>
483</html>