He's only gone and bloody done it!

dist/css/app.css

@@ -1 +1 @@
-.container-fluid{max-width:1440px}th{text-transform:capitalize}
+.container-fluid{max-width:1440px}h2{font-size:20px}th{text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px 6px}

dist/js/app.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),client=new XMLHttpRequest,objectifyMarkdownNotWomen=new marked.Renderer,moviesCollection,movies,cellCounter=0,lastHeading="",headers=["movie","genre","year","rating"],Table=function(e){function t(e){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.movies=e.movies,o.columns=[],headers.map(function(e,t){var n=0==t;o.columns.push(React.createElement(TableHeaderColumn,{key:t,isKey:n,dataField:e,dataSort:!0},e))}),o}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return React.createElement(BootstrapTable,{data:this.movies,hover:!0},this.columns)}}]),t}(React.Component);objectifyMarkdownNotWomen.heading=function(e,t){lastHeading=e},objectifyMarkdownNotWomen.tablerow=function(e){cellCounter=0,movies.push({})},objectifyMarkdownNotWomen.tablecell=function(e,t){movies[movies.length-1][headers[cellCounter]]=e,cellCounter++},objectifyMarkdownNotWomen.table=function(e,t){movies[0][headers[0]].toLowerCase()==headers[0]&&movies.splice(0,1),null==movies[movies.length-1][headers[0]]&&movies.pop(),moviesCollection.push({heading:lastHeading,movies:movies}),movies=[{}]},client.open("GET",window.location.href+"README.md"),client.onreadystatechange=function(e){moviesCollection=[],movies=[{}],marked(client.responseText,{renderer:objectifyMarkdownNotWomen},function(){if(null!=moviesCollection[0]){var e=[];moviesCollection.map(function(t,o){e.push(React.createElement("div",{key:o},React.createElement("h1",null,t.heading),React.createElement(Table,{movies:t.movies})))}),ReactDOM.render(React.createElement("div",null,e),document.getElementById("root"))}})},client.send();
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),client=new XMLHttpRequest,objectifyMarkdownNotWomen=new marked.Renderer,moviesCollection,movies,cellCounter=0,lastHeading="",headers=["movie","genre","year","rating"],parseNowt=function(e,t){return e},parseTheImdb=function(e,t){if(null!=e)return e.replace("/10","")},Table=function(e){function t(e){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.movies=e.movies,o.columns=[],headers.map(function(e,t){var n=0==t,r="rating"==e;o.columns.push(React.createElement(TableHeaderColumn,{key:t,isKey:n,dataFormat:r?parseTheImdb:parseNowt,dataField:e,dataSort:!0},e))}),o}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){return React.createElement(BootstrapTable,{data:this.movies,hover:!0},this.columns)}}]),t}(React.Component);objectifyMarkdownNotWomen.heading=function(e,t){lastHeading=e},objectifyMarkdownNotWomen.tablerow=function(e){cellCounter=0,movies.push({})},objectifyMarkdownNotWomen.tablecell=function(e,t){movies[movies.length-1][headers[cellCounter]]=e,cellCounter++},objectifyMarkdownNotWomen.table=function(e,t){movies[0][headers[0]].toLowerCase()==headers[0]&&movies.splice(0,1),null==movies[movies.length-1][headers[0]]&&movies.pop(),moviesCollection.push({heading:lastHeading,movies:movies}),movies=[{}]},client.open("GET",window.location.href+"README.md"),client.onreadystatechange=function(e){document.getElementById("root").innerHTML="",moviesCollection=[],movies=[{}],marked(client.responseText,{renderer:objectifyMarkdownNotWomen},function(){if(null!=moviesCollection[0]){console.log(moviesCollection);var e=[];moviesCollection.map(function(t,o){e.push(React.createElement("div",{key:o},React.createElement("h2",null,t.heading),React.createElement(Table,{movies:t.movies})))}),ReactDOM.render(React.createElement("div",null,React.createElement("h1",null,"Movies For Hackers"),e),document.getElementById("root"))}})},client.send();

src/js/app.js

@@ -13,6 +13,16 @@ var client = new XMLHttpRequest(),
  * React Table Component
  * Using https://github.com/AllenFang/react-bootstrap-table
  */
+const parseNowt = (cell, row) => {
+	return cell;
+}
+const parseTheImdb = (cell, row) => {
+	// Make it like 7.1 rather than 7.1/10, we all know what it's out of.
+	if (cell != null) {
+		return cell.replace('/10', '');
+	}
+}
+
 class Table extends React.Component {
 	// Runs on init
 	constructor(props) {
@@ -25,9 +35,18 @@ class Table extends React.Component {
 
 		// Create table headers (the rest is all handled by the plugin)
 		headers.map((header, i) => {
-			let isFirstItem = (i == 0);
+			let isFirstItem = (i == 0),
+				parseImdb = (header == 'rating')
 			this.columns.push(
-				<TableHeaderColumn key={i} isKey={isFirstItem} dataField={header} dataSort={true}>{header}</TableHeaderColumn>
+				<TableHeaderColumn
+					key={i}
+					isKey={isFirstItem}
+					dataFormat={parseImdb ? parseTheImdb : parseNowt}
+					dataField={header}
+					dataSort={true}
+				>
+					{header}
+				</TableHeaderColumn>
 			);
 		});
 	}
@@ -35,7 +54,10 @@ class Table extends React.Component {
 	// Runs on render
 	render() {
 		return (
-			<BootstrapTable data={this.movies} hover={true}>
+			<BootstrapTable
+				data={this.movies}
+				hover={true}
+			>
 				{this.columns}
 			</BootstrapTable>
 		);
@@ -80,7 +102,8 @@ objectifyMarkdownNotWomen.table = function(header, body) {
 // Ajax the markdown file with all movie data
 client.open('GET', window.location.href + 'README.md');
 client.onreadystatechange = function(e) {
-	// Wipe movies and collections as this'll run a bunch of times
+	// Wipe movies, collections and content as this'll run a bunch of times
+	document.getElementById("root").innerHTML = '';
 	moviesCollection = [];
 	movies = [{}];
 
@@ -95,7 +118,7 @@ client.onreadystatechange = function(e) {
 		if (moviesCollection[0] == null) {
 			return;
 		}
-		//console.log(moviesCollection);
+		console.log(moviesCollection);
 		//document.body.innerHTML = JSON.stringify(moviesCollection);
 
 		// Create JSX for tables of each set of movies in moviesCollection
@@ -103,7 +126,7 @@ client.onreadystatechange = function(e) {
 		moviesCollection.map((movies, i) => {
 			moviesCollectionJSX.push(
 				<div key={i}>
-					<h1>{movies.heading}</h1>
+					<h2>{movies.heading}</h2>
 					<Table movies={movies.movies} />
 				</div>
 			)
@@ -111,6 +134,7 @@ client.onreadystatechange = function(e) {
 
 		ReactDOM.render(
 			<div>
+				<h1>Movies For Hackers</h1>
 				{moviesCollectionJSX}
 			</div>,
 			document.getElementById("root")

src/scss/app.scss

@@ -1,6 +1,28 @@
 .container-fluid {
 	max-width: 1440px;
 }
+h2 {
+	font-size: 20px;
+}
 th {
 	text-transform: capitalize;
+	background: #eef7fd;
+}
+.react-bs-table {
+	border: 1px solid #ddd;
+	border-radius: 2px;
+	margin: 0;
+}
+.table {
+	// Cells
+	> thead,
+	> tbody,
+	> tfoot {
+		> tr {
+			> th,
+			> td {
+				padding: 1px 6px;
+			}
+		}
+	}
 }