JSFiddle - React, Tailwind, and code Playground

Sheet view With Sidebar

by DugSohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="modal ybx-proto-modal" tabindex="-1" role="dialog" style="display:block;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
      <div class="modal-body">
        <div class="text-center">
        <h2>Introducing Column View Options</h2>
        <p>Simply click a Colum header to Open your Column Filter menu. Then Click Column View Options to set colors or icons.</p>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <h4>Colors</h4>
            <p>Quickly ddjust column colors.</p>
          </div>
          <div class="col-xs-4">
            <h4>Icons</h4>
            <p>Change select list icons.</p>
          </div>
          <div class="col-xs-4">
            <h4>..</h4>
            <p>Change colors based on select list values.</p>
          </div>
        </div>
        
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-secondary ybx-proto-modal-close" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
Global NavBar...

CSS

html,
body,
.row {
  height: 100%;
}

.navList li .fa-heart {
  visibility: hidden;
}

.navList li:hover .fa-heart {
  visibility: visible;
}
.navList li .btn-xs {
  visibility: hidden;
}

.navList li:hover .btn-xs {
  visibility: visible;
}

body {
  padding-top: 50px;
}

.dropdown-menu {
  width: 240px;
}

.navbar-brand {
  color: white !important;
}

.dataTables_wrapper {
  opacity: .3;
}

.dropdown-menu li .fa-heart {
  margin-left: -5px;
}

.views .dropdown-menu li:not(.new-view) .btn,
.dropdown-menu li .fa-heart {
  visibility: hidden
}

.dropdown-menu li.default .fa-heart {
  margin-left: -5px;
  visibility: visible
}

.views .dropdown-menu li:hover .fa-heart,
.views .dropdown-menu li:hover .btn {
  visibility: visible;
}

#collapsePanel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%
}

.input-group {
  flex: 1 0 50px;
  padding: 10px;
}

.filters {
  overflow: scroll;
  flex: 1 100% 0;
}

.btn-default .badge {
  background-color: #337ab7;
}

.dropdown .dropdown-menu {
  position: static;
}

.dropdown.open ul.dropdown-menu {
  float: none;
  border: none;
  box-shadow: none;
  background: transparent;
  border-left: 8px solid #eee
}

#collapsePanel {
  background: #fafafa;
  padding-right: 0
}

li {
  border-bottom: 1px solid #ececec;
}

.dropdown-menu > li > a {
  display: block;
  padding: 8px 13px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #337ab7;
  white-space: nowrap;
}

.sidr {
  display: block;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  width: 260px;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 2px 2px 15px #ccc;
}

.sidr .sidr-inner {
  padding: 0 0 15px
}

.sidr .sidr-inner>p {
  margin-left: 15px;
  margin-right: 15px
}

.sidr.right {
  left: auto;
  right: -260px
}

.sidr.left {
  left: -260px;
  right: auto
}

.filterCrumb .fa {
  font-size: 8px;
  margin-left: 4px;
  margin-right: 4px;
  font-size: 10px;
}

.label-as-badge {
 ...

JavaScript

$('#collapsePanelBtn').sidr({
     name: 'collapsePanel',
     side: 'left'
   });

   (function($) {
     $('#addFilter').on('click', function(e) {
       e.stopPropagation();
     });
   })(jQuery);

   $('#addFilter').click(function() {
     $(this).hide();
     $(this).next().show();
   });

   $('#newView').click(function() {
     $('#addFilter').show();
     $('#addNewViewGroup').hide();
   });

   $('#otherViews').click(function(e) {
     e.stopPropagation();
     $('.moreviews').show();
     $('.myViews').hide();

   });

   $('#showMyViews').click(function(e) {
     e.stopPropagation();
     $('.moreviews').hide();
     $('.myViews').show();
     $(".sidr").animate({
       scrollTop: 0
     }, "fast");
   });

   $('#ta_filter').keyup(function() {
     var valThis = this.value.toLowerCase(),
       lenght = this.value.length;

     $('.sidr .nav>li>a>span').each(function() {
       var text = $(this).text(),
         textL = text.toLowerCase(),
         htmlR = '<b>' + text.substr(0, lenght) + '</b>' + text.substr(lenght);
       if (textL.indexOf(valThis) == 0) {
         $(this).html(htmlR).closest('li').show();
       } else {
         $(this).closest('li').hide();
       }
     });

   });

   $(".choose_filter").click(function() {
     var text = $(this).find('span').text();
     $('.filter_name ').html(text);
     $(".single_filter").show("slide", {
       direction: "right"
     }, 500);
     //$(".filters").hide("slide", { direction: "left" }, 500);
     $('.filters').animate({
       left: "-265px"
     }, 500);
   });

   $(".choose_view").click(function() {
     $(".viewList").show("slide", {
       direction: "right"
     }, 500);
     $('.filters').animate({
       left: "-265px"
     }, 500);
   });
   
   $(".choose_date_filter").click(function() {
     var text = $(this).find('span').text();
     $('.filter_name ').html(text);
     $(".single_date_filter").show("slide", {
       direction: "right"
     }, 500);
    ...