JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//datatables.net/download/build/nightly/jquery.dataTables.css">
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//datatables.net/download/build/dataTables.responsive.nightly.css?_=10286c5adce287862954c6f702966dd3.css">
<script src="//datatables.net/download/build/dataTables.responsive.nightly.js?_=10286c5adce287862954c6f702966dd2"></script>
<div class="container">
      <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#home" role="tab" data-toggle="tab">Tab 1</a></li>
        <li><a href="#profile" role="tab" data-toggle="tab">Tab 2</a></li>
      </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home">
       <table id="table1" class="data-table display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
           ...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

JavaScript

$(document).ready( function () {
  $('.data-table').DataTable({
    "paging": true,
    "info": true,
    "responsive": true,
    "aoColumnDefs": [{
        "bSortable": false,
        "aTargets": ["no-sort"]
    }],
    "bInfo": true
  });
  
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('.data-table:visible').each( function(e) {
      alert('visible ' + $(this).attr('id'));
      $(this).DataTable().columns.adjust().responsive.recalc();
    });
  });
  
} );