JSFiddle - React, Tailwind, and code Playground

by Michael Coomey

HTML

<table class="co_documentReportTable co_detailsTable">
   <thead>
      <tr>
         <th class="yearSelectArea previous">
         </th>
         <th class="mdFilingCompanyName sortable">
            <div class="th-inner" style="width: 174.77777767181396px;">
               <div class="co_dropDownMenu">
                  <div class="co_dropDownButton">
                     <a href="javascript:void(0);">Filed by Co. Name</a>
                  </div>
               </div>
               <a id="previousArrow" href="javascript:void(0)" data-direction="previous" class="yearArrow co_prev co_disabled">Previous</a>
               <a id="nextArrow" href="javascript:void(0)" data-direction="next" class="yearArrow co_next co_disabled">Next</a>
            </div>
         </th>
         <th class="mdSubjectCompanyName sortable">
            <div class="th-inner" style="width: 174.77777767181396px;">
               <div class="co_dropDownMenu">
                  <div class="co_dropDownButton">
                     <a href="javascript:void(0);">Subject Co. Name</a>
                  </div>                
               </div>
            </div>
         </th>
         <th class="mdFilingPeriod co_hideState sortable" style="">
            <div class="th-inner" style="width: 0px;">
               <div class="co_dropDownMenu">
                  <div class="co_dropDownButton">
                     <a href="javascript:void(0);">File Period</a>
                  </div>               
               </div>
            </div>
         </th>
         <th class="mdFileDateTime sortable">
            <div class="th-inner" style="width: 175.77777767181396px;">
               <div class="co_dropDownMenu">
                  <div class="co_dropDownButton">
                     <a href="javascript:void(0);">File Date</a>
                  </div>
               </div>
            </div>
         </th>
         <th class="mdNormalizedFormtype sortable">
            <div class="th-inner"...

JavaScript

this.$('.reportTableBody').sortable({				
				tolerance:"pointer",
				cursor: 'move',
				//revert: 'true',
				helper: function(e, tr)
				{
				 	var myHelper = [];
			        myHelper.push('<table style="width: 100%">');
			        myHelper.push($(tr).html());
			        myHelper.push('</table>');			        
			        return myHelper.join('');					
				},
			    start: function(event, ui){
			        $(".ui-sortable-placeholder").css({width: $(ui.item).width()});    
			    },
//				start: function(event, ui){
//					ui.placeholder.width(ui.item.width()).height(ui.item.height());    
//				},
				/*helper: function(e, tr)
				{
					tr.children().each(function() {
						$(this).width($(this).width());
					});
					return tr;
					
					$("td").each(function () {
				            $(this).css("width", $(this).width());
				    });	
					var $originals = tr.children();
					var $helper = tr.clone();					
//					$(tr.parent()).find('tr').each(function(index){
//						$('td', this).each(function(index){
//							$(this).css('width', $helper.eq(index).width());
//						});
//					});
					$helper.children().each(function(index)
					{
						// Set helper cell sizes to match the original sizes
						$(this).width($originals.eq(index).width());
					});
					return $helper;
				},		*/		
				stop : function(event, ui){					
					$(ui.item.parent()).find('tr').each(function(index){
						$(this).find('.yearSelectCell:first').html(index + 1);

					});					
					ui.item.trigger('drop', ui.item.index());					
				}});