https://github.com/runkids/vue-column-sortable
:arrows_clockwise: vue-column-sortable is an data sortable directive for vue.js.
https://github.com/runkids/vue-column-sortable
column-sorting orderby sort sortable sortable-helper table-sorting vue vue-directive
Last synced: 12 days ago
JSON representation
:arrows_clockwise: vue-column-sortable is an data sortable directive for vue.js.
- Host: GitHub
- URL: https://github.com/runkids/vue-column-sortable
- Owner: runkids
- License: mit
- Created: 2018-10-04T13:20:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-10T20:04:57.000Z (over 4 years ago)
- Last Synced: 2025-10-09T14:12:04.821Z (5 months ago)
- Topics: column-sorting, orderby, sort, sortable, sortable-helper, table-sorting, vue, vue-directive
- Language: JavaScript
- Homepage: https://github.com/runkids/vue-column-sortable
- Size: 136 KB
- Stars: 9
- Watchers: 0
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-column-sortable
[](https://vuejs.org/) [](https://www.npmjs.com/package/vue-column-sortable)
vue-column-sortable is an data sortable directive for vue.js.
### Demo
[](https://codesandbox.io/s/jvj47rxz33?module=%2Fsrc%2FApp.vue)
### Install
- In ES2015
```Bash
npm install vue-column-sortable --save
```
```JavaScript
//globally
import columnSortable from 'vue-column-sortable'
Vue.use(columnSortable)
//for a single instance
import columnSortable from 'vue-column-sortable'
new Vue({
directives: {columnSortable}
})
```
- Direct include
```html
```
### Usage
- Step 1
- Use v-column-sortable:{ data key } in HTML
```html
Name
Age
.
.
```
- Step 2
- copy method: orderBy
```javascript
new Vue({
el: '#app',
data: {
userArray: [
{ name: 'John', age: 20 },
{ name: 'Peter', age: 22 },
]
},
directives: {columnSortable},
methods:{
orderBy(sortFn) {
// sort your array data like this.userArray
this.userArray.sort(sortFn);
},
}
})
```
#### Options
###### showIcon
Default `true`
Show sort icon with `fortawesome` svg
```javascript
Vue.use(columnSortable, {
showIcon: false,
});
```
### Code Example
```html
#
Name
Date of Birth
Point
Country
City
{{ index+1 }}
{{ d.name }}
{{ d.birthday }}
{{ d.point }}
{{ d.address.country }}
{{ d.address.city }}
```
```javascript
import columnSortable from 'vue-column-sortable'
export default {
data() {
return {
dataArray: [
{
name: 'Jimmy Rutherford',
birthday: '1945-5-6',
point: 100,
address: {
country: 'United States of America',
city: 'South Ryann',
},
},
{
name: 'Camila Gutmann',
birthday: '1950-11-16',
point: 230,
address: {
country: 'Taiwan',
city: 'Lake Destinview',
},
},
],
};
},
methods: {
orderBy(fn) {
this.dataArray.sort(fn);
},
},
directives: {
columnSortable,
},
};
```
### License
MIT