Feature/demo2

build/js/be-table.js

@@ -14,8 +14,8 @@ function getNamespace() {
    *   // keeps existing objects intact if extant, otherwise creates empty objects
    */
   var o = window;
-  for (var _i in arguments) {
-    var k = arguments[_i];
+  for (var i in arguments) {
+    var k = arguments[i];
     o[k] = o[k] || {};
     o = o[k];
   }
@@ -47,8 +47,8 @@ function getOrCall(x) {
 
     var classes = '';
 
-    for (var _i2 = 0; _i2 < arguments.length; _i2++) {
-      var arg = arguments[_i2];
+    for (var i = 0; i < arguments.length; i++) {
+      var arg = arguments[i];
       if (!arg) continue;
 
       var argType = typeof arg;
@@ -575,7 +575,8 @@ var defaultTypes = function defaultTypes(table) {
     hidden: {
       header: { className: 'hidden' },
       filter: { className: 'hidden' },
-      cell: { className: 'hidden' } },
+      cell: { className: 'hidden' }
+    },
     string: {},
     number: {
       filter: {
@@ -585,7 +586,8 @@ var defaultTypes = function defaultTypes(table) {
         className: 'scroll_columns is_aligned_right',
         renderer: function renderer(val) {
           return formatters.numberRenderer(val, 0);
-        } }
+        }
+      }
     },
     year: {
       filter: {
@@ -594,7 +596,8 @@ var defaultTypes = function defaultTypes(table) {
       cell: {
         renderer: function renderer(val) {
           return formatters.numberRenderer(val, 0, true);
-        } }
+        }
+      }
     },
     date: {
       filter: {
@@ -622,7 +625,8 @@ var defaultTypes = function defaultTypes(table) {
         }
       },
       filter: {
-        className: 'check' },
+        className: 'check'
+      },
       cell: {
         className: 'check',
         renderer: function renderer(val, row, col, opts) {
@@ -653,15 +657,19 @@ var completeType = function completeType(filterRenderer) {
         className: 'scroll_columns',
         renderer: function renderer(val) {
           return val;
-        } },
+        }
+      },
       header: {
         className: 'column_head scroll_columns',
         renderer: function renderer(col) {
           return col.title;
-        } },
+        }
+      },
       filter: {
         className: 'sub_head scroll_columns',
-        renderer: filterRenderer } });
+        renderer: filterRenderer
+      }
+    });
   };
 };
 
