diff --git a/app/company/peers.jsx b/app/company/peers.jsx index 7970b86..7a81d08 100644 --- a/app/company/peers.jsx +++ b/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 {
- +
diff --git a/app/company/results.jsx b/app/company/results.jsx index ea1dee2..b9be647 100644 --- a/app/company/results.jsx +++ b/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 {
-
S.No.
+
diff --git a/app/components/utils.js b/app/components/utils.js index 1e98761..871dec2 100644 --- a/app/components/utils.js +++ b/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; diff --git a/custom.css b/custom.css index 6fb05cf..13e3c2d 100644 --- a/custom.css +++ b/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; + } +}