Skip to content

Commit 83b0995

Browse files
dtaylor113dtaylor113
committed
pfTableView: final ngDocs
1 parent 15a4cee commit 83b0995

File tree

6 files changed

+621
-222
lines changed

6 files changed

+621
-222
lines changed

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
/**
2+
* @ngdoc directive
3+
* @name patternfly.table.component:pfTableView - Basic
4+
*
5+
* @description
6+
* Component for rendering a simple table view.<br><br>
7+
* See {@link patternfly.table.component:pfTableView%20-%20with%20Toolbar pfTableView - with Toolbar} for use with a Toolbar<br>
8+
* See {@link patternfly.toolbars.componenet:pfToolbar pfToolbar} for use in Toolbar View Switcher
9+
*
10+
* @param {object} config Optional configuration object
11+
* <ul style='list-style-type: none'>
12+
* <li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
13+
* <li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
14+
* </ul>
15+
* @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
16+
* @param {array} items Array of items to display in the table view.
17+
* @param {array} columns Array of table column information to display in the table's header row
18+
* <ul style='list-style-type: none'>
19+
* <li>.colHeader - (string) Text label for a column header
20+
* <li>.colItemFld - (string) Item field to associate with a particular column.
21+
* </ul>
22+
* @param {array} actionButtons List of action buttons in each row
23+
* <ul style='list-style-type: none'>
24+
* <li>.name - (String) The name of the action, displayed on the button
25+
* <li>.title - (String) Optional title, used for the tooltip
26+
* <li>.actionFn - (function(action)) Function to invoke when the action selected
27+
* </ul>
28+
* @param {array} menuActions List of actions for dropdown menu in each row
29+
* <ul style='list-style-type: none'>
30+
* <li>.name - (String) The name of the action, displayed on the button
31+
* <li>.title - (String) Optional title, used for the tooltip
32+
* <li>.actionFn - (function(action)) Function to invoke when the action selected
33+
* </ul>
34+
* @example
35+
<example module="patternfly.table">
36+
<file name="index.html">
37+
<div ng-controller="TableCtrl" class="row example-container">
38+
<div class="col-md-12">
39+
<pf-table-view id="exampleTableView"
40+
config="config"
41+
dt-options="dtOptions"
42+
colummns="colummns"
43+
items="items"
44+
action-buttons="actionButtons"
45+
menu-actions="menuActions">
46+
</pf-table-view>
47+
<div class="col-md-12" style="padding-top: 12px;">
48+
<label style="font-weight:normal;vertical-align:center;">Events: </label>
49+
</div>
50+
<div class="col-md-12">
51+
<textarea rows="10" class="col-md-12">{{eventText}}</textarea>
52+
</div>
53+
</div>
54+
</div>
55+
</file>
56+
57+
<file name="script.js">
58+
angular.module('patternfly.table').controller('TableCtrl', ['$scope',
59+
function ($scope) {
60+
$scope.dtOptions = {
61+
order: [[2, "asc"]],
62+
};
63+
64+
$scope.colummns = [
65+
{ colHeader: "Name", colItemFld: "name" },
66+
{ colHeader: "Address", colItemFld: "address"},
67+
{ colHeader: "City", colItemFld: "city" },
68+
{ colHeader: "State", colItemFld: "state"}
69+
];
70+
71+
$scope.items = [
72+
{
73+
name: "Fred Flintstone",
74+
address: "20 Dinosaur Way",
75+
city: "Bedrock",
76+
state: "Washingstone"
77+
},
78+
{
79+
name: "John Smith",
80+
address: "415 East Main Street",
81+
city: "Norfolk",
82+
state: "Virginia",
83+
},
84+
{
85+
name: "Frank Livingston",
86+
address: "234 Elm Street",
87+
city: "Pittsburgh",
88+
state: "Pennsylvania"
89+
},
90+
{
91+
name: "Linda McGovern",
92+
address: "22 Oak Street",
93+
city: "Denver",
94+
state: "Colorado"
95+
},
96+
{
97+
name: "Jim Brown",
98+
address: "72 Bourbon Way",
99+
city: "Nashville",
100+
state: "Tennessee"
101+
},
102+
{
103+
name: "Holly Nichols",
104+
address: "21 Jump Street",
105+
city: "Hollywood",
106+
state: "California"
107+
},
108+
{
109+
name: "Marie Edwards",
110+
address: "17 Cross Street",
111+
city: "Boston",
112+
state: "Massachusetts"
113+
},
114+
{
115+
name: "Pat Thomas",
116+
address: "50 Second Street",
117+
city: "New York",
118+
state: "New York"
119+
},
120+
];
121+
122+
$scope.eventText = "";
123+
124+
$scope.config = {
125+
onCheckBoxChange: handleCheckBoxChange,
126+
selectionMatchProp: "name"
127+
};
128+
129+
function handleCheckBoxChange (item) {
130+
$scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
131+
};
132+
133+
var performAction = function (action, item) {
134+
$scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
135+
};
136+
137+
$scope.actionButtons = [
138+
{
139+
name: 'Action',
140+
title: 'Perform an action',
141+
actionFn: performAction
142+
}
143+
];
144+
145+
$scope.menuActions = [
146+
{
147+
name: 'Action',
148+
title: 'Perform an action',
149+
actionFn: performAction
150+
},
151+
{
152+
name: 'Another Action',
153+
title: 'Do something else',
154+
actionFn: performAction
155+
},
156+
{
157+
name: 'Disabled Action',
158+
title: 'Unavailable action',
159+
actionFn: performAction,
160+
isDisabled: true
161+
},
162+
{
163+
name: 'Something Else',
164+
title: '',
165+
actionFn: performAction
166+
},
167+
{
168+
isSeparator: true
169+
},
170+
{
171+
name: 'Grouped Action 1',
172+
title: 'Do something',
173+
actionFn: performAction
174+
},
175+
{
176+
name: 'Grouped Action 2',
177+
title: 'Do something similar',
178+
actionFn: performAction
179+
}
180+
];
181+
}
182+
]);
183+
</file>
184+
</example>
185+
*/

0 commit comments

Comments
 (0)