-
Notifications
You must be signed in to change notification settings - Fork 91
/
index.html
666 lines (631 loc) · 36.6 KB
/
index.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
<!doctype html>
<html ng-app="app">
<head>
<title>Smart Table documentation</title>
<script src="assets/lib/prism/prism.js"></script>
<script src="assets/lib/angular/angular.min.js"></script>
<script src="assets/lib/bootstrap/ui-bootstrap-custom-tpls-0.4.0-SNAPSHOT.js"></script>
<script src="assets/lib/smart-table/Smart-Table.debug.js"></script>
<script src="assets/js/app.js"></script>
<link rel="stylesheet" href="assets/css/mainStyle.css"/>
<!--<link rel="stylesheet" href="assets/css/bootstrap.css"/>-->
<link rel="stylesheet" href="assets/lib/prism/prism.css"/>
</head>
<body ng-controller="mainCtrl">
<header>
<h1 class="banner">Smart Table</h1>
<a class="git btn" href="https://github.com/lorenzofox3/Smart-Table"><i class="icon-white icon-download-alt"></i>Code on github</a>
<nav class="menu" scroll-treshold="100"><ul>
<li><a href="#section-intro">Introduction</a></li>
<li><a href="#section-basics">The basics</a></li>
<li><a href="#section-format">Format data</a></li>
<li><a href="#section-sort">Sort data</a></li>
<li><a href="#section-filter">Filter data</a></li>
<li><a href="#section-selection">Select row(s)</a></li>
<li><a href="#section-edit">Edit cell(s)</a></li>
<li><a href="#section-style">Simple style</a></li>
<li><a href="#section-cellTemplate">Cell template</a></li>
<li><a href="#section-pagination">Pagination</a></li>
<li><a href="#section-config">Summary</a></li>
</ul></nav>
</header>
<div class="main">
<section id="section-intro" ng-controller="paginationCtrl">
<h2>Introduction</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/Introduction"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p><strong>Smart table</strong> is an <a href="#">Angularjs</a> module to easily display data in a table with a set
of built in functionalities such filetering,
sorting, etc. While developing this module I made sure to focus on this particular points:</p>
<ul>
<li><strong>lightweight</strong>: smart-table is less than 13kb minified and has <strong>no
dependencies</strong> other than Angular itself
</li>
<li><strong>robust</strong>: smart-table is widely tested which makes the module really stable</li>
<li><strong>useful</strong>: smart-table will allow you to have a table on which you will be able to perform
common operations with <strong>simple</strong> configuration
</li>
<li><strong>developer friendly</strong>: the design of the module has been thought carefully and it is really
easy to get into the source code to modify/customise the module to best fit your needs.
You will find for example:
<ul>
<li>on the <a href="https://github.com/lorenzofox3/Smart-Table/tree/server-sample">different branches</a> of the project some custom implementation to turn
smart-table into a server driven table while changing less than 10 lines
</li>
<li>on <a href="http://plnkr.co/edit/xsJs8m?p=preview">plunker</a>(here made by Jiri Kavulak) some custom implementation with richer
functionalities
</li>
</ul>
</ul>
<p>Although smart-table is from far the best table module for angular :D, there are other table modules in the
angular ecosystem you might be interested in. The approach and philosophy are different and maybe more appropriate to your way of building web application. Among the most popular:</p>
<ul>
<li><a href="http://angular-ui.github.io/ng-grid/">ng-grid</a></li>
<li><a href="http://esvit.github.io/ng-table/#!/">ng-table</a></li>
</ul>
<p>If you want to play around, try this <a href="http://plnkr.co/edit/8Qectt?p=preview">plunker</a></p>
</section>
<section id="section-basics" ng-controller="basicsCtrl">
<h2>The basics</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/basics"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>
If you want to display data in a table it is really easy. You simply have to add the <em>smart-table</em> tag
into your markup (it is an element directive) and bind the <em>rows</em> (see markup tab) attribute
to an array somewhere in the scope. In our example we specify the data used to fill the table in a
controller.
</p>
<ul class="note">
<li><i class="icon-white icon-tags"></i>Without anything else, the table will use all the keys (which don't start with '$' to avoid collision
with angular related properties) as headers for the table
</li>
<li><i class="icon-white icon-tags"></i>It will also take default configuration values : here for instance you can sort by column as the
columns are sortable by default
</li>
</ul>
<div class="tab-container">
<tabs>
<pane heading="JavaScript">
<pre><code class="language-javascript">app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
}]);</code></pre>
</pane>
<pane active heading="Markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="basicsCtrl">
<smart-table rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
</div>
<div class="table-container">
<smart-table class="table table-striped" rows="rowCollection"></smart-table>
</div>
<p>
You can also specify the layout you want. That is where we introduce the column configuration. On our markup
we bind the <em>columns</em> attribute to an array in which we specify
how to display the data. The <em>label</em> property will give the header of the column whereas the <em>map</em> property
is the property in our data-model object we want a given column
to be bound to. A column will be inserted by column configuration.
</p>
<p class="note">The mapping can support multi-level mapping like "myObject.myInnerProperty"</p>
<div class="tab-container">
<tabs>
<pane heading="JavaScript">
<pre><code class="language-javascript">app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'same same but different', map: 'firstName'},
{label: 'Last Name', map: 'lastName'}
];
}]);</code></pre>
</pane>
<pane active heading="Markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="basicsCtrl">
<smart-table columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
</div>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
</section>
<section id="section-format" ng-controller="formatCtrl">
<h2>Format data</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/format"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>
In our previous examples the data were displayed as raw strings,but what if we want to format date, currency and so on in a proper way ?
In the column configuration, you can specify how to format the data for the given column by adding <em>formatFunction</em> and <em>formatParameter</em>
properties.
</p>
<ul>
<li>The <em>formatFunction</em> can be a function either a string
<ul>
<li>If it is a string, it is expected to be one of the angular filters name. The displayed data will be as if you have used the angular filter.</li>
<li>If you use a function, it must take the value to format as first parameter, then an optional <em>formatParameter</em>
<pre><code class="language-javascript">function (value, formatParameter) {
//do some stuff
return formatedValue;
}</code></pre>
</li>
</ul>
</li>
<li>The formatParameter is an optional parameter to pass to the format function. If you use one of the built in angular filter it will be for example the symbol you pass to the currency filter.</li>
</ul>
<tabs>
<pane heading="JavaScript">
<pre><code class="language-javascript">app.controller('sortCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName', formatFunction: function (value, formatParameter) {
//this only display the first letter
return value[0];
}},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'}
];
}]);</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="formatCtrl">
<smart-table columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
</section>
<section id="section-sort" ng-controller="sortCtrl">
<h2>Sort data</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/sort"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>You may also want to sort the data rows. By default the table sort the data rows following the <a href="http://docs.angularjs.org/api/ng.filter:orderBy">orderBy</a> angular algorithm but you can also use your own
algorithm (see below). When you click on one of the column header the orderBy algorithm will sort the data rows according to these rules
</p>
<ul>
<li>if you have set the <em>sortPredicate</em> property on the column config : it will use it as predicate for the orderBy algorithm (see <a href="http://docs.angularjs.org/api/ng.filter:orderBy">angular documentation</a>)</li>
<li>otherwise it will use the property name the column is mapped to as predicate for the orderBy algorithm (it simply means it will sort the data rows according to the clicked column values) </li>
</ul>
<p>You can also disable the sort function for a given column by setting the <em>isSortable</em> property to false (it is true by default)</p>
<tabs>
<pane heading="JavaScript">
<pre><code class="language-javascript">app.controller('sortCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName', sortPredicate: function (dataRow) {
//predicate as a function (see angular orderby documentation) : it will sort by the string length
return dataRow.firstName.length;
} },
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'},
{label: 'e-mail', map: 'email', isSortable: false}
];
}]);</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="sortCtrl">
<smart-table columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
<h3>Use your own algorithm</h3>
<p>If you would like to use your own sort algorithm instead of the orderBy from Angular you also can. That is where our table configuration comes.
You can bind the table-configuration attribute to an object that will represent the table "global" configuration. One of the global property is the
sort algorithm (<em>sortAlgorithm</em>).
</p>
<pre><code class="language-javascript">function customSortAlgorithm(arrayRef, sortPredicate, reverse) {
//do some stuff
return sortedArray;
}</code></pre>
</section>
<section id="section-filter" ng-controller="filterCtrl">
<h2>Search/filter data</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/filter"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>The <a href="#">table controller API</a> gives you a way to filter the data comparing an input to both a given column values or in the whole table.
To display an input textbox for a global search (in the whole table) you just have to set the <em>isGlobalSearchActivated</em> property to true in the table global config object. The algorithm used
will be the one used by the <a href="http://docs.angularjs.org/api/ng.filter:filter">filter</a> filter from Angular. Of course, if you want to use your own, you can specify it in the global config (see below)
</p>
<tabs>
<pane heading="JavaScript">
<pre><code class="language-javascript">app.controller('filterCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
//the headerTemplateUrl property will be explained later, the purpose here is to show we can filter also by column only
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase', headerTemplateUrl: 'assets/template/customHeader.html'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'},
{label: 'e-mail', map: 'email', isSortable: false}
];
scope.globalConfig = {
isGlobalSearchActivated: true
};
}]);</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="filterCtrl">
<smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
<h3>Use your own algorithm</h3>
<p>In the same way than for the sort operation you can use you own algorithm, you just have to specify the function you want to use in the global config
under the property <em>filterAlgorithm</em></p>
<pre><code class="language-javascript">function customFilter(arrayRef, expression) {
//do some stuff
return filteredArray;
}</code></pre>
</section>
<section id="section-selection" ng-controller="selectionCtrl">
<h2>Select data rows</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/selection"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>You can select data row according to two different modes : single or multiple (of course you can disable selection) by setting the global
property <em>selectionMode</em> to <em>single</em> or <em>multiple</em> (any other value will be taken as selectionMode='none'). This is the only time the table changes
a property value into your model: it add the "isSelected" property to your data model object. On one hand you can consider it "pollutes" your model but
on the other hand it allows the parent scope to quickly have a list of the selected items without relying on events. If you are in selectionMode="multiple" you can add a selection checkbox
column by setting the global property <em>displaySelectionCheckbox</em> to true</p>
<p class="note">Even though the configuration is dynamic the table does not prevent forbidden states : for example if you switch from selectionMode='single'
to 'none' with a selected item, the item will remain selected. It is the responsability of the parent scope/controller to reset the selected item</p>
<h3>Keep track of the changes in selection</h3>
<p>As mentioned before, whenever a row is selected/unselected the property isSelected change on the particular bound item. You can of course watch your model
to see when the selected items change however this is not really efficient regarding the performances. That is why an <em>selectionChange</em> event is emitted every time
there is something changed.
</p>
<tabs>
<pane heading="javascript">
<pre><code class="language-javascript">app.controller('selectionCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'},
{label: 'e-mail', map: 'email'}
];
//keep track of selected items
scope.$on('selectionChange', function (event, args) {
console.log(args);
});
scope.globalConfig = {
selectionMode: 'multiple',
displaySelectionCheckbox: true
};
}]);</code></pre>
</pane>
<pane heading="markup">
<pre><code class="language-markup"><div ng-controller="selectionCtrl">
<smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
<div class="side-controls">
<label ng-show="canDisplayCheckbox()" for="selection-checkbox">display checkbox:</label>
<input ng-show="canDisplayCheckbox()" id="selection-checkbox" type="checkbox" ng-model="globalConfig.displaySelectionCheckbox"/>
<label>selection mode:</label>
<select ng-model="globalConfig.selectionMode">
<option value="none">none</option>
<option value="single">single</option>
<option value="multiple">multiple</option>
</select>
</div>
<ul class="output-list">
<li ng-repeat="row in rowCollection">{{ row | json}}</li>
</ul>
</section>
<section id="section-edit" ng-controller="editCtrl">
<h2>Edit cell</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/edit"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>You can make the cells of a given column editable by simply setting the <em>isEditable</em> property to true in this column config. This will allow
you to edit directly the property on the data model object. Therefore, you may want to specify which type of input the cell will accept. You just
have to set the <em>type</em> property to the the type you want (email, number, etc). If the input is valid the model is updated, otherwise it will keep
the previous value</p>
<h3>notify an item has been updated</h3>
<p>In the same way than for selection changes, you don't want to watch the whole collection to know when a given property of a given item has bee updated. That
is why smart-table will raise the <em>updateDataRow</em> event to notify the parent scope when a row has been modified.</p>
<ul class="note">
<li>The data will be filtered/sorted after editing accordingly to the last settings</li>
<li>Double click to edit</li>
</ul>
<tabs>
<pane heading="javascript">
<pre><code class="language-javascript">app.controller('editCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
//every time a data row is updated
scope.$on('updateDataRow', function (event, arg) {
console.log(arg);
});
scope.columnCollection = [
{label: 'First Name', map: 'firstName', isEditable: true},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date', isEditable: true, type: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$', isEditable: true, type: 'number'},
{label: 'e-mail', map: 'email', isEditable: true, type: 'email'}
];
}]);</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="editCtrl">
<smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
<ul class="output-list">
<li ng-repeat="row in rowCollection">{{ row | json}}</li>
</ul>
</section>
<section id="section-style" ng-controller="styleCtrl">
<h2>Simple styling</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/style"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>This allows you to add a class name for the cells in a given column, and for the header as well. You'll have to specify the
<em>headerClass</em> and <em>cellClass</em> property in the column configuration</p>
<tabs>
<pane heading="javascript">
<pre><code class="language-javascript">app.controller('styleCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName', headerClass: "firstName-header"},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase', cellClass: "lastName-cell"},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency'},
{label: 'e-mail', map: 'email'}
];
}]);</code></pre>
</pane>
<pane heading="css">
<pre><code class="language-css">.firstName-header{
text-decoration: underline;
}
.lastName-cell{
color: red;
}</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable><code class="language-markup"><div ng-controller="styleCtrl>
<smart-table columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
</section>
<section id="section-cellTemplate" ng-controller="cellTemplateCtrl">
<h2>Cell Template</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/cellTemplate"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>If you prefer to use a particular template for the cells in a given column, you can do it by specifying the <em>cellTemplateUrl</em> property in the column config
this is useful not only for styling purpose but also if you want to enhance the behavior of the cell. The template will be compiled so that if it contains
directives they will be considered as angular directives. Moreover, these directives can have access to all the row and column data through the scope
</p>
<pre ><code class="language-javascript">scope.column;//the column object
scope.dataRow;//the data row object
scope.formatedValue;//the formated value (not the raw string)</code></pre>
<ul class="note"><li>You can use the table controller api in your directive</li>
<li>If you use your own template you may break some functionalities (particularly the edit function) and you will have to implement them
in your template/directive</li></ul>
<tabs>
<pane heading="javascript">
<pre class="language-javascript"><code
class="language-javascript">app.controller('cellTemplateCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency'},
{label: 'e-mail', map: 'email'},
{label: 'Favourite color', cellTemplateUrl: 'assets/template/custom.html'}
];
}]);</code></pre>
</pane>
<pane heading="markup">
<pre ng-non-bindable data-line="1"><code class="language-markup"><div>
<smart-table columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
<pane heading="custom.html">
<pre ng-non-bindable><code class="language-markup"><custom></custom></code></pre>
</pane>
<pane heading="custom.js">
<pre><code class="language-javascript">app.directive('custom', function () {
return {
restrict: 'E',
//include smart table controller to use its API if needed
require: '^smartTable',
template: '<select ng-model="favouriteColor">' +
'<option value="">--choose favorite color--</option>' +
'<option value="red">red</option>' +
'<option value="blue">blue</option>' +
'<option value="yellow">yellow</option>' +
'</select>',
replace: true,
link: function (scope, element, attrs, ctrl) {
//can use scope.dataRow, scope.column, scope.formatedValue, and ctrl API
var allowedColors = ['red', 'yellow', 'blue'];
scope.$watch('favouriteColor', function (value) {
if (allowedColors.indexOf(value) != -1) {
scope.dataRow.favouriteColor = scope.favouriteColor;
}
});
}
};
});</code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
<ul class="output-list">
<li ng-repeat="row in rowCollection">{{ row | json}}</li>
</ul>
<p>In the same way you can assign a custom template to the column header thanks to the column property <em>headerTemplateUrl</em>. See the source code
of the previous filter section as an example.</p>
<tabs>
<pane heading="JavaScript">
<pre class="language-javascript"><code>app.controller('filterCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'Last Name', map: 'lastName', formatFunction: 'uppercase', headerTemplateUrl: 'assets/template/customHeader.html'},
{label: 'Birth Date', map: 'birthDate', formatFunction: 'date'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'},
{label: 'e-mail', map: 'email'}
];
scope.globalConfig = {
isGlobalSearchActivated: true
};
}]);</code></pre>
</pane>
<pane heading="markup" >
<pre ng-non-bindable class="language-markup"><code><div ng-controller="filterCtrl">
<smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
<pane heading="customHeader.html" >
<pre ng-non-bindable class="language-markup"><code><span>{{column.label}}</span>
<input class="column-filter" type="text" ng-model="searchValue" /></code></pre>
</pane>
<pane heading="customHeader.js" >
<pre class="language-javascript"><code>app.directive('columnFilter', function () {
return {
restrict: 'C',
require: '^smartTable',
link: function (scope, element, attrs, ctrl) {
scope.searchValue = '';
scope.$watch('searchValue', function (value) {
ctrl.search(value, scope.column);
})
}
}
});</code></pre>
</pane>
</tabs>
</section>
<section id="section-pagination" ng-controller="paginationCtrl">
<h2>Client side Pagination</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/pagination"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>If you don't want to display too much data at the time you'll be happy using the pagination feature. It uses the <a href="https://github.com/angular-ui/bootstrap/tree/master/src/pagination">angular.ui-boostrap pagination directive</a> and you'll be able
to configure it through some global config properties. First of all, the property <em>isPaginationEnabled</em> must be set to true. Then you can decide the
number of pages you want to display with the <em>maxSize</em> property and the number of items you want to display on a page thanks to the <em>itemsByPage</em> property</p>
<ul class="note"><li>You may wonder why it has been decided to implement a client side pagination and not a server side pagination. Well in my opinion it does not
make sens to have the pagination on server side when you have the sort/filter on the client side. If you sort the data on the client side, but some are not loaded yet do you think the displayed
data are really relevant. I don't.</li>
<li>the event "pageChange" is emitted when the page is changed</li>
</ul>
<tabs>
<pane heading="JavaScript">
<pre class="language-javascript"><code>app.controller('paginationCtrl', ['$scope', function (scope) {
var
nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];
function createRandomItem() {
var
firstName = nameList[Math.floor(Math.random() * 4)],
lastName = familyName[Math.floor(Math.random() * 4)],
age = Math.floor(Math.random() * 100),
email = firstName + lastName + '@whatever.com',
balance = Math.random() * 3000;
return{
firstName: firstName,
lastName: lastName,
age: age,
email: email,
balance: balance
};
}
scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
scope.rowCollection.push(createRandomItem());
}
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'Last Name', map: 'lastName'},
{label: 'Age', map: 'age'},
{label: 'Balance', map: 'balance', formatFunction: 'currency', formatParameter: '$'},
{label: 'e-mail', map: 'email'}
];
scope.globalConfig = {
isPaginationEnabled: true,
itemsByPage: 12,
maxSize: 8
};
}]);</code></pre>
</pane>
<pane heading="markup">
<pre class="language-markup" ng-non-bindable><code><div ng-controller="paginationCtrl">
<smart-table config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div></code></pre>
</pane>
</tabs>
<div class="table-container">
<smart-table class="table table-striped" config="globalConfig" columns="columnCollection" rows="rowCollection"></smart-table>
</div>
</section>
<section id="section-config" ng-controller="configCtrl">
<h2>Configuration Summary</h2>
<a class="btn doc" href="https://github.com/lorenzofox3/smart-table-website/tree/gh-pages/sections/config"><i class="icon icon-edit"></i></a><span class="bubble">improve the documentation</span>
<p>Here is a summary of available configuration properties for column, and for global configuration</p>
<h4>Column</h4>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollectionColumn"></smart-table>
</div>
<h4>Global config</h4>
<div class="table-container">
<smart-table class="table table-striped" columns="columnCollection" rows="rowCollectionConfig"></smart-table>
</div>
</section>
</div>
</body>
</html>