JSFiddle - React, Tailwind, and code Playground
HTML
<table style='100%' border='1'>
<thead>
<tr>
<th>#</th>
<th>Название</th>
<th>Важность</th>
<th>Сумма</th>
</tr>
</thead>
</table>
<div class="sortable">
<table style='100%' border='1'>
<thead>
<tr bgcolor='blue'>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
<td>1.1</td>
</tr>
<tr>
<td>1.2</td>
<td>1.2</td>
<td>1.2</td>
<td>1.2</td>
</tr>
<tr>
<td>1.3</td>
<td>1.3</td>
<td>1.3</td>
<td>1.3</td>
</tr>
</tbody>
</table>
<table style='100%' border='1'>
<thead>
<tr bgcolor='blue'>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</thead>
<tbody>
<tr>
<td>2.1</td>
<td>2.1</td>
<td>2.1</td>
<td>2.1</td>
</tr>
<tr>
<td>2.2</td>
<td>2.2</td>
<td>2.2</td>
<td>2.2</td>
</tr>
<tr>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var fixHelper = function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
};
$('.sortable,.sortable table > tbody').sortable({
axis: 'y',
helper: fixHelper
});