File tree Expand file tree Collapse file tree 3 files changed +72
-10
lines changed Expand file tree Collapse file tree 3 files changed +72
-10
lines changed Original file line number Diff line number Diff line change 1
- # Angular2 extension for tables
1
+ # DataTable component for Angular2
2
+
3
+ ## Installation
4
+
5
+ ```
6
+ npm -i angular2-table
7
+ ```
8
+
9
+ ## Usage example
10
+
11
+ app.ts
12
+ ``` TypeScript
13
+ import {Component } from ' angular2/core' ;
14
+ import {DataTableDirectives } from ' angular2-datatable/datatable' ;
15
+
16
+ @Component ({
17
+ selector: ' app' ,
18
+ templateUrl: ' app.html' ,
19
+ directives: [DataTableDirectives ]
20
+ })
21
+ export class App {
22
+ private data: any [] = ...
23
+ }
24
+ ```
25
+
26
+ app.html
27
+ ``` HTML
28
+ <table class =" table table-striped" [mfData] =" data" #mf =" mfDataTable" >
29
+ <thead >
30
+ <tr >
31
+ <th style =" width : 20% " >
32
+ <mfDefaultSorter by =" name" >Name</mfDefaultSorter >
33
+ </th >
34
+ <th style =" width : 50% " >
35
+ <mfDefaultSorter by =" email" >Email</mfDefaultSorter >
36
+ </th >
37
+ <th style =" width : 10% " >
38
+ <mfDefaultSorter by =" age" >Age</mfDefaultSorter >
39
+ </th >
40
+ <th style =" width : 20% " >
41
+ <mfDefaultSorter by =" city" >City</mfDefaultSorter >
42
+ </th >
43
+ </tr >
44
+ </thead >
45
+ <tbody >
46
+ <tr *ngFor =" #item of mf.data" >
47
+ <td >{{item.name}}</td >
48
+ <td >{{item.email}}</td >
49
+ <td class =" text-right" >{{item.age}}</td >
50
+ <td >{{item.city | uppercase}}</td >
51
+ </tr >
52
+ </tbody >
53
+ <tfoot >
54
+ <tr >
55
+ <td colspan =" 4" >
56
+ <mfBootstrapPaginator [rowsOnPageSet] =" [5,10,25]" [rowsOnPage] =" 5" ></mfBootstrapPaginator >
57
+ </td >
58
+ </tr >
59
+ </tfoot >
60
+ </table >
61
+ ```
Original file line number Diff line number Diff line change
1
+ ../README.md
Original file line number Diff line number Diff line change 1
1
{
2
- "name" : " mf- angular2-table " ,
3
- "version" : " 0.0.1 " ,
4
- "description" : " Table extension for angular2 apps. " ,
5
- "main" : " mf-angular2-table.js " ,
2
+ "name" : " angular2-datatable " ,
3
+ "version" : " 0.2.0 " ,
4
+ "description" : " DataTable component for Angular2 framework " ,
5
+ "main" : " datatable " ,
6
6
"scripts" : {
7
7
"watch" : " tsc -p src -w" ,
8
8
"build" : " rm -rf lib && tsc -p src"
9
9
},
10
10
"repository" : {
11
11
"type" : " git" ,
12
- "url" : " git+https://github.com/jhades /angular2-library-seed .git"
12
+ "url" : " git+https://github.com/mariuszfoltak /angular2-datatable .git"
13
13
},
14
14
"keywords" : [
15
15
" angular" ,
16
+ " angularjs" ,
16
17
" angular2" ,
18
+ " ng" ,
17
19
" ng2" ,
18
20
" table"
19
21
],
20
22
21
23
"license" : " MIT" ,
22
24
"bugs" : {
23
- "url" : " https://github.com/jhades /angular2-library-seed /issues"
25
+ "url" : " https://github.com/mariuszfoltak /angular2-datatable /issues"
24
26
},
25
- "homepage" : " https://github.com/jhades /angular2-library-seed #readme" ,
27
+ "homepage" : " https://github.com/mariuszfoltak /angular2-datatable #readme" ,
26
28
"devDependencies" : {
27
29
"typescript" : " ^1.8.7"
28
30
},
29
31
"dependencies" : {
30
32
"angular2" : " ^2.0.0-beta.0" ,
31
- "lodash" : " ^4.6.1" ,
32
- "rxjs" : " ^5.0.0-beta.0"
33
+ "lodash" : " ^4.6.1"
33
34
}
34
35
}
You can’t perform that action at this time.
0 commit comments