JSFiddle - React, Tailwind, and code Playground

by adviner

HTML

<div class="scrollContainer" style="">

	
    <table class="resizable scrollTable" style="" order="0" cellpadding="0" cellspacing="0" width="100%">
	
        <caption>Data Table with resizable columns</caption>
		
		
        <colgroup>
            <col style="width: 200px"/>
            <col style="width: 240px"/>
            <col style="width: 616px"/>
        </colgroup>
		
        <thead class="fixedHeader">
            <tr class="colHeaders">
                <th class="ui-resizable" style="">
                    <span class="columnLabel"  style="padding: 0 10px;">Column 1</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e">&nbsp;</div>
                </th>
                <th class="ui-resizable" style="">
                    <span class="columnLabel"  style="padding: 0 10px;">Column 2</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e">&nbsp;</div>
                </th>
                <th class="ui-resizable" style="">
                    <span class="columnLabel"  style="padding: 0 10px;">Column 3</span>
                    <div class="resizeHelper ui-resizable-handle ui-resizable-e">&nbsp;</div>
                </th>
            </tr>
        </thead>
		
		
        <tbody class="scrollContent">
			<tr>
				<td>Cell Content 1</td>
				<td>Cell Content 2</td>
				<td>Cell Content 3</td>
			</tr>
			<tr>
				<td>More Cell Content 1</td>
				<td>More Cell Content 2</td>
				<td>More Cell Content 3</td>
			</tr>
			<tr>
				<td>Even More Cell Content 1</td>
				<td>Even More Cell Content 2</td>
				<td>Even More Cell Content 3</td>
			</tr>
			<tr>
				<td>And Repeat 1</td>
				<td>And Repeat 2</td>
				<td>And Repeat 3</td>
			</tr>
			<tr>
				<td>Cell Content 1</td>
				<td>Cell Content 2</td>
				<td>Cell Content 3</td>
			</tr>
			<tr>
				<td>More Cell Content 1</td>
				<td>More Cell Content 2</td>
				<td>More Cell Content 3</td>
			</tr>
			<tr>
				<td>Even More Cell Content...

CSS

body 
{

	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
	
}


table 
{
    table-layout: fixed;
    width: 0;
}


th 
{
    position: relative;
}

th.last 
{
    border-right: none;
}

th, 
td 
{
    padding: 2px 5px;
    text-align: left;
    overflow: hidden;
}

tbody.scrollContent 
{
	 display: block; 
	
	height: 262px;
	overflow: auto;
	width: 756px;
}

	
tbody.scrollContent td, 
tbody.scrollContent tr.normalRow td 
{
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td 
{
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

	


thead.fixedHeader tr 
{
}
	
thead.fixedHeader th
{
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
	position: relative;
}	
	
thead.fixedHeader th 
{
	width: 200px
}
thead.fixedHeader th + th 
{
	width: 240px
}
thead.fixedHeader th + th + th 
{
	width: 616px
}
	
tbody.scrollContent td 
{
	width: 200px
}
tbody.scrollContent td + td 
{
	width: 240px
}
tbody.scrollContent td + td + td 
{
	width: 300px
}
div.scrollContainer 
{
	clear: both;
	border: solid 1px #963;
	height: 285px;
	width: 756px;
	overflow: hidden;
}

.resizeHelper,
.ui-resizable-e 
{


	
	cursor: e-resize;
	width: 10px;
	height: 100%;
	top: 0;
	right: -8px;
	position: absolute;
	z-index: 100;
	font-size: 100%;	
}

@-moz-document url-prefix() 
{
	.resizeHelper,
	.ui-resizable-e 
	{
		position: relative;
		float: right;
	}
}

JavaScript

$.widget("resizableColumns", {

	_create: function() {
		this._initResizable();
	},

	_initResizable: function() {

		var colElement, colWidth, originalSize;
		var table = this.element;
		var columnIndex = 0;

		this.element.find("th").resizable({
			handles: 
			{
				"e": " .resizeHelper"
			},

			minWidth: 10,
			
			create: function(event, ui) 
			{
				var minWidth = $(this).find(".columnLabel").width();
				if (minWidth) {
					
					minWidth += $(this).find(".ui-resizable-e").width();
					
					$(this).resizable("option", "minWidth", minWidth);
				}
			},
			
			stop: function(event, ui)
			{
			},

					
			start: function(event, ui) 
			{
				var colIndex = ui.helper.index() + 1;
				columnIndex = colIndex;
				colElement = table.find("colgroup > col:nth-child(" + colIndex + ")");
				colWidth = parseInt(colElement.get(0).style.width, 10); 
				originalSize = ui.size.width;
			},

			resize: function(event, ui) 
			{
				var resizeDelta = ui.size.width - originalSize;

				var newColWidth = colWidth + resizeDelta;
				colElement.width(newColWidth);
				
				console.log('column=> ' + columnIndex);
				console.log('newColWidth=> ' + newColWidth);
				
				var osWidth = $(colElement).outerWidth();
				console.log('offsetWidth=> ' + osWidth);
				$('table.resizable tbody.scrollContent td:nth-child(' + columnIndex + ')').width(osWidth);

				$(this).css("height", "auto");
			}
		});
	}

});