[tables] Draggable table rows

[ArvidDeJong]

Sorting Table Rows with SortableJS

Currently, I am using SortableJS to handle sorting of table rows in my project. SortableJS is a powerful and flexible JavaScript library that integrates easily, but it would be great if this functionality were built into Flux by default.

Having this feature natively available in Flux would streamline the implementation process and reduce the need for external libraries.

[ArvidDeJong]

Just an example of how i sort now

Schermopname.2024-10-01.om.17.01.37.mov

[colinmac17]

FWIW, this is what I'm doing now with Sortable JS and it works really well:

 @script
    <script>
        new window.sortable.create(document.getElementById('video-sortable'), {
            handle: '.handle', // handle's class
            animation: 150,
            onUpdate: function (event) {
                // Get all rows in the table
                const rows = event.target.getElementsByTagName('tr');

                // Convert to array and map through to get datasets
                const items = Array.from(rows).map(row => {
                    // If you need specific data attributes:
                    return {
                        id: row.dataset.videoId,
                    };
                });
                
                // If you need the new order with specific attributes:
                const newOrder = items.map(item => item.id); // Gets array of just IDs

                // Call wire method to update order
                $wire.updateVideoOrder(newOrder);
            },
        });
    </script>
    @endscript

//livewire
 public function updateVideoOrder(array $videoIds): void
    {
        foreach($videoIds as $index => $videoId){
            ProfileVideo::query()
                ->where('id', $videoId)
                ->update(['order_rank' => $index + 1]);
        }
    }

[igmltd]

Just to add, Alpine has a sort wrapper with a clean api

https://alpinejs.dev/plugins/sort

[colinmac17]

Ah thank you! Even better

[ArvidDeJong]

Thanks, i will use this one for now, but it would still be nice if the comes a shipped option :draggable in tables :)

<flux:rows :draggable>

[Hesesses]

Would be awesome to have sortable supported for tables and nav items 🚀