Fix first k columns for tables for better view on Mobile Devices

app/company/peers.jsx

@@ -1,5 +1,6 @@
 "use strict"
 var React = require('react')
+var ReactDOM = require('react-dom')
 var api = require('../api.js')
 var Link = require('react-router').Link
 var Utils = require('../components/utils.js')
@@ -18,6 +19,10 @@ class Peers extends React.Component {
 
   componentDidMount() {
     this._req = this.fetchPeers(this.props.company)
+    this._req.then(resp => {
+      var peersDOMNode = ReactDOM.findDOMNode(this.refs.peers)
+      Utils.fixFirstKColumns(peersDOMNode, 2)
+    })
   }
 
   componentWillReceiveProps(props) {
@@ -79,7 +84,7 @@ class Peers extends React.Component {
       </h2>
 
       <div className="table-responsive">
-        <table className="table table-striped table-hover">
+        <table className="table table-striped table-hover" ref="peers">
           <thead>
             <tr>
               <th className="text">S.No.</th>

app/company/results.jsx

@@ -1,5 +1,6 @@
 "use strict"
 import React from 'react'
+import ReactDOM from 'react-dom'
 import Api from '../api.js'
 import {Link} from 'react-router'
 import classNames from 'classnames'
@@ -108,6 +109,11 @@ class Results extends React.Component {
     this.setState({schedules: {}})
   }
 
+  componentDidMount() {
+    var resultsDOMNode = ReactDOM.findDOMNode(this.refs.results)
+    Utils.fixFirstKColumns(resultsDOMNode, 1)
+  }
+
   handleExpand(field) {
     if(this.state.schedules[field])
       return
@@ -205,7 +211,7 @@ class Results extends React.Component {
       </h2>
 
       <div className="table-responsive">
-        <table className="table">
+        <table className="table" ref="results">
           <thead>
             <tr>
               <th />

app/components/utils.js

@@ -88,6 +88,26 @@ function getFormData(form) {
   return data;
 }
 
+function fixFirstKColumns(table, k)
+{
+  //Make a clone of our table
+  var tableClone = table.cloneNode(true)
+  table.parentNode.insertBefore(tableClone, table)
+  tableClone.className += ' fixed-column'
+
+  //Remove everything except for first column
+  var nodes = tableClone.querySelectorAll(['th:not(:nth-child(-n+'+k+'))', 'td:not(:nth-child(-n+'+k+')'])
+  nodes.forEach((el) => {
+    el.remove()
+  })
+
+  var trs = table.querySelectorAll('tr')
+  //Match the height of the rows to that of the original table's
+  tableClone.querySelectorAll('tr').forEach((elem, i) => {
+    elem.style.height = trs[i].offsetHeight + 'px'
+  })
+}
+
 exports.setTitle = setTitle;
 exports.scrollToTop = scrollToTop;
 exports.toSlug = toSlug;
@@ -96,3 +116,4 @@ exports.toMonthYear = toMonthYear;
 exports.withUnit = withUnit;
 exports.getPageNumbers = getPageNumbers;
 exports.getFormData = getFormData;
+exports.fixFirstKColumns = fixFirstKColumns;

custom.css

@@ -387,3 +387,17 @@ table .odd {
     font-size: 16px;
   }
 }
+
+.table-responsive>.fixed-column {
+    position: absolute;
+    display: inline-block;
+    width: auto;
+    border-right: 1px solid #ddd;
+    background-color: #fff;
+}
+
+@media(min-width:768px) {
+    .table-responsive>.fixed-column {
+        display: none;
+    }
+}