2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
6 * Copyright © 2017-2018 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 import React, {Component} from 'react';
22 import { PropTypes } from 'prop-types';
24 import Pagination from 'react-bootstrap/lib/Pagination';
25 import Table from 'react-bootstrap/lib/Table';
27 const MAX_PAGE_LINKS = 5;
29 export default class PaginatedTable extends Component {
32 tableHeaders: PropTypes.object,
33 tableData: PropTypes.array,
34 activePage: PropTypes.number,
35 pageCount: PropTypes.number,
36 onPageIndexSelected: PropTypes.func,
37 paginationClass: PropTypes.string,
38 tableClass: PropTypes.string,
39 displayHeader: PropTypes.bool,
40 maxPaginationLinks: PropTypes.number
43 static defaultProps = {
49 maxPaginationLinks: MAX_PAGE_LINKS,
50 tableClass: 'table table-striped table-bordered table-condensed'
62 displayHeader} = this.props;
63 let paginationClasses = (pageCount > 1)
70 let createIndexForKey = () => {
71 indexForKeys = indexForKeys + 1;
72 let newIndex = indexForKeys;
77 let tableColumns = [];
78 for (var columnName in tableHeaders) {
80 <th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
81 {tableHeaders[columnName].name}
84 header.push(<thead key={'header_' + createIndexForKey()}>
85 <tr key={'header_row_' + createIndexForKey()}>
93 <Table bsClass={tableClass}>
96 { tableData.map((rowData) => {
98 for (var columnName in tableHeaders) {
99 let columnClassName = '';
100 if(tableHeaders[columnName].hasOwnProperty('className')){
101 columnClassName = tableHeaders[columnName].className;
104 <td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
105 {rowData[columnName]}
109 <tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
115 <div className={paginationClasses}>
125 maxButtons={maxPaginationLinks}
126 onSelect={(event) => onPageIndexSelected(event)}
127 activePage={activePage}/>