JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div class="container">
<h1>Grid with Fixed and Resizable Columns</h1>

<div class="grid-header-outer">
<div class="grid-header-inner">
<div class="grid">
  <div class="item">
    <div class="fixed-cell first">
      Select All
    </div>
    <div class="resizable">
      resizable
    </div>
    <div class="flexible">
      flexible
    </div>
    <div class="fixed-cell last">
      20 of 134 items
    </div>
  </div>
</div>
</div>
</div>
  
<div class="grid-container-outer">
<div class="grid-container-inner">
<div class="grid">

  <div class="item bordered">
    <div class="fixed-cell first">
      fixed-cell first
    </div>
    <div class="resizable">
      resizable resizable resizable resizable resizable resizable resizable resizable resizable 
    </div>
    <div class="flexible">
      grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow
    </div>
    <div class="fixed-cell last">
      fixed-cell last
    </div>
  </div>

  <div class="item bordered">
    <div class="fixed-cell first">
      fixed-cell first
    </div>
          <div class="resizable">
            resizable resizable resizable resizable resizable resizable resizable resizable resizable 
          </div>
          <div class="flexible">
            grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow
          </div>
    <div class="fixed-cell last">
      fixed-cell last
    </div>
  </div>

  <div class="item bordered">
    <div class="fixed-cell first">
      fixed-cell first
    </div>
          <div class="resizable">
            resizable resizable resizable resizable resizable resizable resizable resizable resizable 
          </div>
          <div class="flexible">
            grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow grow...

CSS

.container
{
  height: 100%;
}
.grid-header-outer
{
  overflow: hidden;
  height: 25px;
  background-color: #666;
  color: #fff;
}
.grid-header-inner
{
  overflow: hidden;
  height: 100%;
}
.grid-header-inner .item
{
  line-height: 25px;
}
.grid-header-inner .first, .grid-header-inner .last,
.grid-header-inner .resizable, .grid-header-inner .flexible
{
  background-color: #666;
}


.grid-container-outer
{
  overflow: hidden;
  height: 210px;
}
.grid-container-inner
{
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100% - 5px);
}
.grid
{
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0px;
}
.item
{
  display: table-row;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.item>div
{
  display: table-cell;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item.bordered>div
{
  border-top: 1px #999 solid;
  border-bottom: 1px #999 solid;
}
.item.bordered>div:first-child
{
  border-left: 1px #999 solid;
}
.item.bordered>div:last-child
{
  border-right: 1px #999 solid;
}
.item.bordered:hover>div
{
  border-top: 1px #333 solid;
  border-bottom: 1px #333 solid;
}
.item.bordered:hover>div:first-child
{
  border-left: 1px #333 solid;
}
.item.bordered:hover>div:last-child
{
  border-right: 1px #333 solid;
}

.fixed-cell
{
  width: 100px;
  background-color: #e0ffee;
}

.first
{
}
.flexible
{
  width: auto;
}
.last
{
}
.resizable
{
  width: 150px;
  background-color: #eee;
}

.ui-resizable-s
{
  height: 5px;
  bottom: 0;
  background-color: #999;
  border-bottom: #ccc solid 2px;
}
.ui-resizable-handle-hover, .ui-resizable-handle:hover
{
  background-color: #aaa;
  border-color-bottom: #ddd;
}

.content
{
  width: 100%;
  background-color: #e0eeff;
  height: 200px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll
}

JavaScript

$(".grid .resizable").resizable({
      maxHeight: 40,
      maxWidth: 450,
      minHeight: 40,
      minWidth: 80,
      handles: 'e',
      alsoResize: '.grid .resizable',
      stop: function(event, ui) {
        console.log('stop resize:',event, ui);
        console.log('New size: ', ui.size.width);
        $(".grid .ui-resizable-handle").removeClass('ui-resizable-handle-hover');
      }
    });
$(".grid .ui-resizable-handle").hover(function(e) {
  $('.grid .ui-resizable-handle').addClass('ui-resizable-handle-hover');
},function(e) {
  // remove the class if we aren't resizing
  if (!$(this).parent().hasClass('ui-resizable-resizing'))
    $('.grid .ui-resizable-handle').removeClass('ui-resizable-handle-hover');
})
var origContentHeight = null;
$(".grid-container-outer").resizable({
      maxHeight: 300,
      minHeight: 100,
      handles: 's',
      start: function(event, ui) {
        origContentHeight = $(".content").height();
      },
      resize: function(event, ui) {
        console.log('Resize: ', ui.originalSize.height, ui.size.height);
        var diff = 0;
        if (ui.originalSize.height > ui.size.height)
          diff = ui.originalSize.height - ui.size.height;
        else
          diff = -(ui.size.height - ui.originalSize.height);
        console.log($(".content").height());
        console.log(diff);
        $(".content").height(origContentHeight+diff);
      }
    });