JSFiddle - React, Tailwind, and code Playground

by BamBamm

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<div data-role="page" id="pagesample">
  
  <div data-role="main" class="ui-content">
      <p>This table is responsive THANKS TO THE REFRESH METHOD. Try to resize the width of your browser window.</p>
    <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="customerTable">
      <thead>
        <tr>
          <th data-priority="6">customer ID</th>
          <th>Customer name</th>
          <th data-priority="1">First name</th>
          <th data-priority="2">Address</th>
          <th data-priority="3">City</th>
          <th data-priority="4">PostalCode</th>
          <th data-priority="5">Country</th>
        </tr>
      </thead>
      <tbody id="customerTableBody">
      </tbody>
    </table>
  </div>

</div>

JavaScript

$(document).ready(function() {
    tableBody = "";
    tableBody += " <tr> <td>10801</td> <td>Some name</td> <td>Some firt name</td> <td>Some address</td> <td>London</td> <td>123456</td> <td>United Kingdom</td> </tr>";
    tableBody += " <tr> <td>10801</td> <td>Some name</td> <td>Some firt name</td> <td>Some address</td> <td>London</td> <td>123456</td> <td>United Kingdom</td> </tr>";
    tableBody += " <tr> <td>10801</td> <td>Some name</td> <td>Some firt name</td> <td>Some address</td> <td>London</td> <td>123456</td> <td>United Kingdom</td> </tr>";
    $('#customerTableBody').html(tableBody); 
    // refresh to make responsive!
    $('#customerTable').table( "refresh" );
});