Sort columns table with sortable.js

Question

How to sort columns table with sortable.js library? https://sortablejs.github.io/Sortable/

I set sortable_container(sortable_emploees id) on tr attribute. And that's works fine. But how to sort at the same time td in tbody?

Please see gif. Tbody is not sortable. How to create table to drag and drop thead cell and tbody cell. Or how to set sortable.js to do that for me?

Check example code:

        const el = document.getElementById('sortable_employees');
        const sortable = new Sortable(el, {
            animation: 150,
            ghostClass: 'bg-blue-200',
        });

https://jsfiddle.net/mateuszbialowas/ds5bfj7v/27/

Answer 1

You can try this div aproach.

<div class="table" id="draggableDivTable">
  <div class="column">
    <div class="columnHeader">column 0</div>
    <div class="columnCell"> c0 r0</div>
    <div class="columnCell"> c0 r1</div>
    <div class="columnCell"> c0 r2 </div>
    <div class="columnCell"> c0 r3 </div>
    <div class="columnCell"> c0 r4 </div>
    <div class="columnCell"> c0 r5 </div>
  </div>
  <div class="column">
    <div class="columnHeader">column 1</div>
    <div class="columnCell"> c1 r0</div>
    <div class="columnCell"> c1 r1</div>
    <div class="columnCell"> c1 r2 </div>
    <div class="columnCell"> c1 r3 </div>
    <div class="columnCell"> c1 r4 </div>
    <div class="columnCell"> c1 r5 </div>
  </div>
  <div class="column">
    <div class="columnHeader">column 2</div>
    <div class="columnCell"> c2 r0</div>
    <div class="columnCell"> c2 r1</div>
    <div class="columnCell"> c2 r2 </div>
    <div class="columnCell"> c2 r3 </div>
    <div class="columnCell"> c2 r4 </div>
    <div class="columnCell"> c2 r5 </div>
  </div>
</div>

Sortable.create(document.getElementById('draggableDivTable'), {
    sort: true,
    handle: '.columnHeader',
    animation: 150
});

https://codepen.io/jlapinski/pen/ZXYERN