src/generic-components/paginatedTable/PaginatedTable.jsx

   1 /*
   2  * ============LICENSE_START===================================================
   3  * SPARKY (AAI UI service)
   4  * ============================================================================
   5  * Copyright © 2017 AT&T Intellectual Property.
   6  * Copyright © 2017 Amdocs
   7  * All rights reserved.
   8  * ============================================================================
   9  * Licensed under the Apache License, Version 2.0 (the "License");
  10  * you may not use this file except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *      http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  * ============LICENSE_END=====================================================
  21  *
  22  * ECOMP and OpenECOMP are trademarks
  23  * and service marks of AT&T Intellectual Property.
  24  */
  25
  26 import React, {Component} from 'react';
  27
  28 import Pagination from 'react-bootstrap/lib/Pagination';
  29 import Table from 'react-bootstrap/lib/Table';
  30
  31 const MAX_PAGE_LINKS = 5;
  32
  33 export default class PaginatedTable extends Component {
  34
  35   static propTypes = {
  36     tableHeaders: React.PropTypes.object,
  37     tableData: React.PropTypes.array,
  38     activePage: React.PropTypes.number,
  39     pageCount: React.PropTypes.number,
  40     onPageIndexSelected: React.PropTypes.func,
  41     paginationClass: React.PropTypes.string,
  42     tableClass: React.PropTypes.string,
  43     displayHeader: React.PropTypes.bool,
  44     maxPaginationLinks: React.PropTypes.number
  45   }
  46
  47   static defaultProps = {
  48     tableHeaders: '',
  49     tableData: [],
  50     activePage: 1,
  51     pageCount: 1,
  52     displayHeader: true,
  53     maxPaginationLinks: MAX_PAGE_LINKS,
  54     tableClass: 'table table-striped table-bordered table-condensed'
  55   };
  56
  57   render() {
  58     let {tableHeaders,
  59           tableData,
  60           activePage,
  61           pageCount,
  62           onPageIndexSelected,
  63           paginationClass,
  64           maxPaginationLinks,
  65           tableClass,
  66           displayHeader} = this.props;
  67     let paginationClasses = (pageCount > 1)
  68       ? paginationClass
  69       : paginationClass +
  70                             ' hidden';
  71     let header = [];
  72
  73     let indexForKeys = 0;
  74     let createIndexForKey = () => {
  75       indexForKeys = indexForKeys + 1;
  76       let newIndex = indexForKeys;
  77       return newIndex;
  78     };
  79
  80     if (displayHeader) {
  81       let tableColumns = [];
  82       for (var columnName in tableHeaders) {
  83         tableColumns.push(
  84           <th key={tableHeaders[columnName].name + '_' + createIndexForKey()}>
  85              {tableHeaders[columnName].name}
  86           </th>);
  87       }
  88       header.push(<thead key={'header_' + createIndexForKey()}>
  89       <tr key={'header_row_' + createIndexForKey()}>
  90         {tableColumns}
  91       </tr>
  92       </thead>);
  93     }
  94
  95     return (
  96       <div>
  97         <Table bsClass={tableClass}>
  98           {header}
  99           <tbody>
 100           { tableData.map((rowData) => {
 101             let tableRow = [];
 102             for (var columnName in tableHeaders) {
 103                     let columnClassName = '';
 104                     if(tableHeaders[columnName].hasOwnProperty('className')){
 105                             columnClassName = tableHeaders[columnName].className;
 106                     }
 107               tableRow.push(
 108                 <td key={columnName + '_' + createIndexForKey()} className={columnClassName}>
 109                   {rowData[columnName]}
 110                 </td>);
 111             }
 112             return (
 113               <tr key={'row_' + createIndexForKey()}>{tableRow}</tr>
 114             );
 115           })}
 116           </tbody>
 117         </Table>
 118
 119         <div className={paginationClasses}>
 120           <Pagination
 121             prev
 122             next
 123             first
 124             last
 125             ellipsis
 126             boundaryLinks
 127             bsSize='large'
 128             items={pageCount}
 129             maxButtons={maxPaginationLinks}
 130             onSelect={(event) => onPageIndexSelected(event)}
 131             activePage={activePage}/>
 132         </div>
 133       </div>
 134     );
 135   }
 136 }