feature: add pagination

Makefile

@@ -1,6 +1,9 @@
 babel:
 	@npm run babel
 
+watch:
+	@npm run babel:watch
+
 build-dev:
 	@npm run build:dev
 

package.json

@@ -5,6 +5,7 @@
   "main": "dist/index.js",
   "scripts": {
     "babel": "babel src -d dist",
+    "babel:watch": "babel --watch src -d dist",
     "clean": "rm -rf dist/*",
     "watch": "cross-env NODE_ENV=development webpack -w",
     "build:dev": "cross-env NODE_ENV=development webpack",

src/components/Button/Button.js

@@ -15,15 +15,21 @@ class Button extends PureComponent {
       type = 'primary',
       children,
       theme,
-      style,
+      style = {},
       className,
+      disabled = false,
       ...otherProps
     } = this.props;
+
+    const buttonType = theme.button[type];
+    if (disabled) style.cursor = 'not-allowed';
+
     return (
       <button
-        className={`${className} ${theme.button[type]}`}
+        className={`${className} ${buttonType}`}
         style={style}
         {...otherProps}
+        disabled={disabled}
       >
         {children}
       </button>

src/components/Table/Table.js

@@ -10,6 +10,8 @@ import HeaderRow from './HeaderRow';
 import rowRenderer from './rowRenderer';
 import Text from '../Text';
 import { connectTheme } from '../../utils';
+import Button from '../Button';
+import assert from 'bsert';
 
 import 'react-virtualized/styles.css';
 
@@ -22,10 +24,19 @@ class Table extends PureComponent {
        * Its value is the index of the row in the table
        */
       openIndex: undefined,
+      // currentPage tracks the page index for pagination
+      currentPage: 0,
+      // keep track of left and right button state
+      leftDisable: true,
+      rightDisable: false,
     };
     this.onRowClick = this.onRowClick.bind(this);
   }
 
+  /*
+   * pageSize will cause the component to paginate based on
+   *   the number passed in
+   */
   static get propTypes() {
     return {
       ExpandedComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -37,6 +48,7 @@ class Table extends PureComponent {
         })
       ),
       colHeaders: PropTypes.arrayOf(PropTypes.string),
+      pageSize: PropTypes.number,
     };
   }
 
@@ -91,6 +103,56 @@ class Table extends PureComponent {
     );
   }
 
+  /*
+   * @param {string} direction - left or right
+   * @param {number} dataCount - total number of rows
+   */
+  paginateClick(direction, dataCount) {
+    const { currentPage, leftDisable, rightDisable } = this.state;
+    const { pageSize } = this.props;
+
+    // take last unfilled page into account
+    const totalPages = Math.ceil(dataCount / pageSize);
+
+    let nextPage = currentPage;
+    // only paginate if there are pages
+    if (totalPages > 1) {
+      if (direction === 'left') nextPage -= 1;
+      else if (direction === 'right') nextPage += 1;
+    }
+
+    let nextLeftDisable = leftDisable;
+    if (nextPage > 0) nextLeftDisable = false;
+    else if (nextPage === 0) nextLeftDisable = true;
+
+    /*
+     * take into account zero indexing
+     * when doing (totalPages - 1)
+     */
+    let nextRightDisable = rightDisable;
+    if (nextPage === totalPages - 1) nextRightDisable = true;
+    else if (nextPage < totalPages - 1) nextRightDisable = false;
+
+    this.setState(
+      Object.assign({}, this.state, {
+        currentPage: nextPage,
+        leftDisable: nextLeftDisable,
+        rightDisable: nextRightDisable,
+      })
+    );
+  }
+
+  paginateData(tableData) {
+    const { pageSize } = this.props;
+    const { currentPage } = this.state;
+
+    // return slice of the data
+    const start = currentPage * pageSize;
+    const end = start + pageSize;
+    assert(start <= end);
+    return tableData.slice(start, end);
+  }
+
   /**
    * onRowClick handles an onClick event to expand a table row.
    */
