JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

        <table cellspacing="0" class="responsive">
            <thead>
                <tr>
                    <th>Date</th>
                    <th class="persist essential">Product/Cover type</th>
                    <th class="optional">Address</th>
                    <th class="optional">Quotes &amp; price</th>
                    <th>Expiry date</th>
                    <th class="persist essential">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>28 Mar 2012</td>
                    <td>Home / Buildings Only</td>
                    <td>EC3A 7LP</td>
                    <td>7 from &pound;183.28</td>
                    <td>23 days</td>
                    <td><a href="#">View</a></td>
                </tr>
                <tr>
                    <td>28 Mar 2012</td>
                    <td>Home / Buildings Only</td>
                    <td>EC3A 7LP</td>
                    <td>7 from &pound;183.28</td>
                    <td>23 days</td>
                    <td><a href="#">View</a></td>
                </tr>
                <tr>
                    <td>28 Mar 2012</td>
                    <td>Home / Buildings Only</td>
                    <td>EC3A 7LP</td>
                    <td>7 from &pound;183.28</td>
                    <td>23 days</td>
                    <td><a href="#">View</a></td>
                </tr>
                <tr>
                    <td>28 Mar 2012</td>
                    <td>Home / Buildings Only</td>
                    <td>EC3A 7LP</td>
                    <td>7 from &pound;183.28</td>
                    <td>23 days</td>
                    <td><a href="#">View</a></td>
                </tr>
                <tr>
                    <td>28 Mar 2012</td>
                    <td>Home / Buildings Only</td>
                    <td>EC3A 7LP</td>
                    <td>7 from &pound;183.28</td>
                    <td>23 days</td>
         ...

CSS

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
big,
cite,
code,
del,
dfn,
img,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/*! normalize.css 2012-01-22T23:30 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
/*
 * Prevents modern browsers from displaying 'audio' without controls
 */
audio:not([controls]) {
  display: none;
}
/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
[hidden] {
  display: none;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
  font-size: 100%;
  /* 1 */

  -webkit-text-size-adjust: 100%;
  /* 2 */

  -ms-text-size-adjust: 100%;
 ...

JavaScript

/*
    name: ResponsiveTable

    description:
            Port of Filament Groups jQuery plugin that allows columns to be shown/hidden with
            checkboxes based on media queries
            http://filamentgroup.com/examples/rwd-table-patterns/

    authors:
        Simon Smith - http://blink-design.net
        https://github.com/simonsmith/MooTools-ResponsiveTable

    license: MIT-style license.

    version: 1.1

    requires:
      - Core/Event
      - Core/Element
      - Core/Class
      - More/Element.Shortcuts

    provides:
      - ResponsiveTable
*/

(function (name, global, definition) {
    if (typeof module !== 'undefined') module.exports = definition(name, global);
    else if (typeof define === 'function' && typeof define.amd  === 'object') define(definition);
    else global[name] = definition(name, global);
})('ResponsiveTable', this, function (name, global) {

    'use strict';

    return new Class({

        Implements: [Options, Events],

        options: {
            classes: {
                enhanced: 'enhanced',
                persist: 'persist',
                colHidden: 'col-hidden',
                colVisible: 'col-visible'
            },
            displayMenu: {
                linkText: 'Display columns',
                position: 'top'
            },
            checkInputEvents: ['orientationchange', 'resize']
        },

        /**
         * @param {Element|String} table
         * @param {Object} options
         */
        initialize: function(table, options) {

            this.setOptions(options);

            this.table = document.getElement(table);

            this.table.addClass(this.options.classes.enhanced);
            this.container = new Element('div.responsive-table-container').wraps(this.table);

            this.displayMenu = this.createDisplayMenu();
            this.associateColumns();
            this.displayMenu.inject(this.container, this.options.displayMenu.position);
           ...