https://github.com/smart-table/smart-table-vue
Vuejs binding for smart-table
https://github.com/smart-table/smart-table-vue
data-table grid smart-table table vuejs
Last synced: 5 months ago
JSON representation
Vuejs binding for smart-table
- Host: GitHub
- URL: https://github.com/smart-table/smart-table-vue
- Owner: smart-table
- License: mit
- Created: 2017-03-06T17:50:32.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:55:30.000Z (about 3 years ago)
- Last Synced: 2025-06-27T19:52:59.769Z (8 months ago)
- Topics: data-table, grid, smart-table, table, vuejs
- Language: JavaScript
- Size: 2.3 MB
- Stars: 13
- Watchers: 7
- Forks: 4
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# smart-table-vue
Smart table binding for [Vuejs](https://vuejs.org/). Refer to the [documentation website](https://smart-table.github.io/www/dist/) for more details.
Checkout the [online demo](https://smart-table.github.io/smart-table-vue/example/)
Come as a set of convenient mixins so you can focus on your templates only.
## Getting started
### Installation
Through a package manager you can install the smart-table-vue package
``yarn add smart-table-vue``
or
``npm install --save smart-table-vue``
## Usage
```Javascript
import {sort, table as tableMixin} from 'smart-table-vue';
import {table} from 'smart-table-core';
//use "sort" mixin to add a sortable behavior
Vue.component("SortableHeader", {
mixins: [sort],
template: ``,
data: function() {
return { activeClass: "" };
},
watch: {
stState: function(val) {
const { pointer, direction } = val;
if (pointer === this.stSort) {
this.activeClass = direction === "asc"
? "st-sort-asc"
: direction === "desc" ? "st-sort-desc" : "";
} else {
this.activeClass = "";
}
}
}
});
//use "table" mixin to add a table behavior
Vue.component("PersonTable", {
mixins: [tableMixin],
template: `
Surname
Name
{{item.value.surname}}
{{item.value.name}}
`
});
const persons = table({
data: [
{ surname: "Renard", name: "Laurent" },
{ surname: "Leponge", name: "Bob" }
]
});
//your app
new Vue({
el: "#container",
data: {
smartTable: persons
},
template: ``
});
```
see with [CodePen](https://codepen.io/lorenzofox3/pen/GmEvLO?editors=1010)
## Example
In this repository, you will find a [full example](./example) with pagination, sort, search and "advanced" filters.
run ``npm run build:example`` and serve the index.html file