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