src/generic-components/paginatedTable/PaginatedTable.jsx

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