Add dynamical rowWidth functionailty to table

js/components/piece_list.js

@@ -23,19 +23,21 @@ let PieceList = React.createClass({
         // Specifiy how a TableItemX should look like
         let columnMap = {
             'thumbnail': {
-                'display_name': 'Thumbnail',
+                'displayName': 'Thumbnail',
-                'display_type': TableItemImg
+                'displayType': TableItemImg,
+                'rowWidth': 2
             },
             'artist_name': {
-                'display_name': 'Artist',
+                'displayName': 'Artist',
-                'display_type': TableItemText
+                'displayType': TableItemText,
+                'rowWidth': 3
             },
             'title': {
-                'display_name': 'Title',
+                'displayName': 'Title',
-                'display_type': TableItemText
+                'displayType': TableItemText,
+                'rowWidth': 6
             }
         };
-
         return (
             <AltContainer store={PieceListStore}>
                 <Table class="piecesTable" columnMap={columnMap} />

js/components/table_header.js

@@ -12,15 +12,17 @@ let TableHeader = React.createClass({
     render() {
 
         let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
-        let columnClasses = this.calcColumnClasses(this.props.columnMap);
 
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                 <div className="row">
                     {columnMapValuesList.map((val, i) => {
+
+                        let columnClass = this.calcColumnClasses(this.props.columnMap, i);
+
                         return (
-                            <div className={columnClasses + ' ascribe-table-header-column'} key={i}>
+                            <div className={columnClass + ' ascribe-table-header-column'} key={i}>
-                                {val.display_name}
+                                {val.displayName}
                             </div>
                         );
                     })}

js/components/table_item.js

@@ -10,8 +10,9 @@ let TableItem = React.createClass({
     // ToDo: Specify that every columnMap should look like this:
     // {
     //      'name-of-the-data-point': {
-    //          'display_name': String,
+    //          'displayName': String,
-    //          'display_type': ReactComponent
+    //          'displayType': ReactComponent,
+    //          'rowWidth': number
     //      }
     // 
     // }
@@ -22,7 +23,6 @@ let TableItem = React.createClass({
     render() {
         
         let columnContent = this.props.columnContent;
-        let columnClasses = this.calcColumnClasses(this.props.columnMap);
         let columnMapKeysList = Object.keys(this.props.columnMap);
 
         /**
@@ -32,10 +32,11 @@ let TableItem = React.createClass({
         let calcColumnElementContent = () => {
             return columnMapKeysList.map((key, i) => {
 
-                let TypeElement = this.props.columnMap[key].display_type;
+                let TypeElement = this.props.columnMap[key].displayType;
+                let columnClass = this.calcColumnClasses(this.props.columnMap, i);
 
                 return (
-                    <div className={columnClasses} key={i}>
+                    <div className={columnClass} key={i}>
                         <TypeElement content={this.props.columnContent[key]} width="50" />
                     </div>
                 );

js/mixins/table_column_mixin.js

@@ -5,11 +5,18 @@ let TableColumnMixin = {
      * Generates the bootstrap grid column declarations automatically using
      * the columnMap.
      */
-    calcColumnClasses(obj) {
+    calcColumnClasses(obj, i) {
         let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
-        let numOfColumns = GeneralUtils.valuesOfObject(obj).length;
         
-        return bootstrapClasses.join( numOfColumns + ' ') + numOfColumns;
+        let rowData = GeneralUtils.valuesOfObject(obj);
+        let listOfRowValues = rowData.map((val) => val.rowWidth );
+        let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
+
+        if(numOfColumns > 12) {
+            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
+        } else {
+            return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
+        }
     }
 };
 

js/utils/general_utils.js

@@ -25,6 +25,15 @@ let GeneralUtils = {
         return Object
                 .keys(obj)
                 .map(key => obj[key]);
+    },
+
+    /**
+     * Sums up a list of numbers. Like a Epsilon-math-kinda-sum...
+     */
+    sumNumList(l) {
+        let sum = 0;
+        l.forEach((num) => sum += parseFloat(num) || 0);
+        return sum;
     }
 };