JSFiddle - React, Tailwind, and code Playground

by Douglas Mosman

HTML

<div class="left">
            <h2>CourseList</h2>
        </div>

    </div>

    <div style="display:none;">
        Applicationpath: /<br />
        CurrentExecutionFilePath: /Registration/courselist<br />
        FilePath: /Registration/courselist<br />
        Path: /Registration/courselist<br />
        PhysicalApplicationPath: C:\Users\dmosman\Documents\Visual Studio 2013\Projects\ceWebObjects\ceWebRegistration\<br />
        PhysicalPath: C:\Users\dmosman\Documents\Visual Studio 2013\Projects\ceWebObjects\ceWebRegistration\Registration\courselist<br />
        base URL Prefix: api
        base URL Prefix Relative: /api
    </div>

    <table id="courseList" class="offertable">
        <thead>
            <tr>
                <th>Program ID</th>
                <th>Course ID</th>
                <th>Offering</th>
                <th>Details</th>
                <th>Offering Type</th>
                <th>Total Hours</th>
                <th>List Price</th>
                <th>Delivery Mode</th>
                <th>Fee Basis</th>
            </tr>
        </thead>
        <tbody>

                <tr>
                    <td>
                        EIPR21-EIPR21
                    </td>
                    <td>
                    </td>

                    <td>
                        <h5>
                                <a href=/registration/program/1024/EIPR21-EIPR21/evidence-informed-practice-program>
                                Evidence Informed Practice Program
                                </a>
                        </h5>
                        <br />

                        <p>
                            Short description for Evidence Informed Practice
                        </p>
                        <br />
                    </td>

                    <td>
                        
                        1/31/2013 <br />
12.00 hrs <br />
                        WEB <br />
$300.00 list                    </td>



                   ...

CSS

/*============= DataTables ======*/
/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #111111;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable thead .sorting {
  background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background: url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background: url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: url("../images/sort_desc_disabled.png") no-repeat center right;
}
table.dataTable tbody tr {
  background-color: white;
}
table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}
table.dataTable tbody th,
table.dataTable tbody td {
  padding: 8px 10px;
}
table.dataTable th.center,
table.dataTable td.center,
table.dataTable td.dataTables_empty {
  text-align: center;
}
table.dataTable th.right,
table.dataTable td.right {
  text-align: right;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #dddddd;
}
table.dataTable.row-border tbody tr:first-child...

JavaScript

//==========  Migrate v1.2.1  ==========//
/*!
 * jQuery Migrate - v1.2.1 - 2013-05-08
 * https://github.com/jquery/jquery-migrate
 * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors; Licensed MIT
 */
(function( jQuery, window, undefined ) {
// See http://bugs.jquery.com/ticket/13335
// "use strict";


var warnedAbout = {};

// List of warnings already given; public read only
jQuery.migrateWarnings = [];

// Set to true to prevent console output; migrateWarnings still maintained
// jQuery.migrateMute = false;

// Show a message on the console so devs know we're active
if ( !jQuery.migrateMute && window.console && window.console.log ) {
	window.console.log("JQMIGRATE: Logging is active");
}

// Set to false to disable traces that appear with warnings
if ( jQuery.migrateTrace === undefined ) {
	jQuery.migrateTrace = true;
}

// Forget any warnings we've already given; public
jQuery.migrateReset = function() {
	warnedAbout = {};
	jQuery.migrateWarnings.length = 0;
};

function migrateWarn( msg) {
	var console = window.console;
	if ( !warnedAbout[ msg ] ) {
		warnedAbout[ msg ] = true;
		jQuery.migrateWarnings.push( msg );
		if ( console && console.warn && !jQuery.migrateMute ) {
			console.warn( "JQMIGRATE: " + msg );
			if ( jQuery.migrateTrace && console.trace ) {
				console.trace();
			}
		}
	}
}

function migrateWarnProp( obj, prop, value, msg ) {
	if ( Object.defineProperty ) {
		// On ES5 browsers (non-oldIE), warn if the code tries to get prop;
		// allow property to be overwritten in case some other plugin wants it
		try {
			Object.defineProperty( obj, prop, {
				configurable: true,
				enumerable: true,
				get: function() {
					migrateWarn( msg );
					return value;
				},
				set: function( newValue ) {
					migrateWarn( msg );
					value = newValue;
				}
			});
			return;
		} catch( err ) {
			// IE8 is a dope about Object.defineProperty, can't warn there
		}
	}

	// Non-ES5 (or broken) browser; just set the...