JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div id="columnManager" class="ui-widget ui-widget-content ui-corner-all">
			<div id="cmHeader" class="ui-widget-header ui-corner-all">Gestion des colonnes</div>
			
			<div id="cmContent" >
				<table id="columnsTable" width="100%">
					<tr><td><input type="checkbox" /></td><td>Colonne1</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne2</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne3</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne4</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne5</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne6</td></tr>
					<tr><td><input type="checkbox" /></td><td>Colonne7</td></tr>
				</table>
			</div>
			
			<div id="cmFooter" >
				<table width="100%"><tr>
					<td><button class="cmFooterButton roFooterButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
							<span class="ui-button-text">Valider</span>
						</button></td>
					<td><button class="cmFooterButton roFooterButton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
							<span class="ui-button-text">Annuler</span>
						</button></td>
				</tr></table>
			</div>
		</div>

CSS

#columnManager {
			width:300px;
			height:225px;
			padding:4px;
			text-align:center;
			position:relative;
			font-size:12px;
		}
		#cmHeader {
			padding:2px;
			margin-bottom:4px;
			font-weight:bold;
			cursor:move;
		}
		#cmFooter {
			text-align:center;
			width:100%;
			position:absolute;
			bottom:0px;
		}
		#cmContent{
			height:160px;
			overflow:auto;
			border:1px solid #DDF;
		}
		#columnsTable{
			width:95%;
			margin:auto;
			border-collapse:collapse;
			border-spacing:0px;
		}
		#columnsTable tbody{width:100%;}
		#columnsTable tr:nth-child(even) {background: #CCC;}
		#columnsTable tr td:nth-child(1) {width:24px;height:24px;}
		#columnsTable tr td:nth-child(2) {text-align:left;}

JavaScript

$(".cmFooterButton").each(function(){
					$(this).hover(
					function(){	//mouseenter
						$(this).addClass("ui-state-hover");
					},
					function(){//mouseout
						$(this).removeClass("ui-state-hover");
					});
				});
				
				$('#columnManager').draggable({ 
					handle: "#cmHeader" 
				});
				
				var fixHelper = function(e, ui) {
					ui.children().each(function() {
					$(this).width($(this).width());
					});
					return ui;
				};
				
				$('#columnsTable tbody').sortable({
					helper: fixHelper
				}).disableSelection();
				
				$("#columnManager").css({"boxShadow":"3px 5px 12px #777"});