Skip to content

Commit b2f54c7

Browse files
cdcabreracdcabrera
authored
Merge pull request #512 from dtaylor113/custom-template
pfTableView: Allow use of custom templates to render cells. Added icons, links, and truncated text
2 parents b0a1575 + b44f809 commit b2f54c7

File tree

5 files changed

+163
-11
lines changed

5 files changed

+163
-11
lines changed

‎src/table/tableview/examples/table-view-basic.js‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,20 @@
1616
* </ul>
1717
* @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
1818
* @param {array} items Array of items to display in the table view.
19-
* @param {array} columns Array of table column information to display in the table's header row
19+
* @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column.
2020
* <ul style='list-style-type: none'>
2121
* <li>.header - (string) Text label for a column header
2222
* <li>.itemField - (string) Item field to associate with a particular column.
23+
* <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Ex: htmlTemplate="name_template.html". The template will be used to render each cell of the column.
24+
* Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
25+
* 'value' is the item[key] value.
26+
* <pre>
27+
* <script type="text/ng-template" id="name_template.html">
28+
* <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
29+
* </script>
30+
* </pre>
31+
* <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
32+
* callback function.
2333
* </ul>
2434
* @param {array} actionButtons List of action buttons in each row
2535
* <ul style='list-style-type: none'>
@@ -70,6 +80,15 @@
7080
<textarea rows="10" class="col-md-12">{{eventText}}</textarea>
7181
</div>
7282
</div>
83+
<script type="text/ng-template" id="status_template.html">
84+
<span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
85+
<span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
86+
<span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
87+
{{value}}
88+
</script>
89+
<script type="text/ng-template" id="name_template.html">
90+
<a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
91+
</script>
7392
</file>
7493
7594
<file name="module.js">
@@ -84,7 +103,8 @@
84103
};
85104
86105
$scope.columns = [
87-
{ header: "Name", itemField: "name" },
106+
{ header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
107+
{ header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
88108
{ header: "Address", itemField: "address"},
89109
{ header: "City", itemField: "city" },
90110
{ header: "State", itemField: "state"}
@@ -120,6 +140,10 @@
120140
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
121141
};
122142
143+
function onNameClick (name) {
144+
$scope.eventText = "You clicked on " + name + "\n" + $scope.eventText;
145+
}
146+
123147
$scope.actionButtons = [
124148
{
125149
name: 'Action',
@@ -188,48 +212,56 @@
188212
setTimeout(function() {
189213
let items = [
190214
{
215+
status: "error",
191216
name: "Fred Flintstone",
192217
address: "20 Dinosaur Way",
193218
city: "Bedrock",
194219
state: "Washingstone"
195220
},
196221
{
222+
status: "error",
197223
name: "John Smith",
198224
address: "415 East Main Street",
199225
city: "Norfolk",
200226
state: "Virginia",
201227
},
202228
{
229+
status: "warning",
203230
name: "Frank Livingston",
204231
address: "234 Elm Street",
205232
city: "Pittsburgh",
206233
state: "Pennsylvania"
207234
},
208235
{
236+
status: "ok",
209237
name: "Linda McGovern",
210238
address: "22 Oak Street",
211239
city: "Denver",
212240
state: "Colorado"
213241
},
214242
{
243+
status: "error",
215244
name: "Jim Brown",
216245
address: "72 Bourbon Way",
217246
city: "Nashville",
218247
state: "Tennessee"
219248
},
220249
{
250+
status: "ok",
221251
name: "Holly Nichols",
222252
address: "21 Jump Street",
223253
city: "Hollywood",
224254
state: "California"
225255
},
226256
{
257+
status: "error",
227258
name: "Marie Edwards",
228259
address: "17 Cross Street",
229260
city: "Boston",
230261
state: "Massachusetts"
231262
},
232263
{
264+
status: "ok",
233265
name: "Pat Thomas",
234266
address: "50 Second Street",
235267
city: "New York",

‎src/table/tableview/examples/table-view-with-toolbar.js‎

Lines changed: 82 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,23 @@
1212
* <li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
1313
* <li>.itemsAvailable - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
1414
* <li>.showCheckboxes - (boolean) Show checkboxes for row selection, default is true
15-
* </ul>
15+
* </ul>
1616
* @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
1717
* @param {array} items Array of items to display in the table view.
18-
* @param {array} columns Array of table column information to display in the table's header row
18+
* @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column.
1919
* <ul style='list-style-type: none'>
2020
* <li>.header - (string) Text label for a column header
2121
* <li>.itemField - (string) Item field to associate with a particular column.
22+
* <li>.htmlTemplate - (string) (optional) id/name of an embedded ng/html template. Ex: htmlTemplate="name_template.html". The template will be used to render each cell of the column.
23+
* Use <code>handleColAction(key, value)</code> in the template to call the <code>colActionFn</code> callback function you specify. 'key' is the item attribute name; which should equal the itemFld of a column.
24+
* 'value' is the item[key] value.
25+
* <pre>
26+
* <script type="text/ng-template" id="name_template.html">
27+
* <a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
28+
* </script>
29+
* </pre>
30+
* <li>.colActionFn - (function) (optional) Callback function used for the column. 'value' is passed as a paramenter to the
31+
* callback function.
2232
* </ul>
2333
* @param {array} actionButtons List of action buttons in each row
2434
* <ul style='list-style-type: none'>
@@ -36,6 +46,37 @@
3646
* @example
3747
<example module="patternfly.tableview.demo">
3848
<file name="index.html">
49+
<style>
50+
.truncate-text-container {
51+
position: relative;
52+
max-width: 100%;
53+
padding: 0 !important;
54+
display: -webkit-flex;
55+
display: -moz-flex;
56+
display: flex;
57+
vertical-align: text-bottom !important;
58+
}
59+
.truncate-text-ellipsis {
60+
position: absolute;
61+
white-space: nowrap;
62+
overflow-y: visible;
63+
overflow-x: hidden;
64+
text-overflow: ellipsis;
65+
-ms-text-overflow: ellipsis;
66+
-o-text-overflow: ellipsis;
67+
max-width: 100%;
68+
min-width: 0;
69+
top: 0;
70+
left: 0;
71+
}
72+
.truncate-text-container:after,
73+
.truncate-text-ellipsis:after {
74+
content: '-';
75+
display: inline-block;
76+
visibility: hidden;
77+
width: 0;
78+
}
79+
</style>
3980
<div ng-controller="ViewCtrl" class="row example-container">
4081
<div class="col-md-12">
4182
<pf-toolbar id="exampleToolbar" config="toolbarConfig"></pf-toolbar>
@@ -76,6 +117,22 @@
76117
<div class="col-md-12">
77118
<textarea rows="6" class="col-md-12">{{actionsText}}</textarea>
78119
</div>
120+
<script type="text/ng-template" id="status_template.html">
121+
<span ng-if="value === 'error'" class="pficon pficon-error-circle-o"></span>
122+
<span ng-if="value === 'warning'" class="pficon pficon-warning-triangle-o"></span>
123+
<span ng-if="value === 'ok'" class="pficon pficon-ok"></span>
124+
{{value}}
125+
</script>
126+
<script type="text/ng-template" id="name_template.html">
127+
<a href="" ng-click="$ctrl.handleColAction(key, value)">{{value}}</a>
128+
</script>
129+
<script type="text/ng-template" id="address_template.html">
130+
<span class="truncate-text-container">
131+
<span class="truncate-text-ellipsis" title="{{value}}">
132+
{{value}}
133+
</span>
134+
</span>
135+
</script>
79136
</div>
80137
</file>
81138
@@ -89,9 +146,10 @@
89146
$scope.actionsText = "";
90147
91148
$scope.columns = [
92-
{ header: "Name", itemField: "name" },
149+
{ header: "Status", itemField: "status", htmlTemplate: "status_template.html" },
150+
{ header: "Name", itemField: "name", htmlTemplate: "name_template.html", colActionFn: onNameClick },
93151
{ header: "Age", itemField: "age"},
94-
{ header: "Address", itemField: "address" },
152+
{ header: "Address", itemField: "address", htmlTemplate: "address_template.html" },
95153
{ header: "BirthMonth", itemField: "birthMonth"}
96154
];
97155
@@ -120,96 +178,112 @@
120178
121179
$scope.allItems = [
122180
{
181+
status: "error",
123182
name: "Fred Flintstone",
124183
age: 57,
125184
address: "20 Dinosaur Way, Bedrock, Washingstone",
126185
birthMonth: 'February'
127186
},
128187
{
188+
status: "ok",
129189
name: "John Smith",
130190
age: 23,
131191
address: "415 East Main Street, Norfolk, Virginia",
132192
birthMonth: 'October'
133193
},
134194
{
195+
status: "warning",
135196
name: "Frank Livingston",
136197
age: 71,
137198
address: "234 Elm Street, Pittsburgh, Pennsylvania",
138199
birthMonth: 'March'
139200
},
140201
{
202+
status: "ok",
141203
name: "Judy Green",
142204
age: 21,
143205
address: "2 Apple Boulevard, Cincinatti, Ohio",
144206
birthMonth: 'December'
145207
},
146208
{
209+
status: "ok",
147210
name: "Pat Thomas",
148211
age: 19,
149212
address: "50 Second Street, New York, New York",
150213
birthMonth: 'February'
151214
},
152215
{
216+
status: "error",
153217
name: "Linda McGovern",
154218
age: 32,
155219
address: "22 Oak Stree, Denver, Colorado",
156220
birthMonth: 'March'
157221
},
158222
{
223+
status: "warning",
159224
name: "Jim Brown",
160225
age: 55,
161226
address: "72 Bourbon Way. Nashville. Tennessee",
162227
birthMonth: 'March'
163228
},
164229
{
230+
status: "ok",
165231
name: "Holly Nichols",
166232
age: 34,
167233
address: "21 Jump Street, Hollywood, California",
168234
birthMonth: 'March'
169235
},
170236
{
237+
status: "ok",
171238
name: "Wilma Flintstone",
172239
age: 47,
173240
address: "20 Dinosaur Way, Bedrock, Washingstone",
174241
birthMonth: 'February'
175242
},
176243
{
244+
status: "warning",
177245
name: "Jane Smith",
178246
age: 22,
179247
address: "415 East Main Street, Norfolk, Virginia",
180248
birthMonth: 'April'
181249
},
182250
{
251+
status: "error",
183252
name: "Liz Livingston",
184253
age: 65,
185254
address: "234 Elm Street, Pittsburgh, Pennsylvania",
186255
birthMonth: 'November'
187256
},
188257
{
258+
status: "ok",
189259
name: "Jim Green",
190260
age: 23,
191261
address: "2 Apple Boulevard, Cincinatti, Ohio",
192262
birthMonth: 'January'
193263
},
194264
{
265+
status: "ok",
195266
name: "Chris Thomas",
196267
age: 21,
197268
address: "50 Second Street, New York, New York",
198269
birthMonth: 'October'
199270
},
200271
{
272+
status: "error",
201273
name: "Larry McGovern",
202274
age: 34,
203275
address: "22 Oak Stree, Denver, Colorado",
204276
birthMonth: 'September'
205277
},
206278
{
279+
status: "warning",
207280
name: "July Brown",
208281
age: 51,
209282
address: "72 Bourbon Way. Nashville. Tennessee",
210283
birthMonth: 'May'
211284
},
212285
{
286+
status: "error",
213287
name: "Henry Nichols",
214288
age: 36,
215289
address: "21 Jump Street, Hollywood, California",
@@ -283,6 +357,10 @@
283357
}
284358
}
285359
360+
function onNameClick (name) {
361+
$scope.actionsText = "You clicked on " + name + "\n" + $scope.actionsText;
362+
}
363+
286364
$scope.filterConfig = {
287365
fields: [
288366
{

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,9 +310,9 @@ angular.module('patternfly.table').component('pfTableView', {
310310
var anNodes = document.querySelectorAll("#" + ctrl.tableId + " tbody tr");
311311

312312
for (i = 0; i < anNodes.length; ++i) {
313-
rowData = oTable.fnGetData(anNodes[i]);
313+
rowData = anNodes[i].cells;
314314
if (rowData !== null) {
315-
visibleRows.push(rowData[ctrl.selectionMatchPropColNum]);
315+
visibleRows.push(_.trim(rowData[ctrl.selectionMatchPropColNum].innerText));
316316
}
317317
}
318318

@@ -344,6 +344,29 @@ angular.module('patternfly.table').component('pfTableView', {
344344
return retVal;
345345
};
346346

347+
ctrl.hasHTMLTemplate = function (key) {
348+
var htmlTemplate = this.getHTMLTemplate(key);
349+
return htmlTemplate.length > 0;
350+
};
351+
352+
ctrl.getHTMLTemplate = function (key) {
353+
var retVal = '';
354+
var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
355+
356+
if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('htmlTemplate')) {
357+
retVal = tableCol[0].htmlTemplate;
358+
}
359+
return retVal;
360+
};
361+
362+
ctrl.handleColAction = function (key, value) {
363+
var tableCol = $filter('filter')(ctrl.columns, {itemField: key});
364+
365+
if (tableCol && tableCol.length === 1 && tableCol[0].hasOwnProperty('colActionFn')) {
366+
tableCol[0].colActionFn(value);
367+
}
368+
};
369+
347370
ctrl.areActions = function () {
348371
return (ctrl.actionButtons && ctrl.actionButtons.length > 0) ||
349372
(ctrl.menuActions && ctrl.menuActions.length > 0);

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@
1616
<td class="table-view-pf-select" ng-if="$ctrl.config.showCheckboxes">
1717
<input type="checkbox" value="item.selected" ng-model="item.selected" ng-change="$ctrl.toggleOne(item)"/>
1818
</td>
19-
<td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">{{ value }}</td>
19+
20+
<td ng-repeat="(key, value) in item" ng-if="$ctrl.isColItemFld(key)">
21+
<span ng-if="!$ctrl.hasHTMLTemplate(key)">{{value}}</span>
22+
<span ng-if="$ctrl.hasHTMLTemplate(key)" ng-include="$ctrl.getHTMLTemplate(key)"></span>
23+
</td>
24+
2025
<td ng-if="$ctrl.actionButtons && $ctrl.actionButtons.length > 0" class="table-view-pf-actions" ng-repeat="actionButton in $ctrl.actionButtons">
2126
<div class="table-view-pf-btn">
2227
<button class="btn btn-default" title="{{actionButton.title}}"

0 commit comments

Comments
 (0)