JSFiddle - React, Tailwind, and code Playground

by Jimmy Genslinger

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.24/b-1.7.0/sb-1.0.1/datatables.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.24/b-1.7.0/sb-1.0.1/datatables.min.js"></script>

<table id='ccr2018' class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>ACT Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jimmy</td>
      <td class=" detailRow text-center"><button type="button" class="btn" data-toggle="tooltip" data-placement="left" data-html="true" title="" data-original-title="IC: 2/10/2018 " aria-describedby="tooltip771300"><span class="badge badge-danger">16</span></button>
      </td>
    </tr>
    <tr>
      <td>Pam</td>
      <td class=" detailRow text-center"><button type="button" class="btn" data-toggle="tooltip" data-placement="left" data-html="true" title="" data-original-title="IC: 2/10/2018 " aria-describedby="tooltip771300"><span class="badge badge-danger">21</span></button>
      </td>
    </tr>
    <tr>
      <td>Alex</td>
      <td class=" detailRow text-center"><button type="button" class="btn" data-toggle="tooltip" data-placement="left" data-html="true" title="" data-original-title="IC: 2/10/2018 " aria-describedby="tooltip771300"><span class="badge badge-danger">18</span></button>
      </td>
    </tr>
    <tr>
      <td>Brandie</td>
      <td class="...

JavaScript

var dt = $('#ccr2018').DataTable({
              paging: false,
                dom: "<'row'<'col-6'Q><'col-6'f>" +
                    "<'row'<'col-12'tr>>",
              searchBuilder: {
                columns: [
                  0, 1
                ],
              },
              language: {
                searchBuilder: {
                  add: 'Add Filter',
                  clearAll: 'Reset',
                  data: 'Column',
                  title: {
                    0: 'Filters',
                    _: 'Filters (%d)'
                  },
                }
              },
              columns: [{ //0
                  className: "detailRow text-left",
                },
                { //9
                  type: "html-num",
                },
              ],
            });