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