nicklayb · Naghal · Jun 14, 2017 · Jun 14, 2017 · Jun 15, 2017 · Jul 17, 2017
diff --git a/demo/index.js b/demo/index.js
@@ -5,14 +5,29 @@ import '../style.css';
 
 class Example extends Component {
     render() {
-        let data = [
-            { id: 1, firstname: 'John', lastname: 'Doe', email: '[email protected]' },
-            { id: 2, firstname: 'Johnny', lastname: 'Doewy', email: '[email protected]' },
-            { id: 3, firstname: 'Johanne', lastname: 'Doewesse', email: '[email protected]' },
-        ];
+        let data = [{ 'id': 1, 'firstname': 'Lari', 'lastname': 'Leach', 'email': '[email protected]' },
+        { 'id': 2, 'firstname': 'Teddie', 'lastname': 'Thorne', 'email': '[email protected]' },
+        { 'id': 3, 'firstname': 'Kendall', 'lastname': 'Ossenna', 'email': '[email protected]' },
+        { 'id': 4, 'firstname': 'Merv', 'lastname': 'Heffron', 'email': '[email protected]' },
+        { 'id': 5, 'firstname': 'Stanwood', 'lastname': 'Boundy', 'email': '[email protected]' },
+        { 'id': 6, 'firstname': 'Ikey', 'lastname': 'Laurenz', 'email': '[email protected]' },
+        { 'id': 7, 'firstname': 'Lilli', 'lastname': 'Peniello', 'email': '[email protected]' },
+        { 'id': 8, 'firstname': 'Anica', 'lastname': 'Brimham', 'email': '[email protected]' },
+        { 'id': 9, 'firstname': 'Frankie', 'lastname': 'Bremner', 'email': '[email protected]' },
+        { 'id': 10, 'firstname': 'Kristos', 'lastname': 'Verecker', 'email': '[email protected]' },
+        { 'id': 11, 'firstname': 'Olympe', 'lastname': 'Garred', 'email': '[email protected]' },
+        { 'id': 12, 'firstname': 'Ellissa', 'lastname': 'Derrett', 'email': '[email protected]' },
+        { 'id': 13, 'firstname': 'Aguistin', 'lastname': 'Oolahan', 'email': '[email protected]' },
+        { 'id': 14, 'firstname': 'Emili', 'lastname': 'Lunny', 'email': '[email protected]' },
+        { 'id': 15, 'firstname': 'Mikol', 'lastname': 'Scarrisbrick', 'email': '[email protected]' },
+        { 'id': 16, 'firstname': 'Boycey', 'lastname': 'Bockin', 'email': '[email protected]' },
+        { 'id': 17, 'firstname': 'Ezechiel', 'lastname': 'Pinchin', 'email': '[email protected]' },
+        { 'id': 18, 'firstname': 'Flore', 'lastname': 'Chesterfield', 'email': '[email protected]' },
+        { 'id': 19, 'firstname': 'Brnaby', 'lastname': 'Beentjes', 'email': '[email protected]' },
+        { 'id': 20, 'firstname': 'Ronny', 'lastname': 'Gelderd', 'email': '[email protected]' }];
         return (
             <div>
-                <Tabledata datas={data}>
+                <Tabledata datas={data} rowsPerPage={2}>
                     <Tableheader attribute={'firstname'}>Firstname</Tableheader>
                     <Tableheader attribute={'lastname'}>Lastname</Tableheader>
                     <Tableheader renderCell={(_content, _index, row) => (row.firstname + ' ' + row.lastname)}>Fullname</Tableheader>

diff --git a/package.json b/package.json
@@ -9,13 +9,15 @@
     "test": "run test"
   },
   "dependencies": {
+    "babel-preset-es2015": "^6.24.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2"
   },
   "devDependencies": {
     "eslint": "^3.15.0",
     "eslint-plugin-react": "^6.9.0",
-    "firenpm": "1.2.0"
+    "firenpm": "1.2.0",
+    "firenpm.web": "1.2.0"
   },
   "babel": {
     "presets": [

diff --git a/src/components/TablePagination.js b/src/components/TablePagination.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import TablePaginationPage from './TablePaginationPage';
+
+const TablePagination = (props) => {
+    const handleClick = (page) => {
+        if (page >= 0 && page < props.pageCount) {
+            props.changeHandler(page);
+        }
+    };
+
+    const hasPages = () => {
+        return props.pageCount > 0;
+    };
+
+    const renderPrevious = () => {
+        return <button key='0' onClick={handleClick.bind(this, props.currentPage - 1)}><i>{'<'}</i></button>;
+    };
+
+    const renderNext = () => {
+        return <button onClick={handleClick.bind(this, props.currentPage + 1)} key={props.pageCount + 1}><i>{'>'}</i></button>;
+    };
+
+    const renderLeftSidePagination = (current) => {
+        if (current != 1 && current != props.pageCount) {
+            return <TablePaginationPage currentPage={props.currentPage} key={current} pageNumber= {current} changeHandler={handleClick.bind(this, current - 1)}/>;
+        }
+    };
+
+    const renderMiddleSidePagination = (current) => {
+        let paginations = [];
+        if (current > 2) {
+            if (current - 2 != 1 && current - 2 != 1) {
+                paginations.push('...');
+            }
+            if (current === props.pageCount && props.pageCount > 3) {
+                paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current - 2} pageNumber= {current - 2} changeHandler={handleClick.bind(this, current - 3)}/>);
+            }
+            paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current - 1} pageNumber= {current - 1} changeHandler={handleClick.bind(this, current - 2)}/>);
+        }
+        return paginations;
+    };
+
+    const renderRightSidePagination = (current) => {
+        let paginations = [];
+        if (current < props.pageCount - 1) {
+            paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current + 1} pageNumber= {current + 1} changeHandler={handleClick.bind(this, current)}/>);
+            if (current == 1 && props.pageCount > 3) {
+                paginations.push(<TablePaginationPage currentPage={props.currentPage} key={current + 2}pageNumber= {current + 2} changeHandler={handleClick.bind(this, current + 1)}/>);
+            }
+            if (current + 1 != props.pageCount - 1 && current + 2 != props.pageCount) {
+                paginations.push('...');
+            }
+        }
+        return paginations;
+    };
+
+    const renderPagination = () => {
+        let paginations = [];
+        let current = props.currentPage + 1;
+
+        if (hasPages()) {
+            if (current > 1)
+                paginations.push(renderPrevious());
+
+            paginations.push(<TablePaginationPage currentPage={props.currentPage} key='1' pageNumber= {1} changeHandler={handleClick.bind(this, 0)}/>);
+            paginations.push(renderMiddleSidePagination(current));
+            paginations.push(renderLeftSidePagination(current));
+            paginations.push(renderRightSidePagination(current));
+            paginations.push(<TablePaginationPage currentPage={props.currentPage} key={props.pageCount} pageNumber= {props.pageCount} changeHandler={handleClick.bind(this, props.pageCount - 1)}/>);
+
+            if (current < props.pageCount)
+                paginations.push(renderNext());
+        }
+        return paginations;
+    };
+
+    return (
+        <div className="table-pagination">
+        {renderPagination()}
+        </div>
+    );
+}; export default TablePagination;
diff --git a/src/components/TablePaginationPage.js b/src/components/TablePaginationPage.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const TablePaginationPage = ({ currentPage, pageNumber, changeHandler }) => {
+    const handleClick = (page) => {
+        changeHandler(page);
+    };
+
+    return (
+            <button currentPage={currentPage} className={currentPage == pageNumber - 1 ? 'active' : ''} onClick={handleClick.bind(this, pageNumber - 1)}>
+                {pageNumber}
+            </button>
+    );
+};
+export default TablePaginationPage;
diff --git a/src/components/Tabledata.js b/src/components/Tabledata.js
@@ -1,10 +1,20 @@
 import React, { Component } from 'react';
