prometheusresearch-archive · bakesteve · Jul 7, 2014 · Jul 7, 2014 · Jul 7, 2014 · Jul 7, 2014
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,7 @@
 node_modules
+bower_components
 docs/build
-standalone/react-grid.min.js
-standalone/react-grid.js
+**/build
+dist
+build
+examples/build
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,22 @@
+{
+  "node": true,
+
+  "boss": true,
+  "curly": true,
+  "devel": true,
+  "eqnull": true,
+  "expr": true,
+  "funcscope": true,
+  "globalstrict": true,
+  "laxcomma": true,
+  "laxbreak": true,
+  "loopfunc": true,
+  "newcap": false,
+  "noempty": true,
+  "nonstandard": true,
+  "onecase": true,
+  "regexdash": true,
+  "trailing": true,
+  "undef": true,
+  "unused": "vars"
+}
diff --git a/README.md b/README.md
@@ -1,11 +1,37 @@
 # React Grid
 
-Data grid for [React][].
+Data grid for [React](http://facebook.github.io/react)
+
+
+## Getting started
+0. you'll need node, and an editor. Till visual studio does JSX, we think Atom.io is the best, so if you dont already, grab them:
+
+		choco install atom
+		choco install nodejs.install *if typing npm gives you an error*
+		git clone https://github.com/adazzle/react-grid *in the root directory you want your files in*
+		cd .\react-grid
+
+1. You'll also need Gulp which will perform build tasks such as jsx compilation (specified in gulpfile.js) - Go get it:
+
+		npm install -g gulp
+		npm install --save-dev gulp 
+
+2. Install Project Dependencies from package.json file 
+
+		npm install
+
+3. Run gulp. It compiles your jsx, jshint, packs your scripts up, and fires up a local webserver and opens the start page
+
+		gulp
+
+Have a look in the gulpfile for other commands or add your own
 
 ## Credits
 
-React Grid is free software created by [Prometheus Research][] and is released
-under the MIT.
+React Grid is forked from  [Prometheus Research](http://prometheusresearch.github.io/react-grid) which has some [good examples](http://prometheusresearch.github.io/react-grid/examples/locked-columns.html)
+This version is created by [adazzle](https://www.adazzle.com) and released under the [MIT](LICENCE).
+
+For more details, see the [React docs](http://facebook.github.io/react/), especially [thinking in react](http://facebook.github.io/react/docs/thinking-in-react.html)
 
-[React]: http://facebook.github.io/react/
-[Prometheus Research, LLC]: http://prometheusresearch.com
+## Work in progress
+This is still a proof of concept, there are a fair amount of [things todo](https://github.com/adazzle/react-grid/issues/5) but feel free to comment, add [an issue](https://github.com/adazzle/react-grid/issues) or submit a [pull request](https://github.com/adazzle/react-grid/pulls)
diff --git a/bower.json b/bower.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-grid",
+  "version": "0.0.0",
+  "homepage": "https://github.com/adazzle/react-grid",
+  "authors": [
+    "Steve Baker <[email protected]>"
+  ],
+  "moduleType": [],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "directory": "ext",
+  "dependencies": {
+    "jasmine": "~2.0.1",
+    "underscore": "~1.6.0",
+    "requirejs": "~2.1.14",
+    "jquery": "~2.1.1"
+  },
+  "devDependencies": {}
+}
diff --git a/docs/contents/styles/sortable.svg b/docs/contents/styles/sortable.svg
diff --git a/examples/example1.html b/examples/example1.html
@@ -0,0 +1,11 @@
+<html>
+<body>
+react grid
+
+<div id="sandbox"></div>
+	<script type="text/javascript" src="/build/js/examples/example1.jsx"></script>
+
+
+
+</body>
+</html>
diff --git a/examples/excelGrid.html b/examples/excelGrid.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+  div.active-cell {
+    background-color: #ccc;
+    font-weight:bold;
+  }
+  </style>
+</head>
+<body>
+  <p>Grid with keyboard navigation</p>
+  <div id="sandbox"></div>
+  <script type="text/javascript" src="/build/js/examples/excelGrid.jsx"></script>
+
+
+</body>
+</html>
diff --git a/examples/jsx/example1.jsx b/examples/jsx/example1.jsx
@@ -0,0 +1,49 @@
+/**
+ * @jsx React.DOM
+ */
+(function() {
+
+var React = require('react');
+var ReactGrid = require('../../lib/Grid.js');
+
+'use strict';
+
+function rows(start, end) {
+  var rows = [];
+  for (var i = start; i < end; i++) {
+    rows.push([i, 'Name ' + i, 'Surname ' + i]);
+  }
+  return rows;
+}
+
+var columns = [
+  {
+    name: '№',
+    width: '10%',
+    key: 0,
+    locked:true
+  },
+  {
+    name: 'Name',
+    width: '40%',
+    resizeable: true,
+    key: 1
+  },
+  {
+    name: 'Surname',
+    width: '50%',
+    resizeable: true,
+    key: 2
+  }
+];
+
+
+React.renderComponent(
+  <ReactGrid
+    columns={columns}
+    length={30000}
+    rows={rows}
+    rowHeight={40}/>,
+  document.getElementById('sandbox'));
+
+})();
diff --git a/examples/jsx/excelGrid.jsx b/examples/jsx/excelGrid.jsx
@@ -0,0 +1,69 @@
+/**
+ * @jsx React.DOM
+ */
+'use strict';
+var ExcelGrid = require('../../lib/ExcelGrid');
+var React = require('React');
+
+var data = [];
+for (var i = 0; i < 2000; i++) {
+  data.push({
+    'key': i,
+    'supplier':{'value':'Supplier ' + i, 'editing':true},
+    'format': 'fmt ' + i,
+    'start':'start',
+    'end':'end',
+    'price':i });
+};
+
+
+function rows(start, end) {
+  return data.slice(start, end);
+}
+
+var columns = [
+
+  {
+    idx: 0,
+    name: 'Supplier',
+    key: 'supplier',
+    width: 300,
+    locked: true,
+  },
+  {
+    idx: 1,
+    name: 'Format',
+    key: 'format',
+    width: 350,
+  },
+  {
+    idx: 2,
+    name: 'Start',
+    key: 'start',
+    width: 250,
+  },
+  {
+    idx: 3,
+    name: 'End',
+    key: 'end',
+    width: 250,
+  },
+  {
+    idx: 4,
+    name: 'Cost',
+    key: 'cost',
+    width: 200,
+  }
+];
+
+
+var renderGrid = function(containerId) {
+  containerId = containerId || 'sandbox';
+  var grid = ExcelGrid({columns:columns, rows: rows, length: data.length, height: 400});
+    React.renderComponent(grid,
+      document.getElementById(containerId));
+};
+renderGrid();
+
+//force a global react object, for chrome dev tools if nothing else
+window.React = window.React || React;