add real href to edition list

js/components/ascribe_table/models/table_models.js

@@ -31,4 +31,15 @@ export class TransitionModel {
         this.valueKey = valueKey;
         this.callback = callback;
     }
+
+    toReactRouterLinkProps(queryValue) {
+        let props = {
+            to: this.to,
+            params: {}
+        };
+
+        props.params[this.queryKey] = queryValue;
+
+        return props;
+    }
 }

js/components/ascribe_table/table_item_wrapper.js

@@ -4,6 +4,8 @@ import Router from 'react-router';
 import { ColumnModel } from './models/table_models';
 import TableColumnMixin from '../../mixins/table_column_mixin';
 
+let Link = Router.Link;
+
 let TableItemWrapper = React.createClass({
     mixins: [TableColumnMixin, Router.Navigation],
     propTypes: {
@@ -12,23 +14,6 @@ let TableItemWrapper = React.createClass({
         columnWidth: React.PropTypes.number.isRequired
     },
 
-    /**
-     * If a transition is defined in columnContent, then we can use
-     * Router.Navigation.transitionTo to redirect the user
-     * programmatically
-     */
-    transition(column) {
-        if(column.transition) {
-            let params = {};
-            params[column.transition.queryKey] = this.props.columnContent[column.transition.valueKey];
-            this.transitionTo(column.transition.to, params);
-
-            if(column.transition.callback) {
-                column.transition.callback();
-            }
-        }
-    },
-
     render() {
         return (
             <div>
@@ -39,17 +24,35 @@ let TableItemWrapper = React.createClass({
 
                     let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
 
-                    let transition = this.transition.bind(this, column);
+                    //
                     
-                    return (
-                        <div 
-                            className={columnClass + ' ascribe-table-item-column'} 
-                            key={i}
-                            onClick={transition}>
-                            <TypeElement {...typeElementProps} />
-                        </div>
-                    );
 
+                    if(!column.transition) {
+                        return (
+                            <div
+                                className={columnClass + ' ascribe-table-item-column'} 
+                                key={i}>
+                                <TypeElement {...typeElementProps} />
+                            </div>
+                        );
+                    } else {
+
+                        let linkProps = column.transition.toReactRouterLinkProps(this.props.columnContent[column.transition.valueKey]);
+                        /**
+                         * If a transition is defined in columnContent, then we can use
+                         * Router.Navigation.transitionTo to redirect the user
+                         * programmatically
+                         */
+                        return (
+                            <Link 
+                                className={columnClass + ' ascribe-table-item-column'} 
+                                key={i}
+                                onClick={column.transition.callback}
+                                {...linkProps}>
+                                <TypeElement {...typeElementProps} />
+                            </Link>
+                        );
+                    }
                 })}
             </div>
         );

sass/main.scss

@@ -73,10 +73,6 @@
     font-family: 'Source Sans Pro';
     font-size: .8em;
     height:3em;
-
-    &:not(:first-child) {
-        cursor: pointer;
-    }
 }
 
 .ascribe-table-item-column > * {