+import TablePagination from './TablePagination';
+import Slice from 'lodash/slice';
+
+const DEFAULT_ROWS_PER_PAGE = 10;
 
 export default class Tabledata extends Component {
     constructor(props) {
         super(props);
+        this._rowsToDisplay = this.props.rowsPerPage ? this.props.rowsPerPage : DEFAULT_ROWS_PER_PAGE;
+        this._datas = (Array.isArray(this.props.datas)) ? this.props.datas : this.props.datas[Object.keys(this.props.datas)[0]];
         this.cells = [];
         this.setupCells();
+        this.state = {
+            page: 0
+        };
+        this.handlePageChange = this.handlePageChange.bind(this);
     }
 
     setupCells() {
@@ -38,8 +48,31 @@ export default class Tabledata extends Component {
         });
     }
 
+    requiresPagination() {
+        return this._datas.length > this._rowsToDisplay;
+    }
+
+    pageCount() {
+        return Math.ceil(this._datas.length / this._rowsToDisplay);
+    }
+
+    getPaginatedData() {
+        const start = this.getPaginationStart();
+        return Slice(this._datas, start, start + this._rowsToDisplay);
+    }
+
+    getPaginationStart() {
+        return (this.state.page * this._rowsToDisplay);
+    }
+
+    handlePageChange(page) {
+        this.setState({
+            page: page
+        });
+    }
+
     renderRows() {
-        return this.props.datas.map((row, rowIndex) => {
+        return this.getPaginatedData().map((row, rowIndex) => {
             let cells = this.prepareCells(row);
             if (this.props.renderRow) {
                 return this.props.renderRow(cells, rowIndex);
@@ -73,13 +106,22 @@ export default class Tabledata extends Component {
         );
     }
 
+    renderPagination() {
+        if (this.requiresPagination()) {
+            return <TablePagination currentPage={this.state.page} pageCount= {this.pageCount()} changeHandler={this.handlePageChange}/>;
+        }
+    }
+
     render() {
         let Table = this.getTag('table');
         return (
+            <div className="table-data-wrapper">
             <Table id={this.props.id} className={this.props.className}>
                 {this.renderHead()}
                 {this.renderBody()}
             </Table>
+            {this.renderPagination()}
+        </div>
         );
     }
 }