JSFiddle - React, Tailwind, and code Playground

by svierkant

HTML

<link rel="stylesheet" href="https://selectize.github.io/selectize.js/css/selectize.bootstrap3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.16/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.16/datatables.min.js"></script>
<div class="row">
  <div class="col-md-6">

    <table class="table table-hover table-striped scrollX">
      <thead>
        <tr>
          <td>Header 1</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1</td>
        </tr>
        <tr>
          <td>Row 2</td>
        </tr>
        <tr>
          <td>Row 3</td>
        </tr>
        <tr>
          <td>Row 4</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>

  <div class="col-md-6">

    <table class="table table-hover table-striped noScroll">
      <thead>
        <tr>
          <td>Header 1</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1</td>
        </tr>
        <tr>
          <td>Row 2</td>
        </tr>
        <tr>
          <td>Row 3</td>
        </tr>
        <tr>
          <td>Row 4</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
            </select>
       ...

JavaScript

$(document).ready(function() {
  $('table.scrollX').DataTable({
    "scrollX": true,
  });
  $('table.noScroll').DataTable({
    "scrollX": false,
  });
  $('select').selectize({
  	"dropdownParent": "body"
  });
});