vue-table-sorter

    1.0.0 • Public • Published

    Vue table sorter component

    downloads npm-version github-tag build license

    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

    Keywords

    Install

    npm i vue-table-sorter

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    26.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • ankurk91