2 * ============LICENSE_START===================================================
3 * SPARKY (AAI UI service)
4 * ============================================================================
5 * Copyright © 2017 AT&T Intellectual Property.
6 * Copyright © 2017 Amdocs
8 * ============================================================================
9 * Licensed under the Apache License, Version 2.0 (the "License");
10 * you may not use this file except in compliance with the License.
11 * You may obtain a copy of the License at
13 * http://www.apache.org/licenses/LICENSE-2.0
15 * Unless required by applicable law or agreed to in writing, software
16 * distributed under the License is distributed on an "AS IS" BASIS,
17 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18 * See the License for the specific language governing permissions and
19 * limitations under the License.
20 * ============LICENSE_END=====================================================
22 * ECOMP and OpenECOMP are trademarks
23 * and service marks of AT&T Intellectual Property.
26 import React, {Component} from 'react';
28 import Pagination from 'react-bootstrap/lib/Pagination';
29 import Table from 'react-bootstrap/lib/Table';
31 const MAX_PAGE_LINKS = 5;
33 export default class PaginatedTable extends Component {
36 tableHeaders: React.PropTypes.object,
37 tableData: React.PropTypes.array,
38 activePage: React.PropTypes.number,
39 pageCount: React.PropTypes.number,
40 onPageIndexSelected: React.PropTypes.func,
41 paginationClass: React.PropTypes.string,
42 tableClass: React.PropTypes.string,
43 displayHeader: React.PropTypes.bool,
44 maxPaginationLinks: React.PropTypes.number
47 static defaultProps = {
53 maxPaginationLinks: MAX_PAGE_LINKS,
54 tableClass: 'table table-striped table-bordered table-condensed'
66 displayHeader} = this.props;
67 let paginationClasses = (pageCount > 1)
74 let createIndexForKey = () => {
75 indexForKeys = indexForKeys + 1;
76 let newIndex = indexForKeys;
81 let tableColumns = [];
82 for (var columnName in tableHeaders) {
84 <th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
85 {tableHeaders[columnName].name}
88 header.push(<thead key={'header_' + createIndexForKey()}>
89 <tr key={'header_row_' + createIndexForKey()}>
97 <Table bsClass={tableClass}>
100 { tableData.map((rowData) => {
102 for (var columnName in tableHeaders) {
103 let columnClassName = '';
104 if(tableHeaders[columnName].hasOwnProperty('className')){
105 columnClassName = tableHeaders[columnName].className;
108 <td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
109 {rowData[columnName]}
113 <tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
119 <div className={paginationClasses}>
129 maxButtons={maxPaginationLinks}
130 onSelect={(event) => onPageIndexSelected(event)}
131 activePage={activePage}/>