JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<p>Output the dataset into the table as rows and columns with headers.</p>
<p>Note: jQuery, Underscore, and Backbone are all available on the page.</p>

<div class="crate">
    <header>
        <h1>Employees</h1>
    </header>
    <div class="body">
        <div class="content">
            <table>
            </table>
        </div>
    </div>
</div>

CSS

.clear:after, .crate > header:after, .crate > footer:after, .panel > header > .control:after, .row-cluster:after, .simple-row:after, .icon-row:after, .inline-image-block:after, .control:after, .field .form-control-group:after, .grid:after {
  content: "";
  display: table;
  clear: both; }

.fl, .crate > header h1, .simple-row > .line, .icon-row > .line, .simple-row > .extended, .icon-row > .extended, .icon-row > .icon, .tag-blob, .field .form-control-group .group, [class*='col-'] {
  float: left; }

.crate {
  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  -ms-border-radius: 0.25em;
  -o-border-radius: 0.25em;
  border-radius: 0.25em;
  border: 1px solid #DDDDDD;
  margin-bottom: 20px; }
  .crate.no-push {
    margin-bottom: 0; }
  .crate > header {
    -webkit-border-radius: 0.25em 0.25em 0 0;
    -moz-border-radius: 0.25em 0.25em 0 0;
    -ms-border-radius: 0.25em 0.25em 0 0;
    -o-border-radius: 0.25em 0.25em 0 0;
    border-radius: 0.25em 0.25em 0 0;
    padding: 10px 15px;
    border-bottom: 1px solid #DDDDDD;
    background-color: #F5F5F5; }
    .crate > header h1 {
      font-size: 1.5em;
      text-align: left;
      font-weight: normal;
      line-height: 1.5em; }
      .crate > header h1 img {
        height: 1em;
        width: 1em; }
    .crate > header div {
      line-height: 2.25em; }
      .crate > header div input,
      .crate > header div select,
      .crate > header div textarea {
        margin: 0;
        padding: 0; }
    .crate > header .fr {
      margin: 0;
      margin-top: 2px; }
  .crate > footer {
    text-align: right;
    padding: 10px 15px;
    border-top: 1px solid #DDDDDD; }
  .crate > .body > .control {
    text-align: right;
    width: 100%;
    padding: 0.5em;
    background-color: #e6e6e6; }
  .crate > .body > .content {
    padding: 15px; }

table {
  border-collapse: collapse;
  border-spacing: 0; 
}
table tr:hover{
    background-color: #CCCCCC;
}

JavaScript

var aDataSet = [
    { "name": "Bob", "age": "43", "gender": "M" },
    { "name": "Bill", "age": "59", "gender": "M" },
    { "name": "Steve", "age": "22", "gender": "M" },
    { "name": "Loretta", "age": "51", "gender": "F" },
    { "name": "Lois", "age": "37", "gender": "F" }
];