JSFiddle - React, Tailwind, and code Playground

by Renilson Meneguci

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<table class="cell-border table-bordered table-responsive table-striped dataTable" id="tblResumo" role="grid" style="width: 973px;">
                <thead>
                    <tr bgcolor="#F1F1F1" role="row"><th style="width: 15px;" rowspan="2" class="sorting" tabindex="0" aria-controls="tblResumo" colspan="1" aria-label=": activate to sort column ascending"></th><th rowspan="2" style="width: 375px;" class="sorting" tabindex="0" aria-controls="tblResumo" colspan="1" aria-label="
                            Tipo de Obrigação
                        : activate to sort column ascending">
                            <p align="center">Tipo de Obrigação</p>
                        </th><th rowspan="2" style="width: 52px;" class="sorting_asc" tabindex="0" aria-controls="tblResumo" colspan="1" aria-label="
                            Total
                        : activate to sort column descending" aria-sort="ascending">
                            <p align="center" data-title="Total de Entidades" class="tooltipTitle">Total</p>
                        </th><th rowspan="2" style="width: 56px;" class="sorting" tabindex="0" aria-controls="tblResumo" colspan="1" aria-label="
                            Em Dia
                        : activate to sort column ascending">
                            <p align="center" data-title="Total de Entidades Em Dia" class="tooltipTitle">Em Dia</p>
                        </th><th colspan="4" style="width: 150px" bgcolor="#FFFF66" rowspan="1">
                            <p align="center" data-title="Total de Entidades Com prestação Atrasada" class="tooltipTitle">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;Atrasados
                            </p>
                        </th><th colspan="2" rowspan="1">
            ...

JavaScript

$(document).ready(function () {
        $('#tblResumo').DataTable({
            "scrollCollapse": false,
            "paging": false,
            "info": false,
            bRetrieve: true,
            bSortable: true,
            "bFilter": false,
            "bSort": true,
            language: {
                "search": "Filtrar:",
                "emptyTable": "Nenhum registro encontrado utilizando este filtro.",
                "zeroRecords": "Nenhum registro encontrado utilizando este filtro."
            },
        });
    });