Initial state

samples/react/ReactGrid/ReactApp/boot-client.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import createBrowserHistory from 'history/lib/createBrowserHistory';
+import { ReactApp } from './components/ReactApp.jsx';
+
+// In the browser, we render into a DOM node and hook up to the browser's history APIs
+var history = createBrowserHistory();
+ReactDOM.render(<ReactApp history={ history } />, document.getElementById('react-app'));

samples/react/ReactGrid/ReactApp/components/CustomPager.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+export class CustomPager extends React.Component {
+    pageChange(event) {
+        this.props.setPage(parseInt(event.target.getAttribute("data-value")));
+    }
+    
+    render() {
+        var previous = "";
+        var next = "";
+
+        if(this.props.currentPage > 0){
+            previous = <div className="btn btn-default"><Link className="previous" to={'/' + (this.props.currentPage)}><i className="glyphicon glyphicon-arrow-left"></i>{this.props.previousText}</Link></div>;
+        }
+
+        if(this.props.currentPage != (this.props.maxPage -1)){
+            next = <div className="btn btn-default"><Link className="next" to={'/' + (this.props.currentPage + 2)}><i className="glyphicon glyphicon-arrow-right"></i>{this.props.nextText}</Link></div>;
+        }
+
+        var options = [];
+
+      var startIndex = Math.max(this.props.currentPage - 5, 0);
+      var endIndex = Math.min(startIndex + 11, this.props.maxPage);
+
+      if (this.props.maxPage >= 11 && (endIndex - startIndex) <= 10) {
+        startIndex = endIndex - 11;
+      }
+
+        for(var i = startIndex; i < endIndex ; i++){
+            var selected = this.props.currentPage == i ? "btn-default" : "";
+            options.push(<div key={i} className={"btn " + selected}><Link to={'/' + (i+1)}>{i+1}</Link></div>);
+        }
+
+        return (
+            <div className="btn-group">
+                {previous}
+                {options}
+                {next}
+            </div>
+        );
+    }
+}
+
+CustomPager.defaultProps = {
+    maxPage: 0,
+    nextText: '',
+    previousText: '',
+    currentPage: 0
+};

samples/react/ReactGrid/ReactApp/components/PeopleGrid.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Griddle from 'griddle-react';
+import { CustomPager } from './CustomPager.jsx';
+import { fakeData } from '../data/fakeData.js';
+import { columnMeta } from '../data/columnMeta.js';
+const resultsPerPage = 10;
+
+export class PeopleGrid extends React.Component {
+    render() {
+        var pageIndex = this.props.params ? (this.props.params.pageIndex || 1) - 1 : 0;
+        return (
+            <div>
+                <h1>People</h1>
+                <div id="table-area">
+                    <Griddle results={fakeData}
+                        columnMetadata={columnMeta}
+                        resultsPerPage={resultsPerPage}
+                        tableClassName="table"
+                        useCustomPagerComponent="true"
+                        customPagerComponent={CustomPager}
+                        externalCurrentPage={pageIndex} />
+                </div>
+            </div>
+        );
+    }
+}

samples/react/ReactGrid/ReactApp/components/ReactApp.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Router, Route } from 'react-router';
+import { PeopleGrid } from './PeopleGrid.jsx';
+
+export class ReactApp extends React.Component {
+    render() {
+        return (
+            <Router history={this.props.history}>
+                <Route path="/" component={PeopleGrid} />
+                <Route path="/:pageIndex" component={PeopleGrid} />
+            </Router>
+        );
+    }
+}

samples/react/ReactGrid/ReactApp/data/columnMeta.js

@@ -0,0 +1,47 @@
+var columnMeta = [
+  {
+    "columnName": "id",
+    "order": 1,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "name",
+    "order": 2,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "city",
+    "order": 3,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "state",
+    "order": 4,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "country",
+    "order": 5,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "company",
+    "order": 6,
+    "locked": false,
+    "visible": true
+  },
+  {
+    "columnName": "favoriteNumber",
+    "order":  7,
+    "locked": false,
+    "visible": true
+  }
+];
+
+export var columnMeta;
+