2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017 Amdocs
7 * ================================================================================
8 * Licensed under the Apache License, Version 2.0 (the "License");
9 * you may not use this file except in compliance with the License.
10 * You may obtain a copy of the License at
12 * http://www.apache.org/licenses/LICENSE-2.0
14 * Unless required by applicable law or agreed to in writing, software
15 * distributed under the License is distributed on an "AS IS" BASIS,
16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17 * See the License for the specific language governing permissions and
18 * limitations under the License.
19 * ============LICENSE_END=========================================================
21 * ECOMP is a trademark and service mark of AT&T Intellectual Property.
23 import React, {Component} from 'react';
25 import Pagination from 'react-bootstrap/lib/Pagination';
26 import Table from 'react-bootstrap/lib/Table';
28 const MAX_PAGE_LINKS = 5;
30 export default class PaginatedTable extends Component {
33 tableHeaders: React.PropTypes.object,
34 tableData: React.PropTypes.array,
35 activePage: React.PropTypes.number,
36 pageCount: React.PropTypes.number,
37 onPageIndexSelected: React.PropTypes.func,
38 paginationClass: React.PropTypes.string,
39 tableClass: React.PropTypes.string,
40 displayHeader: React.PropTypes.bool,
41 maxPaginationLinks: React.PropTypes.number
44 static defaultProps = {
50 maxPaginationLinks: MAX_PAGE_LINKS,
51 tableClass: 'table table-striped table-bordered table-condensed'
63 displayHeader} = this.props;
64 let paginationClasses = (pageCount > 1)
71 let createIndexForKey = () => {
72 indexForKeys = indexForKeys + 1;
73 let newIndex = indexForKeys;
78 let tableColumns = [];
79 for (var columnName in tableHeaders) {
81 <th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
82 {tableHeaders[columnName].name}
85 header.push(<thead key={'header_' + createIndexForKey()}>
86 <tr key={'header_row_' + createIndexForKey()}>
94 <Table bsClass={tableClass}>
97 { tableData.map((rowData) => {
99 for (var columnName in tableHeaders) {
100 let columnClassName = '';
101 if(tableHeaders[columnName].hasOwnProperty('className')){
102 columnClassName = tableHeaders[columnName].className;
105 <td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
106 {rowData[columnName]}
110 <tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
116 <div className={paginationClasses}>
126 maxButtons={maxPaginationLinks}
127 onSelect={(event) => onPageIndexSelected(event)}
128 activePage={activePage}/>