Vue table sorter component

Vue.js component for table sorting

Demo

Version matrix

| Vue.js version | Package version | Branch | | :--- |:---------------:|--------------------------------------------------------------:| | 2.x | 1.x | 1.x | | 3.x | 2.x | main |

Installation

npm install vue-table-sorter@^2 

Usage

This is an example with Bootstrap CSS and axios

<template>
    <table class="table table-bordered table-hover">
        <table-header :sort-order="params.sortOrder" :sort-by="params.sortBy" @sort="onSort">
            <th-column column="name">Name</th-column>
            <th-column column="email">Email</th-column>
            <th-column column="joined_at">Joined</th-column>
            <th-column class="text-center">Actions</th-column>
        </table-header>
        <tbody>
        <tr v-for="item in items" :key="item.index">
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.joined_at }}</td>
            <td class="text-center">
                <button class="btn btn-sm btn-outline-danger">Trash</button>
            </td>
        </tr>
        </tbody>
    </table>
</template>

<script>
    import 'bootstrap/dist/css/bootstrap.min.css';
    import {TableHeader, TableHeaderColumn as ThColumn} from 'vue-table-sorter';
    import 'vue-table-sorter/dist/vue-table-sorter.css';
    import axios from 'axios';

    export default {
        data() {
            return {
                items: [],
                params: {
                    sortOrder: 'desc',
                    sortBy: 'name',
                },
            }
        },
        components: {
            TableHeader,
            ThColumn
        },
        methods: {
            onSort(params) {
                console.log({params});
                this.params = params;
                this.fetch();
            },
            async fetch() {
                const response = await axios.get('https://localhost/api/items', {
                    params: this.params
                })
                this.items = response.data;
            }
        }
    }
</script>

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-table-sorter@2"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-table-sorter@2/dist/vue-table-sorter.css" rel="stylesheet">
<!-- Init the components -->
<script>
    const app = Vue.createApp({});
    app.component('table-header', VueTableSorter.TableHeaderComponent);
    app.component('th-column', VueTableSorter.TableHeaderColumn);
</script>

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=18.12 and pnpm >=7.12 pre-installed
• Install dependencies pnpm install
• Run webpack dev server npm start
• This should open the demo page in your default web browser

Testing

• This package is using Jest and vue-test-utils for testing.
• Execute tests with this command npm test

License

MIT License