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" class="divider"></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">Headers <span class="caret"></span>

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

CSS

.filtros-tablas {
    padding: 1em 0;
}
.filtro-item {
    float: left;
    margin-right: 15px;
}
table {
    border-spacing: 0;
}
.tabla-data {
    position: relative;
    width: 1024px;
    height: 350px;
}
.tabla-data table {
    margin: 0;
}
.left-tabla {
    height: 350px;
    position: absolute;
    width: 320px;
}
.header-tabla {
    height: 48px;
    line-height: 48px;
    background: #F0F4F9;
}
.tablas-item-container table {
    width: 100%;
}
.tablas-list-left {
    height: 302px;
    overflow: hidden;
    overflow-x: scroll;
}
.tablas-list-left table {
    width: 100%;
}
.tablas-list-left .table-border {
    border-top: 1px solid #c3c3c3;
}
.tablas-list-left .table-border:first-child {
    border-top: none;
}
.cat-item, .cat {
    height: 48px;
}
.cat-item {
    background: #e3e3e3;
    padding-left: 15px;
}
.cat {
    background: #c3c3c3;
}
.cat-name {
    padding-left: 15px;
}
.cat-name i {
    margin-right: 10px;
}
.right-tabla {
    height: 350px;
    position: absolute;
    width: 704px;
    left: 320px;
    overflow: hidden;
}
.right-tabla .visor-header {
    width: 702px;
    overflow: hidden;
}
.column-header {
    background: #F0F4F9;
    border-left: 1px solid #878EA2;
    height: 48px;
    width: 120px;
    float: left;
    line-height: 48px;
}
.column-header:first-child {
    border-left: none;
}
.header-inner {
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.tablas-list-right {
    width: 704px;
    clear: both;
}
.tablas-list-right .table-border:first-child {
    border-top: none;
}
.tablas-list-right .tr-hidden {
    background: #c3c3c3;
    border-left: 1px solid #fff;
}
.tablas-list-right .title-hidden {
    height: 48px;
    visibility: hidden;
}
.tablas-list-right .tables-right-container .fullwidth {
    width: 100%;
}
.tablas-list-right .right-visor {
    height: 302px;
    width: 702px;
    overflow: auto;
}
/* line 2019,...

JavaScript

/* Tabla large cálculos */

var headerWidth = 120;
var singleHeader = $(".header-container .column-header");
var scrollBarWidth = 19;
var HeaderContainer = $('.tabla-data .header-container');
var numHeader = $(".header-container .column-header").length;
var tablesRightContainer = $('.tables-right-container');
var HeaderContainerWidth = (numHeader * headerWidth) + scrollBarWidth + 'px';
var RightContainerWidth = (numHeader * headerWidth) + 'px';

//Seteamos el ancho mínimo
HeaderContainer.css('width', HeaderContainerWidth);
tablesRightContainer.css('width', RightContainerWidth);

//scroll
$('.right-visor').on('scroll', function () {
    $('.tablas-list-left').scrollTop($(this).scrollTop());
    $(".visor-header").scrollLeft($(this).scrollLeft());
});

/* Función Mostrar Tablas */

$.fn.ocultar_filas = function (e) {
    alert('click');
    e.preventDefault();

    var dataTrigger = $(this).attr('data-trigger');
    alert(dataTrigger);
    console.log(dataTrigger);
    $(this).find('i').toggleClass('fa-plus-square fa-minus-square'); //Cambia el icono

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


//Click que oculta/muestra las tablas asociadas (REGIÓN)
$('a.trigger').on('click', function (e) {
    e.preventDefault();
    var dataTrigger = $(this).attr('data-trigger');
    $(this).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();
    }
});

//Ocultar Rows filas (tablas)

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

    if ($('table[data-row="' + triggerValue + '" ]').length) {
        var row = $('[data-row="' + triggerValue + '"]');
        row.toggle();
       ...