JSFiddle - React, Tailwind, and code Playground

by marifrahman

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<script src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.css">
<script src="http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js"></script>
<div class="container">

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered dataTable" id="mytab">
        <thead>
          <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <td>Trident</td>
            <td>Internet Explorer 4.0</td>
            <td>Win 95+</td>
            <td class="center"> 4</td>
            <td class="center">X</td>
          </tr>
          <tr class="even gradeC">
            <td>Trident</td>
            <td>Internet Explorer 5.0</td>
            <td>Win 95+</td>
            <td class="center">5</td>
            <td class="center">C</td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 5.5</td>
            <td>Win 95+</td>
            <td class="center">5.5</td>
            <td class="center">A</td>
          </tr>
          <tr class="even gradeA">
            <td>Trident</td>
            <td>Internet Explorer 6</td>
            <td>Win 98+</td>
            <td class="center">6</td>
            <td class="center">A</td>
          </tr>
          <tr class="odd gradeA">
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td class="center">7</td>
            <td class="center">A</td>
          </tr>
...

JavaScript

var oTable = $('#mytab').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            },
        "sScrollX": "100%",
        "sScrollXInner": "120%",
        "bScrollCollapse": true
        
    } );
    new FixedColumns( oTable );