vue-table-sorter

Vue table sorter component

Vue.js component for table sorting

Demo

Installation

npm install vue-table-sorter@^1 

Usage

This is an example with Bootstrap css

<template>
    <table class="table table-bordered table-hover">
        <table-header sort-order="name" sort-by="desc" @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';

    export default {
        data() {
            return {
                items: [],
                params: {}
            }
        },
        components: {
            TableHeader,
            ThColumn
        },
        methods: {
            onSort(params) {
                console.log({params});
                this.params = params;

                //todo make ajax call to api and update items
            }
        }
    }
</script>

Install in non-module environments (without webpack)

<!-- Vue js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<!-- Lastly add this package -->
<script src="https://cdn.jsdelivr.net/npm/vue-table-sorter@1"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-table-sorter@1/dist/vue-table-sorter.css" rel="stylesheet">
<!-- Init the components -->
<script>
    Vue.component('table-header', VueTableSorter.TableHeaderComponent);
    Vue.component('th-column', VueTableSorter.TableHeaderColumn);
</script>

Browser support

• Modern browsers only

Run examples on your localhost

• Clone this repo
• Make sure you have node-js >=16.9 and pnpm >=6.32 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.
• Tests can be found in __test__ folder.
• Execute tests with this command npm test

License

MIT License