src/generic-components/paginatedTable/PaginatedTable.jsx

   1 /*
   2  * ============LICENSE_START=======================================================
   3  * org.onap.aai
   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
  11  *
  12  *       http://www.apache.org/licenses/LICENSE-2.0
  13  *
  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=========================================================
  20  */
  21 import React, {Component} from 'react';
  22 import { PropTypes } from 'prop-types';
  23
  24 import Pagination from 'react-bootstrap/lib/Pagination';
  25 import Table from 'react-bootstrap/lib/Table';
  26
  27 const MAX_PAGE_LINKS = 5;
  28
  29 export default class PaginatedTable extends Component {
  30
  31   static propTypes = {
  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
  41   }
  42
  43   static defaultProps = {
  44     tableHeaders: '',
  45     tableData: [],
  46     activePage: 1,
  47     pageCount: 1,
  48     displayHeader: true,
  49     maxPaginationLinks: MAX_PAGE_LINKS,
  50     tableClass: 'table table-striped table-bordered table-condensed'
  51   };
  52
  53   render() {
  54     let {tableHeaders,
  55           tableData,
  56           activePage,
  57           pageCount,
  58           onPageIndexSelected,
  59           paginationClass,
  60           maxPaginationLinks,
  61           tableClass,
  62           displayHeader} = this.props;
  63     let paginationClasses = (pageCount > 1)
  64       ? paginationClass
  65       : paginationClass +
  66                             ' hidden';
  67     let header = [];
  68
  69     let indexForKeys = 0;
  70     let createIndexForKey = () => {
  71       indexForKeys = indexForKeys + 1;
  72       let newIndex = indexForKeys;
  73       return newIndex;
  74     };
  75
  76     if (displayHeader) {
  77       let tableColumns = [];
  78       for (var columnName in tableHeaders) {
  79         tableColumns.push(
  80           <th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
  81              {tableHeaders[columnName].name}
  82           </th>);
  83       }
  84       header.push(<thead key={'header_' + createIndexForKey()}>
  85       <tr key={'header_row_' + createIndexForKey()}>
  86         {tableColumns}
  87       </tr>
  88       </thead>);
  89     }
  90
  91     return (
  92       <div>
  93         <Table bsClass={tableClass}>
  94           {header}
  95           <tbody>
  96           { tableData.map((rowData) => {
  97             let tableRow = [];
  98             for (var columnName in tableHeaders) {
  99                     let columnClassName = '';
 100                     if(tableHeaders[columnName].hasOwnProperty('className')){
 101                             columnClassName = tableHeaders[columnName].className;
 102                     }
 103               tableRow.push(
 104                 <td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
 105                   {rowData[columnName]}
 106                 </td>);
 107             }
 108             return (
 109               <tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
 110             );
 111           })}
 112           </tbody>
 113         </Table>
 114
 115         <div className={paginationClasses}>
 116           <Pagination
 117             prev
 118             next
 119             first
 120             last
 121             ellipsis
 122             boundaryLinks
 123             bsSize='large'
 124             items={pageCount}
 125             maxButtons={maxPaginationLinks}
 126             onSelect={(event) => onPageIndexSelected(event)}
 127             activePage={activePage}/>
 128         </div>
 129       </div>
 130     );
 131   }
 132 }