JSFiddle - React, Tailwind, and code Playground

HTML

<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/bs4/dt-1.10.16/datatables.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.16/datatables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.4/js/dataTables.scroller.min.js"></script>
<div class="container">
      <table id="tb" class="table table-condensed table-hover">
        <thead>
          <tr>
            <th>UF</th>
            <th>Nome</th>
            <th>Pais</th>
            <th style="width: 15px;"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AC</td>
            <td>Acre</td>
            <td>Brasil</td>
            <td>
              <div class="btn btn-group" >
                <div data-toggle="dropdown" title="Ações">
                  <i class="fa-cog fa"></i>
                  <i> </i>
                  <i class="fa-caret-down fa"></i>
                </div>

                <ul class="dropdown-menu-right dropdown-menu">
                  <li><span>Editar</span></li>
                  <li><span>Visualizar</span></li>
                </ul>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

JavaScript

$(document).ready(function () {
        (function() {
          for(var n=49, r=document.querySelector("tbody>tr"), p=r.parentNode; n--; p.appendChild(r.cloneNode(true)));
        })();

        $('#tb').DataTable( {
          "language": {
            "info": "Mostrando de _START_ ate _END_ de _TOTAL_ registros"
          },
          "searching": false,
          "ordering": false,
          "lengthChange": false,
          "pageLength": 8,
          "scrollY": 400,
          "scrollCollapse": true,
          "deferRender": true,
          "scroller": true,
          "columns": [
          { "data": "uf" },
          { "data": "nome" },
          { "data": "pais" },
          { "data": "null" }
          ],
          "dom": '<"common-grid" t>i'
        })
      })