From 653e0cadcbfc65eb02abd6ee36fceb90ffca0818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 May 2015 14:51:15 +0200
Subject: [PATCH 1/5] Complete ordering functionality

---
 js/components/table_header.js             | 63 +++++------------------
 js/components/table_header_item.js        | 47 ++++++++++++++++-
 js/components/table_header_item_carret.js | 24 +++++++++
 3 files changed, 83 insertions(+), 51 deletions(-)
 create mode 100644 js/components/table_header_item_carret.js

diff --git a/js/components/table_header.js b/js/components/table_header.js
index 8754e477..d4afb409 100644
--- a/js/components/table_header.js
+++ b/js/components/table_header.js
@@ -2,6 +2,7 @@ import React from 'react';
 
 import TableColumnMixin from '../mixins/table_column_mixin';
 import GeneralUtils from '../utils/general_utils';
+import TableHeaderItem from './table_header_item';
 
 
 let TableHeader = React.createClass({
@@ -14,66 +15,30 @@ let TableHeader = React.createClass({
         orderBy: React.PropTypes.string.isRequired
     },
 
-    sortIndex(i) {
-
-        let orderAsc;
-
-        if(this.props.orderAsc) {
-            orderAsc = false;
-        } else {
-            orderAsc = true;
-        }
-
-        this.props.fetchList(1, 10, null, Object.keys(this.props.columnMap)[i], orderAsc);
-    },
-
     render() {
 
         let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
 
-        let calcHeaderText = (val, i, columnClass) => {
-
-            if(columnMapValuesList[i].canBeOrdered && Object.keys(this.props.columnMap)[i] === this.props.orderBy) {
-
-                let boundClick = this.sortIndex.bind(this, i);
-                let carretDirection = 'glyphicon-triangle-';
-
-                if(this.props.orderAsc) {
-                    carretDirection += 'top';
-                } else {
-                    carretDirection += 'bottom';
-                }
-
-                return (
-                    <div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
-                        <span>
-                            {val.displayName}
-                            <span className={'glyphicon ' + carretDirection}></span>
-                        </span>
-                    </div>
-                );
-            } else {
-                return (
-                    <div className={columnClass + ' ascribe-table-header-column'} key={i}>
-                        <span>
-                            {val.displayName}
-                        </span>
-                    </div>
-                );
-            }
-        };
-
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
                 <div className="row">
                     {columnMapValuesList.map((val, i) => {
 
-                        let columnClass = this.calcColumnClasses(this.props.columnMap, i);
+                        let columnClasses = this.calcColumnClasses(this.props.columnMap, i);
+                        let columnName = Object.keys(this.props.columnMap)[i];
+                        let canBeOrdered = columnMapValuesList[i].canBeOrdered;
 
                         return (
-                            <div key={i}>
-                                {calcHeaderText(val, i, columnClass)}
-                            </div>
+                            <TableHeaderItem
+                                key={i}
+                                columnClasses={columnClasses} 
+                                displayName={val.displayName} 
+                                columnName={columnName} 
+                                canBeOrdered={canBeOrdered} 
+                                orderAsc={this.props.orderAsc}
+                                orderBy={this.props.orderBy}
+                                fetchList={this.props.fetchList}>
+                            </TableHeaderItem>
                         );
                     })}
                 </div>
diff --git a/js/components/table_header_item.js b/js/components/table_header_item.js
index d566975c..d918f6e3 100644
--- a/js/components/table_header_item.js
+++ b/js/components/table_header_item.js
@@ -1,9 +1,52 @@
 import React from 'react';
 
+import TableHeaderItemCarret from './table_header_item_carret';
 
 let TableHeaderItem = React.createClass({
-    mixins: [TableColumnMixin],
+
+    propTypes: {
+        columnClasses: React.PropTypes.string.isRequired,
+        displayName: React.PropTypes.string.isRequired,
+        columnName: React.PropTypes.string.isRequired,
+        canBeOrdered: React.PropTypes.bool.isRequired,
+        orderAsc: React.PropTypes.bool.isRequired,
+        orderBy: React.PropTypes.string.isRequired,
+        fetchList: React.PropTypes.func.isRequired
+    },
+
+    changeOrder() {
+        this.props.fetchList(1, 10, null, this.props.columnName, !this.props.orderAsc);
+    },
+
     render() {
-        return()
+        if(this.props.canBeOrdered) {
+            if(this.props.columnName === this.props.orderBy) {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
+                    </div>
+                );
+            } else {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName}</span>
+                    </div>
+                );
+            }
+        } else {
+            return (
+                <div className={this.props.columnClasses + ' ascribe-table-header-column'}>
+                    <span>
+                        {this.props.displayName}
+                    </span>
+                </div>
+            );
+        }
     }
 });
+
+export default TableHeaderItem;
diff --git a/js/components/table_header_item_carret.js b/js/components/table_header_item_carret.js
new file mode 100644
index 00000000..8d33eb75
--- /dev/null
+++ b/js/components/table_header_item_carret.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+let TableHeaderItemCarret = React.createClass({
+    propTypes: {
+        orderAsc: React.PropTypes.bool.isRequired
+    },
+
+    render() {
+        let carretDirection = 'glyphicon-triangle-';
+
+        if(this.props.orderAsc) {
+            carretDirection += 'top';
+        } else {
+            carretDirection += 'bottom';
+        }
+
+        return (
+            <span className={'glyphicon ' + carretDirection}>
+            </span>
+        );
+    }
+});
+
+export default TableHeaderItemCarret;
\ No newline at end of file

From 8376032b95e0f18d5f6c3d4238d125698daf700a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 May 2015 15:14:05 +0200
Subject: [PATCH 2/5] group table component

---
 js/components/{ => ascribe_table}/table.js                  | 0
 js/components/{ => ascribe_table}/table_header.js           | 4 ++--
 js/components/{ => ascribe_table}/table_header_item.js      | 0
 .../{ => ascribe_table}/table_header_item_carret.js         | 0
 js/components/{ => ascribe_table}/table_item.js             | 2 +-
 js/components/{ => ascribe_table}/table_item_img.js         | 0
 js/components/{ => ascribe_table}/table_item_text.js        | 0
 js/components/header.js                                     | 1 +
 js/components/piece_list.js                                 | 6 +++---
 9 files changed, 7 insertions(+), 6 deletions(-)
 rename js/components/{ => ascribe_table}/table.js (100%)
 rename js/components/{ => ascribe_table}/table_header.js (93%)
 rename js/components/{ => ascribe_table}/table_header_item.js (100%)
 rename js/components/{ => ascribe_table}/table_header_item_carret.js (100%)
 rename js/components/{ => ascribe_table}/table_item.js (96%)
 rename js/components/{ => ascribe_table}/table_item_img.js (100%)
 rename js/components/{ => ascribe_table}/table_item_text.js (100%)

diff --git a/js/components/table.js b/js/components/ascribe_table/table.js
similarity index 100%
rename from js/components/table.js
rename to js/components/ascribe_table/table.js
diff --git a/js/components/table_header.js b/js/components/ascribe_table/table_header.js
similarity index 93%
rename from js/components/table_header.js
rename to js/components/ascribe_table/table_header.js
index d4afb409..38d32705 100644
--- a/js/components/table_header.js
+++ b/js/components/ascribe_table/table_header.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import TableColumnMixin from '../mixins/table_column_mixin';
-import GeneralUtils from '../utils/general_utils';
+import TableColumnMixin from '../../mixins/table_column_mixin';
+import GeneralUtils from '../../utils/general_utils';
 import TableHeaderItem from './table_header_item';
 
 
diff --git a/js/components/table_header_item.js b/js/components/ascribe_table/table_header_item.js
similarity index 100%
rename from js/components/table_header_item.js
rename to js/components/ascribe_table/table_header_item.js
diff --git a/js/components/table_header_item_carret.js b/js/components/ascribe_table/table_header_item_carret.js
similarity index 100%
rename from js/components/table_header_item_carret.js
rename to js/components/ascribe_table/table_header_item_carret.js
diff --git a/js/components/table_item.js b/js/components/ascribe_table/table_item.js
similarity index 96%
rename from js/components/table_item.js
rename to js/components/ascribe_table/table_item.js
index 41a40d11..5245a352 100644
--- a/js/components/table_item.js
+++ b/js/components/ascribe_table/table_item.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import TableColumnMixin from '../mixins/table_column_mixin';
+import TableColumnMixin from '../../mixins/table_column_mixin';
 import TableItemImg from './table_item_img';
 import TableItemText from './table_item_text';
 
diff --git a/js/components/table_item_img.js b/js/components/ascribe_table/table_item_img.js
similarity index 100%
rename from js/components/table_item_img.js
rename to js/components/ascribe_table/table_item_img.js
diff --git a/js/components/table_item_text.js b/js/components/ascribe_table/table_item_text.js
similarity index 100%
rename from js/components/table_item_text.js
rename to js/components/ascribe_table/table_item_text.js
diff --git a/js/components/header.js b/js/components/header.js
index c7ad3965..c9a4fc24 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import AltContainer from 'alt/AltContainer';
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 1638f55d..aaf05405 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -5,9 +5,9 @@ import AltContainer from 'alt/AltContainer';
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
-import Table from './table';
-import TableItemImg from './table_item_img';
-import TableItemText from './table_item_text';
+import Table from './ascribe_table/table';
+import TableItemImg from './ascribe_table/table_item_img';
+import TableItemText from './ascribe_table/table_item_text';
 
 let Link = Router.Link;
 

From 0f6dc6b3e002a5ef4e26f4857c47c54c3774df79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 May 2015 15:16:56 +0200
Subject: [PATCH 3/5] put link in header

---
 js/components/ascribe_app.js |  3 ---
 js/components/header.js      | 10 +++++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 7d19c1b0..bab7de97 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -11,9 +11,6 @@ let AscribeApp = React.createClass({
         return (
             <div>
                 <Header />
-                <nav>
-                    <Link to="pieces">pieces</Link>
-                </nav>
                 <RouteHandler />
             </div> 
         );
diff --git a/js/components/header.js b/js/components/header.js
index c9a4fc24..a3d32de0 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -1,9 +1,11 @@
 import React from 'react';
+import Router from 'react-router';
 
 import AltContainer from 'alt/AltContainer';
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
+let Link = Router.Link;
 
 let Header = React.createClass({
 
@@ -32,11 +34,17 @@ let Header = React.createClass({
                     <span className="icon-bar"></span>
                   </button>
                   <a className="navbar-brand" href="#">
-                       <span>ascribe</span> 
+                       <span>ascribe </span> 
                        <span className="glyph-ascribe-spool-chunked"></span>
                   </a>
                 </div>
+                
                 <div id="navbar" className="navbar-collapse collapse">
+                  <ul className="nav navbar-nav navbar-left">
+                    <li>
+                        <Link to="pieces">Pieces</Link>
+                    </li>
+                  </ul>
                   <ul className="nav navbar-nav navbar-right">
                     <li className="dropdown">
                       <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>

From 6821f5eb344ead2297fbc13dacbedccc33e94bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 May 2015 15:20:02 +0200
Subject: [PATCH 4/5] format header html

---
 js/components/header.js | 70 ++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/js/components/header.js b/js/components/header.js
index a3d32de0..f191c04c 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -25,43 +25,43 @@ let Header = React.createClass({
     render() {
         return (
             <nav className="navbar navbar-default navbar-fixed-top">
-              <div className="container">
-                <div className="navbar-header">
-                  <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                    <span className="sr-only">Toggle navigation</span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                    <span className="icon-bar"></span>
-                  </button>
-                  <a className="navbar-brand" href="#">
-                       <span>ascribe </span> 
-                       <span className="glyph-ascribe-spool-chunked"></span>
-                  </a>
+                <div className="container">
+                    <div className="navbar-header">
+                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                            <span className="sr-only">Toggle navigation</span>
+                            <span className="icon-bar"></span>
+                            <span className="icon-bar"></span>
+                            <span className="icon-bar"></span>
+                        </button>
+                        <a className="navbar-brand" href="#">
+                            <span>ascribe </span> 
+                            <span className="glyph-ascribe-spool-chunked"></span>
+                        </a>
+                    </div>
+                    
+                    <div id="navbar" className="navbar-collapse collapse">
+                        <ul className="nav navbar-nav navbar-left">
+                            <li>
+                                <Link to="pieces">Pieces</Link>
+                            </li>
+                        </ul>
+                        <ul className="nav navbar-nav navbar-right">
+                            <li className="dropdown">
+                                <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>
+                                <ul className="dropdown-menu" role="menu">
+                                    <li><a href="/art/faq/">Account Settings</a></li>
+                                    <li className="divider"></li>
+                                    <li><a href="/art/faq/">FAQ</a></li>
+                                    <li><a href="/art/terms/">Terms of Service</a></li>
+                                    <li className="divider"></li>
+                                    <li><a href="/api/users/logout/">Log out</a></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
-                
-                <div id="navbar" className="navbar-collapse collapse">
-                  <ul className="nav navbar-nav navbar-left">
-                    <li>
-                        <Link to="pieces">Pieces</Link>
-                    </li>
-                  </ul>
-                  <ul className="nav navbar-nav navbar-right">
-                    <li className="dropdown">
-                      <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{this.state.currentUser.username} <span className="caret"></span></a>
-                      <ul className="dropdown-menu" role="menu">
-                        <li><a href="/art/faq/">Account Settings</a></li>
-                        <li className="divider"></li>
-                        <li><a href="/art/faq/">FAQ</a></li>
-                        <li><a href="/art/terms/">Terms of Service</a></li>
-                        <li className="divider"></li>
-                        <li><a href="/api/users/logout/">Log out</a></li>
-                      </ul>
-                    </li>
-                  </ul>
-                </div>
-              </div>
             </nav>
-        )
+        );
     }
 });
 

From fb6945914cb3cc14dc6ed46976d41c3d64249efd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 May 2015 16:02:42 +0200
Subject: [PATCH 5/5] Refactor to proper TableColumnModel including model
 validation

---
 js/components/ascribe_table/table.js        |  8 ++++--
 js/components/ascribe_table/table_header.js | 15 +++++-----
 js/components/ascribe_table/table_item.js   | 26 ++++++-----------
 js/components/piece_list.js                 | 31 ++++++---------------
 js/mixins/table_column_mixin.js             |  8 +++---
 js/models/table_column_model.js             | 12 ++++++++
 6 files changed, 44 insertions(+), 56 deletions(-)
 create mode 100644 js/models/table_column_model.js

diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index 7565868c..721fb802 100644
--- a/js/components/ascribe_table/table.js
+++ b/js/components/ascribe_table/table.js
@@ -3,19 +3,21 @@ import React from 'react';
 import TableItem from './table_item';
 import TableHeader from './table_header';
 
+import TableColumnModel from '../../models/table_column_model';
+
 
 let Table = React.createClass({
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel))
     },
     render() {
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className="ascribe-table">
-                    <TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
+                    <TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
                     {this.props.itemList.map((item, i) => {
                         return (
-                            <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
+                            <TableItem columnList={this.props.columnList} columnContent={item} key={i} />
                         );
                     })}
                 </div>
diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js
index 38d32705..3c959f76 100644
--- a/js/components/ascribe_table/table_header.js
+++ b/js/components/ascribe_table/table_header.js
@@ -4,11 +4,13 @@ import TableColumnMixin from '../../mixins/table_column_mixin';
 import GeneralUtils from '../../utils/general_utils';
 import TableHeaderItem from './table_header_item';
 
+import TableColumnModel from '../../models/table_column_model';
+
 
 let TableHeader = React.createClass({
     mixins: [TableColumnMixin],
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired,
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
         itemList: React.PropTypes.array.isRequired,
         fetchList: React.PropTypes.func.isRequired,
         orderAsc: React.PropTypes.bool.isRequired,
@@ -16,17 +18,14 @@ let TableHeader = React.createClass({
     },
 
     render() {
-
-        let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
-
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
                 <div className="row">
-                    {columnMapValuesList.map((val, i) => {
+                    {this.props.columnList.map((val, i) => {
 
-                        let columnClasses = this.calcColumnClasses(this.props.columnMap, i);
-                        let columnName = Object.keys(this.props.columnMap)[i];
-                        let canBeOrdered = columnMapValuesList[i].canBeOrdered;
+                        let columnClasses = this.calcColumnClasses(this.props.columnList, i);
+                        let columnName = this.props.columnList[i].columnName;
+                        let canBeOrdered = this.props.columnList[i].canBeOrdered;
 
                         return (
                             <TableHeaderItem
diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js
index 5245a352..97181450 100644
--- a/js/components/ascribe_table/table_item.js
+++ b/js/components/ascribe_table/table_item.js
@@ -4,41 +4,31 @@ import TableColumnMixin from '../../mixins/table_column_mixin';
 import TableItemImg from './table_item_img';
 import TableItemText from './table_item_text';
 
+import TableColumnModel from '../../models/table_column_model';
+
 
 let TableItem = React.createClass({
     mixins: [TableColumnMixin],
 
-    // ToDo: Specify that every columnMap should look like this:
-    // {
-    //      'name-of-the-data-point': {
-    //          'displayName': String,
-    //          'displayType': ReactComponent,
-    //          'rowWidth': number
-    //      }
-    // 
-    // }
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired,
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
         columnContent: React.PropTypes.object.isRequired
     },
-    render() {
-        
-        let columnContent = this.props.columnContent;
-        let columnMapKeysList = Object.keys(this.props.columnMap);
 
+    render() {
         /**
          * An element in the Table can have a certain display_type.
          * A display_type is just 
          */
         let calcColumnElementContent = () => {
-            return columnMapKeysList.map((key, i) => {
+            return this.props.columnList.map((column, i) => {
 
-                let TypeElement = this.props.columnMap[key].displayType;
-                let columnClass = this.calcColumnClasses(this.props.columnMap, i);
+                let TypeElement = column.displayType;
+                let columnClass = this.calcColumnClasses(this.props.columnList, i);
 
                 return (
                     <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                        <TypeElement content={this.props.columnContent[key]} width="50" />
+                        <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
                     </div>
                 );
 
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index aaf05405..a414bdd2 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -9,6 +9,8 @@ import Table from './ascribe_table/table';
 import TableItemImg from './ascribe_table/table_item_img';
 import TableItemText from './ascribe_table/table_item_text';
 
+import TableColumnModel from '../models/table_column_model';
+
 let Link = Router.Link;
 
 
@@ -24,32 +26,15 @@ let PieceList = React.createClass({
 
     render() {
 
-        // TODO:
-        // Specifiy how a TableItemX should look like
-        let columnMap = {
-            'thumbnail': {
-                'displayName': '',
-                'displayType': TableItemImg,
-                'rowWidth': 2,
-                'canBeOrdered': false
-            },
-            'artist_name': {
-                'displayName': 'Artist',
-                'displayType': TableItemText,
-                'rowWidth': 4,
-                'canBeOrdered': true
-            },
-            'title': {
-                'displayName': 'Title',
-                'displayType': TableItemText,
-                'rowWidth': 4,
-                'canBeOrdered': true
-            }
-        };
+        let columnList = [
+            new TableColumnModel('thumbnail', '', TableItemImg, 2, false),
+            new TableColumnModel('artist_name', 'Artist', TableItemText, 4, true),
+            new TableColumnModel('title', 'Title', TableItemText, 4, true)
+        ];
 
         return (
             <AltContainer store={PieceListStore} actions={PieceListActions}>
-                <Table columnMap={columnMap} />
+                <Table columnList={columnList} />
             </AltContainer>
         );
     }
diff --git a/js/mixins/table_column_mixin.js b/js/mixins/table_column_mixin.js
index d2bf8977..5904389d 100644
--- a/js/mixins/table_column_mixin.js
+++ b/js/mixins/table_column_mixin.js
@@ -1,16 +1,16 @@
-import GeneralUtils from '../utils/general_utils';
+import React from 'react';
 
+import GeneralUtils from '../utils/general_utils';
 
 let TableColumnMixin = {
     /**
      * Generates the bootstrap grid column declarations automatically using
      * the columnMap.
      */
-    calcColumnClasses(obj, i) {
+    calcColumnClasses(list, i) {
         let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
         
-        let rowData = GeneralUtils.valuesOfObject(obj);
-        let listOfRowValues = rowData.map((val) => val.rowWidth );
+        let listOfRowValues = list.map((column) => column.rowWidth );
         let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
 
         if(numOfColumns > 12) {
diff --git a/js/models/table_column_model.js b/js/models/table_column_model.js
new file mode 100644
index 00000000..0a204717
--- /dev/null
+++ b/js/models/table_column_model.js
@@ -0,0 +1,12 @@
+class TableColumnItem {
+    constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
+        this.columnName = columnName;
+        this.displayName = displayName;
+        this.displayType = displayType;
+        this.rowWidth = rowWidth;
+        this.canBeOrdered = canBeOrdered;
+    }
+
+}
+
+export default TableColumnItem;
\ No newline at end of file