Introducing Vue Sortable Table

To implement sortable table its bit tricky you may or may not have all the resources to accomplished that in addition to that there are many time styling issues with these components.

In past I had faced several problems with sortable-table, and came up with a solution to resolve them.

VueSortableTable is Vue 3 component which make use of Sortable to accomplish the task. You can very easily plug in VueSortableTable to your project and get started.

Detailed Documentation:
https://github.com/shashikant-wagh/vue-sortable-table

Installation:
npm install vue-sortable-table

Usage:
import VueSortableTable from 'vue-sortable-table'

Example:

<template>
    <vue-sortable-table
        v-model="records"
        :columns="columns"
        :actions="actions"
        :paginate="paginate"
        :tableClass="'table table-bordered table-responsive'"
        @pageChanged="api.page = $event"
    >
        <template v-slot:table-header>
            <div class="row">
                <div class="col">
                    <h3>Users Table</h3>
                </div>
            </div>
        </template>
        <template v-slot:table-body="{showColumn, showAction}">
            <tr
                v-for="(record, index) in records"
                class="table-row"
            >
                <td
                    v-if="showAction('edit')"
                    class="drag">
                    <a href="">Edit</a>
                </td>
                <td v-if="showAction('delete')">
                    <a href="">Delete</a>
                </td>
                <td
                    v-if="showColumn('Id')"
                    class="text-center"
                >
                    {{ record.id }}
                </td>
                <td v-if="showColumn('First Name')"> 
                    {{ record.first_name }} 
                </td>
                <td v-if="showColumn('Last Name')"> 
                    {{ record.last_name }} 
                </td>
                <td v-if="showColumn('Email')"> 
                    {{ record.email }} 
                </td>
            </tr>
        </template>
    </vue-sortable-table>
</template>
<script>
import VueSortableTable from 'vue-sortable-table';
export default {
    components: {VueSortableTable},
    data() {
        return {
            columns: [
                'Id',
                'First Name',
                'Last Name',
                'Email',
            ],
            actions: {
                'edit': true,
                'delete': true,
            },
            paginate: {
                page: 1,
                limit: 6,
                total: 10,
            },
            records: [{...}, {...}, {...}],
        }
    }
}
</script>

Please don’t forgot to check VueDatatableEle and check it out in your next project and leave comment about your experience.