JSFiddle - React, Tailwind, and code Playground

by Gonzalo Guevara

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="filtros-tablas clearfix">
    <div class="filtro-item">
        <div class="dropdown clearfix">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">Región <span class="caret"></span>

            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
                <li role="presentation">	<a role="menuitem" tabindex="-1" href="#" data-trigger-row="central-america"><i class="glyphicon glyphicon-ok"></i> Central América</a>

                </li>
                <li role="presentation">	<a role="menuitem" tabindex="-1" href="#" data-trigger-row="caribe"><i class="glyphicon glyphicon-ok"></i> Caribe</a>

                </li>
                <li role="presentation">	<a role="menuitem" tabindex="-1" href="#" data-trigger-row="sur-america"><i class="glyphicon glyphicon-ok"></i> Sur América</a>

                </li>
                <li role="presentation">	<a role="menuitem" tabindex="-1" href="#" data-trigger-row="africa"><i class="glyphicon glyphicon-ok"></i> Africa</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="filtro-item">
        <div class="dropdown clearfix">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown" aria-expanded="true">Level One <span class="caret"></span>

            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
                <li role="presentation">	<a role="menuitem" tabindex="-1" href="#" data-head-mdos="1"><i class="glyphicon...

CSS

.filtros-tablas {
    padding: 1em 0;
}
.filtro-item {
    float: left;
    margin-right: 15px;
}
table {
    border-spacing: 0;
}
.tabla-data.model-dos {
    height: 448px;
    /* tablas-list-right*/
    /* Filtros Tablas */
}
/* line 2070, ../modulos/_main.scss */
 .tabla-data.model-dos .left-tabla-dos {
    height: 350px;
    position: absolute;
    width: 307px;
    border-right: 1px solid #fff;
}
/* line 2077, ../modulos/_main.scss */
 .tabla-data.model-dos .header-tabla-dos {
    height: 144px;
    /*48PX*/
    background: #F0F4F9;
}
/* line 2085, ../modulos/_main.scss */
 .tabla-data.model-dos .tablas-item-container-dos table {
    width: 100%;
}
/* line 2090, ../modulos/_main.scss */
 .tabla-data.model-dos .tablas-list-left-dos {
    height: 302px;
    overflow: hidden;
    overflow-x: scroll;
}
/* line 2094, ../modulos/_main.scss */
 .tabla-data.model-dos .tablas-list-left-dos table {
    width: 100%;
}
/* line 2098, ../modulos/_main.scss */
 .tabla-data.model-dos .tablas-list-left-dos .table-border {
    border-top: 1px solid #c3c3c3;
}
/* line 2100, ../modulos/_main.scss */
 .tabla-data.model-dos .tablas-list-left-dos .table-border:first-child {
    border-top: none;
}
/* line 2106, ../modulos/_main.scss */
 .tabla-data.model-dos .cat-item-dos, .tabla-data.model-dos .cat-dos {
    height: 48px;
}
/* line 2111, ../modulos/_main.scss */
 .tabla-data.model-dos .cat-item-dos {
    background: #e3e3e3;
    padding-left: 15px;
}
/* line 2115, ../modulos/_main.scss */
 .tabla-data.model-dos .cat-dos {
    background: #c3c3c3;
}
/* line 2120, ../modulos/_main.scss */
 .tabla-data.model-dos .cat-name-dos {
    padding-left: 15px;
}
/* line 2123, ../modulos/_main.scss */
 .tabla-data.model-dos .cat-name-dos i {
    margin-right: 10px;
}
/* line 2133, ../modulos/_main.scss */
 .tabla-data.model-dos .right-tabla-dos {
    height: 447px;
    position: absolute;
    width: 704px;
    left: 320px;
    overflow: hidden;
}
/* line 2142, ../modulos/_main.scss */
...

JavaScript

var scrollBarWidth = 19;
var singleHeaderDos = $(".header-container-dos .column-header-dos");
var headerNivelUnoWidth = 720;
var headerNivelDosWidth = 160;
var headerNivelTresBase = 100;
var headerNivelTresWidth = (headerNivelDosWidth / 3);

var headerNivelDos = $(".column-header-dos .header-nivel-dos");
var headerNivelTres = $(".header-nivel-dos .header-nivel-tres");
// Table Right VARS
var headerContainerDos = $('.header-container-dos'); //El contenedor de los headers

//	SHOW/HIDE COLLAPSE ROW
//=======================================================

var collapseRows = function (that) {
    var dataTrigger = $(that).attr('data-trigger');
    $(that).find('i').toggleClass('fa-plus-square fa-minus-square'); //Cambia el icono

    if ($('div[data-container="' + dataTrigger + '" ]').length) {
        var elem = $('[data-container="' + dataTrigger + '"]');
        elem.toggle();
    }
}

$('a[data-trigger]').on('click', function (e) {
    e.preventDefault();
    collapseRows(this);
});

var toggleRow = function (that) {
    var triggerValue = $(that).data('trigger-row');

    if ($('table[data-row="' + triggerValue + '" ]').length) {
        var row = $('[data-row="' + triggerValue + '"]');
        row.toggle();
        $(that).find('i').toggleClass('glyphicon-ok'); //Oculta el ícono
    }
}

$('a[data-trigger-row]').on('click', function (e) {
    e.preventDefault();
    toggleRow(this);
});


// Nivel 1 Headers
var numHeaderDos = singleHeaderDos.length;
console.log('Num Headers Nivel 1: ' + numHeaderDos);

// Nivel 2 Headers
var numHeaderNivelDos = headerNivelDos.length;
console.log('Num Headers Nivel 2: ' + numHeaderNivelDos);

// Nivel 3 Headers
var numHeaderNivelTres = headerNivelTres.length;
console.log('Num Headers Nivel 3: ' + numHeaderNivelTres);


var tablesRightContainerDos = $('.tables-right-container-dos');

var HeaderContainerWidthDos = (numHeaderDos * headerNivelUnoWidth) + scrollBarWidth + 'px';
//alert(HeaderContainerWidthDos);

var...