Skip to content

Commit e892173

Browse files
dtaylor113dtaylor113
committed
pfTableView: Initial table-view using angular-datatables
1 parent 4f9cabd commit e892173

File tree

7 files changed

+153
-5
lines changed

7 files changed

+153
-5
lines changed

‎Gruntfile.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,12 @@ module.exports = function (grunt) {
8282
src: ['**'],
8383
dest: 'dist/docs',
8484
expand: true
85+
},
86+
tableImgs: {
87+
cwd: 'lib/datatables/media/images',
88+
src: 'sort_*',
89+
dest: 'docs/images',
90+
expand: true
8591
}
8692
},
8793
cssmin: {
@@ -125,11 +131,16 @@ module.exports = function (grunt) {
125131
dest: 'docs',
126132
image: 'misc/logo-alt.svg',
127133
scripts: [
134+
'node_modules/jquery/dist/jquery.js',
135+
'node_modules/datatables.net/js/jquery.dataTables.js',
136+
'node_modules/datatables.net-select/js/dataTables.select.js',
128137
'node_modules/moment/moment.js',
129138
'node_modules/c3/c3.js',
130139
'node_modules/d3/d3.js',
131140
'node_modules/patternfly/dist/js/patternfly-settings.js',
132141
'node_modules/angular/angular.js',
142+
'node_modules/angular-datatables/dist/angular-datatables.min.js',
143+
'node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js',
133144
'node_modules/angular-sanitize/angular-sanitize.js',
134145
'node_modules/angular-animate/angular-animate.js',
135146
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
@@ -139,8 +150,12 @@ module.exports = function (grunt) {
139150
'node_modules/angular-ui-router/release/angular-ui-router.min.js'],
140151
html5Mode: false,
141152
template: 'grunt-ngdocs-index.tmpl',
142-
styles: ['node_modules/patternfly/dist/css/patternfly.css', 'node_modules/patternfly/dist/css/patternfly-additions.css',
143-
'dist/styles/angular-patternfly.css', 'misc/ng-docs.css', 'misc/examples.css']
153+
styles: ['node_modules/datatables.net-dt/css/jquery.dataTables.css',
154+
'node_modules/patternfly/dist/css/patternfly.css',
155+
'node_modules/patternfly/dist/css/patternfly-additions.css',
156+
'dist/styles/angular-patternfly.css',
157+
'misc/ng-docs.css',
158+
'misc/examples.css']
144159
},
145160

146161
all: ['src/**/*.js']
@@ -203,6 +218,11 @@ module.exports = function (grunt) {
203218
src: ['sort/**/*.html'],
204219
dest: 'templates/sort.js'
205220
},
221+
'patternfly.table': {
222+
cwd: 'src/',
223+
src: ['table/**/*.html'],
224+
dest: 'templates/table.js'
225+
},
206226
'patternfly.toolbars': {
207227
cwd: 'src/',
208228
src: ['toolbars/**/*.html'],
@@ -263,7 +283,7 @@ module.exports = function (grunt) {
263283
}
264284
});
265285

266-
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:styles', 'copy:img']);
286+
grunt.registerTask('copymain', ['copy:docdata', 'copy:fa', 'copy:styles', 'copy:img', 'copy:tableImgs']);
267287

268288
// You can specify which modules to build as arguments of the build task.
269289
grunt.registerTask('build', 'Create bootstrap build files', function () {

‎bower.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@
4242
"angular-sanitize": "1.5.*",
4343
"angular-bootstrap": "2.2.x",
4444
"lodash": "4.x",
45-
"patternfly": "~3.15.0"
45+
"patternfly": "~3.15.0",
46+
"angular-datatables": "^0.5.5",
47+
"datatables.net": "^1.10.12",
48+
"datatables.net-select": "~1.2.0"
4649
},
4750
"devDependencies": {
4851
"angular-mocks": "1.5.*",

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@
5252
"c3": "~0.4.11",
5353
"d3": "~3.5.17",
5454
"jquery": "~2.1.4",
55-
"moment": "~2.14.1"
55+
"moment": "~2.14.1",
56+
"angular-datatables": "^0.5.5",
57+
"datatables.net": "^1.10.12",
58+
"datatables.net-select": "~1.2.0"
5659
},
5760
"scripts": {
5861
"test": "grunt test"

‎src/table/table.module.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @name patternfly
3+
*
4+
* @description
5+
* Table module for patternfly.
6+
*
7+
*/
8+
angular.module('patternfly.table', ['datatables', 'patternfly.utils', 'patternfly.filters', 'patternfly.sort']);

‎src/table/tableview/table-view.component.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.table.component:pfTableView
4+
*
5+
* @description
6+
* Component for rendering a table view.
7+
*
8+
* @param {array} items Array of items to display in the table view.
9+
* @param {array} col-headers Array of column headers to display in the table's header row
10+
* @example
11+
<example module="patternfly.table">
12+
<file name="index.html">
13+
<div ng-controller="TableCtrl" class="row example-container">
14+
<div class="col-md-12 list-view-container">
15+
<pf-table-view class="example-list-view" id="exampleTableView"
16+
col-headers="colHeaders"
17+
items="items">
18+
</pf-table-view>
19+
</div>
20+
</div>
21+
</file>
22+
23+
<file name="script.js">
24+
angular.module('patternfly.table').controller('TableCtrl', ['$scope',
25+
function ($scope) {
26+
$scope.colHeaders = [
27+
{ title: "Name" },
28+
{ title: "Address" },
29+
{ title: "City" },
30+
{ title: "State" },
31+
];
32+
33+
$scope.items = [
34+
{
35+
name: "Fred Flintstone",
36+
address: "20 Dinosaur Way",
37+
city: "Bedrock",
38+
state: "Washingstone"
39+
},
40+
{
41+
name: "John Smith",
42+
address: "415 East Main Street",
43+
city: "Norfolk",
44+
state: "Virginia",
45+
},
46+
{
47+
name: "Frank Livingston",
48+
address: "234 Elm Street",
49+
city: "Pittsburgh",
50+
state: "Pennsylvania"
51+
},
52+
{
53+
name: "Linda McGovern",
54+
address: "22 Oak Street",
55+
city: "Denver",
56+
state: "Colorado"
57+
},
58+
{
59+
name: "Jim Brown",
60+
address: "72 Bourbon Way",
61+
city: "Nashville",
62+
state: "Tennessee"
63+
},
64+
{
65+
name: "Holly Nichols",
66+
address: "21 Jump Street",
67+
city: "Hollywood",
68+
state: "California"
69+
},
70+
{
71+
name: "Marie Edwards",
72+
address: "17 Cross Street",
73+
city: "Boston",
74+
state: "Massachusetts"
75+
},
76+
{
77+
name: "Pat Thomas",
78+
address: "50 Second Street",
79+
city: "New York",
80+
state: "New York"
81+
},
82+
];
83+
}
84+
]);
85+
</file>
86+
</example>
87+
*/
88+
angular.module('patternfly.table').component('pfTableView', {
89+
bindings: {
90+
items: '<',
91+
colHeaders: '<'
92+
},
93+
templateUrl: 'table/tableview/table-view.html',
94+
controller: function (DTOptionsBuilder) {
95+
'use strict';
96+
var ctrl = this;
97+
98+
ctrl.dtOptions = DTOptionsBuilder.newOptions().withDOM('t');
99+
}
100+
});

‎src/table/tableview/table-view.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<table datatable="ng" dt-options="$ctrl.dtOptions" class="row-border hover">
2+
<thead>
3+
<tr>
4+
<th ng-repeat="colHeader in $ctrl.colHeaders">{{$ctrl.colHeader.title}}</th>
5+
</tr>
6+
</thead>
7+
<tbody>
8+
<tr ng-repeat="item in $ctrl.items">
9+
<td ng-repeat="propValue in item">{{ propValue }}</td>
10+
</tr>
11+
</tbody>
12+
</table>

‎test/karma.conf.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = function(config) {
99
// list of files / patterns to load in the browser
1010
files: [
1111
'node_modules/jquery/dist/jquery.js',
12+
'node_modules/datatables.net/js/jquery.dataTables.js',
1213
'node_modules/moment/moment.js',
1314
'node_modules/bootstrap-select/js/bootstrap-select.js',
1415
'node_modules/d3/d3.js',
@@ -20,6 +21,7 @@ module.exports = function(config) {
2021
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js',
2122
'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
2223
'misc/angular-bootstrap-prettify.js',
24+
'node_modules/angular-datatables/dist/angular-datatables.min.js',
2325
'node_modules/lodash/lodash.js',
2426
'misc/test-lib/helpers.js',
2527
'src/**/*.module.js',

0 commit comments

Comments
 (0)