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
|
/*
* ============LICENSE_START=======================================================
* org.onap.aai
* ================================================================================
* Copyright © 2017 AT&T Intellectual Property. All rights reserved.
* Copyright © 2017 Amdocs
* ================================================================================
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============LICENSE_END=========================================================
*
* ECOMP is a trademark and service mark of AT&T Intellectual Property.
*/
import React, {Component} from 'react';
import Pagination from 'react-bootstrap/lib/Pagination';
import Table from 'react-bootstrap/lib/Table';
const MAX_PAGE_LINKS = 5;
export default class PaginatedTable extends Component {
static propTypes = {
tableHeaders: React.PropTypes.object,
tableData: React.PropTypes.array,
activePage: React.PropTypes.number,
pageCount: React.PropTypes.number,
onPageIndexSelected: React.PropTypes.func,
paginationClass: React.PropTypes.string,
tableClass: React.PropTypes.string,
displayHeader: React.PropTypes.bool,
maxPaginationLinks: React.PropTypes.number
}
static defaultProps = {
tableHeaders: '',
tableData: [],
activePage: 1,
pageCount: 1,
displayHeader: true,
maxPaginationLinks: MAX_PAGE_LINKS,
tableClass: 'table table-striped table-bordered table-condensed'
};
render() {
let {tableHeaders,
tableData,
activePage,
pageCount,
onPageIndexSelected,
paginationClass,
maxPaginationLinks,
tableClass,
displayHeader} = this.props;
let paginationClasses = (pageCount > 1)
? paginationClass
: paginationClass +
' hidden';
let header = [];
let indexForKeys = 0;
let createIndexForKey = () => {
indexForKeys = indexForKeys + 1;
let newIndex = indexForKeys;
return newIndex;
};
if (displayHeader) {
let tableColumns = [];
for (var columnName in tableHeaders) {
tableColumns.push(
<th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
{tableHeaders[columnName].name}
</th>);
}
header.push(<thead key={'header_' + createIndexForKey()}>
<tr key={'header_row_' + createIndexForKey()}>
{tableColumns}
</tr>
</thead>);
}
return (
<div>
<Table bsClass={tableClass}>
{header}
<tbody>
{ tableData.map((rowData) => {
let tableRow = [];
for (var columnName in tableHeaders) {
let columnClassName = '';
if(tableHeaders[columnName].hasOwnProperty('className')){
columnClassName = tableHeaders[columnName].className;
}
tableRow.push(
<td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
{rowData[columnName]}
</td>);
}
return (
<tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
);
})}
</tbody>
</Table>
<div className={paginationClasses}>
<Pagination
prev
next
first
last
ellipsis
boundaryLinks
bsSize='large'
items={pageCount}
maxButtons={maxPaginationLinks}
onSelect={(event) => onPageIndexSelected(event)}
activePage={activePage}/>
</div>
</div>
);
}
}
|
