Знакомство с сортируемой таблицей Vue

Чтобы реализовать сортируемую таблицу, это немного сложно, у вас могут быть или не быть все ресурсы для достижения этого, в дополнение к этому у этих компонентов много проблем со стилем.

В прошлом я сталкивался с несколькими проблемами с sortable-table и нашел решение для их решения.

VueSortableTable — это компонент Vue 3, который использует Sortable для выполнения задачи. Вы можете очень легко подключить VueSortableTable к своему проекту и начать работу.

Подробная документация:
https://github.com/shashikant-wagh/vue-sortable-table

Установка:
npm install vue-sortable-table

Использование:
import VueSortableTable from 'vue-sortable-table'

Пример:

<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>

Пожалуйста, не забудьте проверить VueDatatableEle и проверить его в своем следующем проекте, а также оставить комментарий о своем опыте.