PreventDefault for pager buttons, readme update

Also some minor syntax changes

Author: jslatts

README.md

@@ -24,7 +24,7 @@ tabletable has the following component props:
 #### Required
 **data [Immutable.Seq]** - structured source data.
 
-**columns [object]** - column definition object.
+**columns [object[]]** - array of column definition objects.
 
 #### Optional
 **rowsPerPage [number]** - number of rows to display per page.
@@ -61,31 +61,29 @@ Column definitions are a flexible way to get some fairly complex behaviors into
 **visible [bool]** - show/hide the column.
 
 ### Contrived Example
-    let columnDefs = {
-      index: {
+    let columnDefs = [
+      {
           display: 'Index',
           headerCssClass: 'col-sm-1',
           visible: true,
           data: (row,index,context) => <div>{index}</div>,
       },
-      name: {
+      {
           display: 'Name',
           headerCssClass: 'col-sm-10',
           data: row => <div>{row.get('name')}</div>,
       },
-      timestamp: {
+      {
           display: 'Created',
           headerCssClass: 'col-sm-1',
           data: row => <div>{row.get('timestamp')}</div>,
       },
-    };
-
+    ];
 
      handleFilterAction(filterValue) {
         console.log('Filter value is: ' + filterValue);
      },
 
-
      <Tabletable
         data={myCrazyCustomImmutablejsDataStructure}
         columns={columnDefs}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabletable",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple and extremely flexible table component written in React.",
   "main": "dist/entry.js",
   "scripts": {

src/Pager.jsx

@@ -1,32 +1,44 @@
-/* Copyright 2015 Zeroarc Software, LLC
-*
-*  Pager control
-*/
+//@flow
+// tabletable - Copyright 2017 Zeroarc Software, LLC
+'use strict';
 
-// External
-let React = require('react');
-let ReactShallowCompare = require('react-addons-shallow-compare');
-let ClassNames = require('classnames');
-let Autobind = require('autobind-decorator');
+const React = require('react');
+const ReactShallowCompare = require('react-addons-shallow-compare');
+const ClassNames = require('classnames');
+const Autobind = require('autobind-decorator');
+
+type Props = {
+  displayPages: number,
+  maxPage: number,
+  currentPage: number,
+  onPageChange: (page: number) => void
+};
 
 @Autobind
 export default class TabletablePager extends React.Component {
-  shouldComponentUpdate(nextProps, nextState) {
-    return ReactShallowCompare(this, nextProps, nextState);
+  props: Props;
+
+  static defaultProps: {
+    maxPage: number,
+    currentPage: number,
+  }
+
+  shouldComponentUpdate(nextProps: Props) {
+    return ReactShallowCompare(this, nextProps);
   }
 
   render() {
     let options = [];
 
     let startIndex = Math.max(this.props.currentPage - Math.floor(this.props.displayPages / 2), 1);
-    let endIndex = Math.min(startIndex + (this.props.displayPages - 1), this.props.maxPage);
+    const endIndex = Math.min(startIndex + (this.props.displayPages - 1), this.props.maxPage);
 
     if (this.props.maxPage >= this.props.displayPages && (endIndex - startIndex) <= this.props.displayPages) {
       startIndex = endIndex - (this.props.displayPages - 1);
     }
 
     for(let i = startIndex; i <= endIndex; i++){
-      let thisButtonClasses = ClassNames('btn', 'btn-white', 'btn-sm', {
+      const thisButtonClasses = ClassNames('btn', 'btn-white', 'btn-sm', {
         'label-success': this.props.currentPage === i
       });
       options.push(<button key={i} className={thisButtonClasses} data-value={i} onClick={this.pageChange}>{i}</button>);
@@ -57,32 +69,32 @@ export default class TabletablePager extends React.Component {
   // Custom methods
   //
 
-  pageChange(e) {
-    e.stopPropagation();
+  pageChange(e: SyntheticInputEvent) {
+    e.preventDefault();
     this.props.onPageChange(parseInt(e.target.getAttribute('data-value')));
   }
 
-  previousPageChange(e) {
-    e.stopPropagation();
+  previousPageChange(e: SyntheticInputEvent) {
+    e.preventDefault();
     if (this.props.currentPage > 1) {
       this.props.onPageChange(this.props.currentPage - 1);
     }
   }
 
-  nextPageChange(e) {
-    e.stopPropagation();
+  nextPageChange(e: SyntheticInputEvent) {
+    e.preventDefault();
     if (this.props.currentPage < this.props.maxPage) {
       this.props.onPageChange(this.props.currentPage + 1);
     }
   }
 
-  firstPageChange(e) {
-    e.stopPropagation();
+  firstPageChange(e: SyntheticInputEvent) {
+    e.preventDefault();
     this.props.onPageChange(1);
   }
 
-  lastPageChange(e) {
-    e.stopPropagation();
+  lastPageChange(e: SyntheticInputEvent) {
+    e.preventDefault();
     this.props.onPageChange(this.props.maxPage);
   }
 }