JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<table class="tablesaw" data-mode="columntoggle">
		<thead>
			<tr>
				<th data-priority="3">Rank</th>
				<th data-priority="persist">Movie Title</th>
				<th data-priority="2">Year</th>
				<th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
				<th data-priority="4">Reviews</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
				<td>1941</td>
				<td>100%</td>
				<td>74</td>
			</tr>
			<tr>
				<th>2</th>
				<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
				<td>1942</td>
				<td>97%</td>
				<td>64</td>
			</tr>
			<tr>
				<th>3</th>
				<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
				<td>1972</td>
				<td>97%</td>
				<td>87</td>
			</tr>
			<tr>
				<th>4</th>
				<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
				<td>1939</td>
				<td>96%</td>
				<td>87</td>
			</tr>
			<tr>
				<th>5</th>
				<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
				<td>1962</td>
				<td>94%</td>
				<td>87</td>
			</tr>
		</tbody>
	</table>

CSS

/*
 * Simple jQuery Dialog
 * https://github.com/filamentgroup/dialog
 *
 * Copyright (c) 2013 Filament Group, Inc.
 * Licensed under the MIT, GPL licenses.
 */
.dialog-content,
.dialog-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: none;
}
.dialog-background {
	background: #aaa;
	background-color: rgba(0,0,0,.4);
	z-index: 99999;
	height: 100%;
	bottom: 0;
}
.dialog-content {
	margin: 1em;
	background: #fff;
	padding: 1em 2em;
	max-width: 30em;
	box-shadow: 0 1px 2px #777;
	z-index: 100000;
}
/*
	IE8+ issue with centering dialog
	https://github.com/filamentgroup/dialog/issues/6
	requires Respond.JS for IE8
*/
@media (min-width: 30em) {
	.dialog-content {
		width: 30em;
	}
}
.dialog-open,
.dialog-background-open {
	display: block;
}
.dialog-background-trans {
	background: transparent;
}

@media (min-width: 32em){
	.dialog-content {
		margin: 4em auto 1em;
	}
}
/*! Tablesaw - v0.1.2 - 2014-05-14
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2014 Filament Group; Licensed MIT */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}

/* Structure */

.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .5em .7em;
}

.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}



.tablesaw-enhanced .tablesaw-bar .btn {
  border: 1px solid #ccc;
  background: none;
  background-color: #fafafa;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,1);
  box-shadow: 0 1px 0 rgba(255,255,255,1);
  color: #4a4a4a;
  clear: both;
  cursor: pointer;
  display: block;
  font: bold 20px/1 sans-serif;
  margin: 0;
  padding: .5em .85em .4em .85em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  text-shadow: 0 1px 0 #fff;
  width: 100%;
  /* Theming */
  background-image:...

JavaScript

/*
 * Simple jQuery Dialog
 * https://github.com/filamentgroup/dialog
 *
 * Copyright (c) 2013 Filament Group, Inc.
 * Author: @scottjehl
 * Licensed under the MIT, GPL licenses.
 */

(function( w, $ ){
	$.fn.dialog = function(){

		var pluginName = "dialog",
			cl = {
				open: pluginName + "-open",
				content: pluginName + "-content",
				close: pluginName + "-close",
				bkgd: pluginName + "-background",
				bkgdOpen: pluginName + "-background-open"
			},
			ev = {
				open: pluginName + "-open",
				close: pluginName + "-close"
			},
			nullHash = "dialog",
			doc = w.document,
			docElem = doc.documentElement,
			body = doc.body,
			$html = $( docElem ),
			$background = $( doc.createElement( 'div' ) ).addClass( cl.bkgd );

		return this.each(function(){

			var $el = $( this ),
				positionMedia = $el.attr( 'data-set-position-media' ),
				scroll = 0,
				focused = null,
				isOpen = false;

			$background.appendTo( body );

			function isSetScrollPosition() {
				return !positionMedia || ( w.matchMedia && w.matchMedia( positionMedia ).matches );
			}

			function open( e ){
				$background[ 0 ].style.height = document.documentElement.clientHeight + "px";
				$el.addClass( cl.open );
				$background.addClass( cl.bkgdOpen );

				if( isSetScrollPosition() ) {
					scroll = "pageYOffset" in w ? w.pageYOffset : ( docElem.scrollY || ( body && body.scrollY ) );
					$el[ 0 ].style.top = scroll + "px";
				} else {
					$el[ 0 ].style.top = '';
				}

				$html.addClass( cl.open );
				isOpen = true;
				location.hash = nullHash;
				if( doc.activeElement ){
					focused = doc.activeElement;
				}
				$el[ 0 ].focus();
			}

			function close(){
				$el.removeClass( cl.open );
				$background.removeClass( cl.bkgdOpen );
				$html.removeClass( cl.open );
				if( focused ){
					focused.focus();
				}
				if( isSetScrollPosition() ) {
					w.scrollTo( 0, scroll );
				}
				isOpen = false;
			}

			$el
				.addClass( cl.content )
				.attr( "role", "dialog"...