Add rowContext and rowCssClass. Update Readme.md

- Implement row context feature to be used for reducing duplicate computations.
- Implement rowCssClass/elementCssClass for more control over styling.
- Update Readme.md

Author: Justin Slattery

README.md

@@ -41,6 +41,10 @@ tabletable has the following component props:
 
 **filterValue [string]** - text to display in search filter.
 
+**rowContext [func(row: object, index: number): Object]** - callback function invoked once per row with row and index arguments and returns an object. This object will be passed to the column definition object. It is intended to alleviate situations where identical expensive computations need to be performed for more than one column.
+
+**rowCssClass [string]** - CSS class(es) to use for row (tr) element.
+
 ### Column definition options
 Column definitions are a flexible way to get some fairly complex behaviors into the table while also allowing the *shape* of the data to be however you prefer. Each column defines a function that receives the row data and index as arguments and returns a React component that displays the content. This means that you can drive complex behaviors from the state and props of the parent component. The properties available in the definition objects are:
 
@@ -52,7 +56,7 @@ Column definitions are a flexible way to get some fairly complex behaviors into
 
 **headerCssClass [string]** - CSS class(es) to use for header column (th) element.
 
-**rowCssClass [string]** - CSS class(es) to use for row column (td) element.
+**elementCssClass [string]** - CSS class(es) to use for row column (td) element.
 
 **visible [bool]** - show/hide the column.
 
@@ -62,7 +66,7 @@ Column definitions are a flexible way to get some fairly complex behaviors into
           display: 'Index',
           headerCssClass: 'col-sm-1',
           visible: true,
-          data: (row,index) => <div>{index}</div>,
+          data: (row,index,context) => <div>{index}</div>,
       },
       name: {
           display: 'Name',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabletable",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A simple and extremely flexible table component written in React.",
   "main": "dist/entry.js",
   "scripts": {
@@ -30,7 +30,7 @@
     "autobind-decorator": "^1.3.2",
     "classnames": "^2.2.0",
     "immutable": "^3.7.5",
-    "react": "^0.14.1",
-    "react-addons-shallow-compare": "^0.14.1"
+    "react": "^0.14.2",
+    "react-addons-shallow-compare": "^0.14.2"
   }
 }

src/Container.jsx

@@ -46,19 +46,43 @@ export default class TabletableContainer extends React.Component {
     let takeRows = Math.min(this.props.rowsPerPage, this.props.data.count() - skipRows);
 
     let rows = this.props.data.skip(skipRows).take(takeRows).map((row,index) => {
-      let rowComponents = [];
+      // Create row context if required. Make it an immutable so nobody tries to abuse it by shoving stuff into it
+      // during a column step. We will re-project from the Immutable each time it is used
+      const context = Immutable.fromJS(this.props.rowContext ? this.props.rowContext(row,index) : {});
+
+      // Assign any row classes
+      let rowCssClass = '';
+      if (typeof this.props.rowCssClass === 'function') {
+        rowCssClass = this.props.rowCssClass(row,index,context.toObject());
+        if (typeof rowCssClass !== 'string') console.error('rowCssClass function must return a string value. Was ' + typeof rowCssClass);
+      }
+      else {
+        rowCssClass = this.props.rowCssClass;
+      }
 
+      // Build out components for the row
+      let rowComponents = [];
       Object.keys(this.props.columns).forEach(k => {
         // If visible is false, hide the column. If visible is not defined, default to showing column
         if (typeof this.props.columns[k].visible === 'undefined' || this.props.columns[k].visible) {
+          // elementCssClass can either be a string or a function that returns a string
+          let elementCssClass = '';
+          if (typeof this.props.columns[k].elementCssClass === 'function') {
+            elementCssClass = this.props.columns[k].elementCssClass(row,index,context.toObject());
+            if (typeof elementCssClass !== 'string') console.error('elementCssClass function must return a string value. Was ' + typeof elementCssClass);
+          }
+          else {
+            elementCssClass = this.props.columns[k].elementCssClass;
+          }
+
           rowComponents.push(
-            <td key={`${index}-${k}`} className={this.props.columns[k].rowCssClass}>{this.props.columns[k].data(row,index)}</td>
+            <td key={`${index}-${k}`} className={elementCssClass}>{this.props.columns[k].data(row,index,context.toObject())}</td>
           );
         }
       });
 
       return (
-        <tr key={index}>
+        <tr key={index} className={rowCssClass}>
           {rowComponents}
         </tr>
       );
@@ -160,6 +184,8 @@ TabletableContainer.propTypes = {
   showPager: React.PropTypes.bool.isRequired,
   showFilter: React.PropTypes.bool.isRequired,
   // Optional
+  rowContext: React.PropTypes.func,
+  rowCssClass: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]),
   pager: React.PropTypes.func,
   onFilterAction: React.PropTypes.func,
   filterValue: React.PropTypes.string,