JSFiddle - React, Tailwind, and code Playground
by ppgab
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="table table-sm table-hover table-striped">
<thead id="header">
<tr>
<th class="text-center text-nowrap py-2 border-bottom" id="check-header" type="check"><input type="checkbox"></th>
<th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Tecnico">Tecnico<span class="float-right mt-1 icon-sort-solid">S</span></th>
<th class="clickable text-nowrap py-2 border-bottom" scope="col" type="date" value="Data">Data<span class="float-right mt-1 icon-sort-solid">S</span></th>
<th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Consequencia">Consequência<span class="float-right mt-1 icon-sort-solid">S</span></th>
<th class="clickable text-nowrap py-2 border-bottom" scope="col" type="str" value="Descricao">Descrição<span class="float-right mt-1 icon-sort-solid">S</span></th>
</tr>
</thead>
<tbody id="body">
<tr class="clickable" id="1" data-oindex="0">
<td class="text-center"><input class="row-select" type="checkbox"></td>
<td type="str" value="2">2</td>
<td type="date" value="1487559600000">20/02/2017</td>
<td type="str" value="contaminação do solo/ água armazenada em bandeja atraindo fauna local. podendo assim atrair animais peçonhentos.">contaminação do solo/ água armazenada em bandeja atraindo fauna local. podendo assim atrair animais peçonhentos.</td>
<td type="str" value="Tambor combustível armazenado diretamente no solo, sem fazer uso da bacia de contenção.">Tambor...