@@ -710,12 +718,14 @@ var BETable = React.createClass({
     return {
       sorting: {
         column: {},
-        ascending: true },
+        ascending: true
+      },
       searchFilters: {},
       currentPage: 1,
       numberPerPage: 10,
       selectedRows: {},
-      selectAll: false };
+      selectAll: false
+    };
   },
 
   sortingCallback: function sortingCallback(obj) {
@@ -726,7 +736,8 @@ var BETable = React.createClass({
     this.setState({
       sorting: {
         column: obj,
-        ascending: ascending },
+        ascending: ascending
+      },
       currentPage: 1
     }, function () {
       this.props.callback(this.state, { eventType: 'columnSorted' });
@@ -894,7 +905,8 @@ var Header = React.createClass({
       classes = {
         sorted: true,
         sort_asc: this.props.sorting.ascending,
-        sort_desc: !this.props.sorting.ascending };
+        sort_desc: !this.props.sorting.ascending
+      };
     }
 
     return React.createElement(

examples/basic/README.md

@@ -0,0 +1,20 @@
+# Basic Example
+
+## Setup
+
+Make sure be-table has been built -- in the top-level directory:
+```sh
+gulp build
+```
+
+Build the example (in this directory):
+```sh
+gulp build
+```
+
+## Running
+```sh
+python -m SimpleHTTPServer
+```
+
+browse to [http://localhost:8000](http://localhost:8000)

examples/basic/gulpfile.js

@@ -0,0 +1,13 @@
+var gulp = require('gulp');
+var del = require('del');
+
+var beTablePath = '../../build/js/be-table.js';
+var cleanTargets = ['js/vendor'];
+
+gulp.task('build', function () {
+  return gulp.src(beTablePath).pipe(gulp.dest('js/vendor'));
+});
+
+gulp.task('clean', function (done) {
+  del(cleanTargets, done);
+});

examples/basic/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link data-require="bootstrap-css@3.x" data-semver="3.1.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.9.3/lodash.min.js"></script>
+    <script src="js/vendor/be-table.js"></script>
+  </head>
+  <body>
+    <div id="app">Loading...</div>
+    <script src="js/app.js"></script>
+  </body>
+</html>

examples/basic/js/app.js

@@ -0,0 +1,98 @@
+(function (_, React, BE) {
+  'use strict';
+
+  var rows = [
+    {id: 1, item: 'kale', price: 4.34, label: {text: 'Leafy'}},
+    {id: 2, item: 'almonds', price: 5.44, label: {text: 'Nutty'}},
+    {id: 3, item: 'strawberries', price: 3.50, label: {text: 'Ripe'}},
+    {id: 4, item: 'apples', price: 14, label: {text: 'Pucker'}},
+    {id: 5, item: 'grapes', price: 1.00, label: {text: 'Red'}},
+    {id: 6, item: 'grapes', price: 1.20, label: {text: 'Green'}},
+    {id: 7, item: 'oranges', price: 2.10, label: {text: 'Cali'}},
+    {id: 8, item: 'oats', price: .20, label: {text: 'Steel'}},
+    {id: 9, item: 'dates', price: 13.20},
+    {id: 10, item: 'granola', price: 7.40, label: {text: 'Honey'}}
+  ];
+
+  var columns = [
+    {key: 'price', title: 'Price', subtitle: '$', type: 'price'},
+    {key: 'item', title: 'Item', type: 'string'},
+    {key: 'label', title: 'Label', type: 'label'}
+  ];
+
+  var paginationInfo = { totalMatchCount: 11 };
+
+  var Label = React.createClass({
+    displayName: "Label",
+    render: function () {
+      return React.createElement("span", {className: "label label-success"}, this.props.children);
+    }
+  });
+
+  var customTypes = {
+    label: {
+      cell: {
+        className: 'scroll_columns',
+        renderer: function(value, row, col, state) {
+          if (_.isEmpty(value)) {
+            return "";
+          } else {
+            return React.createElement(Label, {}, [value.text]);
+          }
+        }
+      }
+    },
+    price: {
+      cell: {
+        className: 'scroll_columns text-right',
+        renderer: function (value, row, col, state) {
+          return BE.Table.formatters.numberRenderer(value, 2, true);
+        }
+      }
+    }
+  };
+
+  function render() {
+    console.log('rendered table ' + String(Date.now()));
+    var props = {
+      columns: columns,
+      rows: rows,
+      searchmeta: paginationInfo,
+      objectname: 'items',
+      customTypes: customTypes,
+      callback: tableCallback
+    };
+    return React.render(React.createElement(BE.Table.BETable, props),
+                        document.getElementById('app'));
+  }
+
+  function tableCallback (state, tableEvent) {
+    var sortKey = _.get(state, 'sorting.column.key');
+    var comparator = _.lt;
+    var temp;
+    if (tableEvent && tableEvent.eventType && tableEvent.eventType === 'columnSorted') {
+      if (!_.get(state, 'sorting.ascending')) {
+        comparator = _.gt;
+      }
+
+      // sorting in place works, but you need to re-render the element
+      // if you are changing a variable reference so using a temp
+      // variable to demonstrate that
+      temp = _.clone(rows);
+      rows = temp.sort(function (a, b) {
+        var valA = _.get(a, sortKey);
+        var valB = _.get(b, sortKey);
+        return comparator(valA, valB);
+      });
+
+      // only need to re-render if the data model changes
+      // e.g. we don't rerender when the number per page changes in this example
+      // because we are not modifying our data in response to that event
+      render();
+    }
+  };
+
+  // kickoff rendering
+  render();
+
+})(window._, window.React, window.BE);