@@ -104,20 +166,42 @@ class Table extends PureComponent {
   }
 
   render() {
+    const { leftDisable, rightDisable } = this.state;
+
     const {
-      tableData,
       ExpandedComponent,
       expandedHeight,
       expandedData,
       onRowClick,
       headerHeight,
       rowHeight,
       rowStyle,
-      style: { containerStyle, innerContainerStyle, headerStyle, bodyStyle },
+      pageSize,
       theme,
       ...tableProps
     } = this.props;
 
+    let {
+      tableData,
+      style: {
+        containerStyle = {},
+        innerContainerStyle,
+        headerStyle,
+        bodyStyle,
+      },
+    } = this.props;
+
+    // hold on to total size of data
+    const dataCount = tableData.length;
+
+    // slice data and add extra margin to bottom for rendered buttons
+    if (pageSize) {
+      tableData = this.paginateData(tableData);
+      containerStyle = Object.assign({}, containerStyle, {
+        marginBottom: '3rem',
+      });
+    }
+
     const {
       table: { container: containerCss, header: headerCss, body: bodyCss },
       tableRowStyle,
@@ -146,31 +230,54 @@ class Table extends PureComponent {
 
     return (
       <div className={containerCss} style={containerStyle}>
-        <AutoSizer disableHeight>
-          {({ width }) => (
-            <VirtualizedTable
-              className={bodyCss}
-              height={tableHeight}
-              containerStyle={innerContainerStyle || { overflow: 'visible' }}
-              headerClassName={headerCss}
-              headerHeight={headerHeight}
-              headerRowRenderer={props => <HeaderRow {...props} />}
-              headerStyle={headerStyle}
-              onRowClick={rowOnClick}
-              rowCount={tableData.length}
-              rowGetter={({ index }) => tableData[index]}
-              rowHeight={rowHeight}
-              rowRenderer={options => rowRenderer(options, rowRendererOptions)}
-              rowStyle={tableRowStyle || rowStyle}
-              width={width}
-              {...tableProps}
+        <div>
+          <AutoSizer disableHeight>
+            {({ width }) => (
+              <VirtualizedTable
+                className={bodyCss}
+                height={tableHeight}
+                containerStyle={innerContainerStyle || { overflow: 'visible' }}
+                headerClassName={headerCss}
+                headerHeight={headerHeight}
+                headerRowRenderer={props => <HeaderRow {...props} />}
+                headerStyle={headerStyle}
+                onRowClick={rowOnClick}
+                rowCount={tableData.length}
+                rowGetter={({ index }) => tableData[index]}
+                rowHeight={rowHeight}
+                rowRenderer={options =>
+                  rowRenderer(options, rowRendererOptions)}
+                rowStyle={tableRowStyle || rowStyle}
+                width={width}
+                {...tableProps}
+              >
+                {_colProps.map(colProp => (
+                  <Column key={`table-${colProp.dataKey}`} {...colProp} />
+                ))}
+              </VirtualizedTable>
+            )}
+          </AutoSizer>
+        </div>
+        {pageSize ? (
+          <div className={theme.table.paginationContainer}>
+            <Button
+              disabled={leftDisable}
+              className={theme.table.paginationButton}
+              onClick={() => this.paginateClick('left', dataCount)}
+            >
+              <i className="fa fa-arrow-left" />
+            </Button>
+            <Button
+              className={theme.table.paginationButton}
+              disabled={rightDisable}
+              onClick={() => this.paginateClick('right', dataCount)}
             >
-              {_colProps.map(colProp => (
-                <Column key={`table-${colProp.dataKey}`} {...colProp} />
-              ))}
-            </VirtualizedTable>
-          )}
-        </AutoSizer>
+              <i className="fa fa-arrow-right" />
+            </Button>
+          </div>
+        ) : (
+          <React.Fragment />
+        )}
       </div>
     );
   }