Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/galenyuan/vue-datatable
[DEPRECATED] Datatable component for Vuejs
https://github.com/galenyuan/vue-datatable
Last synced: 2 months ago
JSON representation
[DEPRECATED] Datatable component for Vuejs
- Host: GitHub
- URL: https://github.com/galenyuan/vue-datatable
- Owner: galenyuan
- License: mit
- Archived: true
- Created: 2016-08-20T13:41:47.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-30T06:07:51.000Z (about 8 years ago)
- Last Synced: 2024-10-28T00:40:31.626Z (3 months ago)
- Language: Vue
- Homepage:
- Size: 170 KB
- Stars: 120
- Watchers: 9
- Forks: 36
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-datatable - datatable?style=social) - 使用Vuejs创建的DataTableView (UI组件)
- awesome-github-vue - vue-datatable - 使用Vuejs创建的DataTableView (UI组件)
- awesome-github-vue - vue-datatable - 使用Vuejs创建的DataTableView (UI组件)
- awesome - vue-datatable - 使用Vuejs创建的DataTableView (UI组件)
README
# vue-datatable
> A datatable component build with Vuejs.
> You can try it [Online](https://galenyuan.github.io/vue-datatable/), it's Vue version [DataTables](https://github.com/DataTables/DataTables)
##Usage
```bash
npm install --save vue-datatable
```
Vue-loader and Babel is required(maybe will release ES5 and JavaScript file later :P)
```javascript
import DataTable from 'vue-datatable';
export default {
data() {
return {
tableData: {
options: {
// Global sort option
sortable: true,
// Global edit option
editable: true,
// How many items will be shown in each page
pageCount: 10,
// Callback of change page
onPageChanged(page) {
console.log(page);
}
},
columns: [
{
value: 'id',
text: 'ID',
// If this column is sortable
sortable: true,
// If this column is editable
editable: false,
// Render this column as HTML or not
isHTML: false,
// Render this column as button array or not
isButton: false
},
{
value: 'html',
text: 'HTML',
sortable: false,
editable: false,
isHTML: true,
isButton: false
},
{
value: 'button',
text: 'Button',
sortable: false,
editable: false,
isHTML: false,
isButton: true
}
],
rows: [
{
id: {
value: 1,
// If this field is editable
editable: false
},
html: {
value: ''GitHub
},
button: {
value: [
// Text of this button
text: 'Button',
// Classes of this button
class: ['button'],
// Click function, 3 arguments: event, column text and current field object
func: function(event, column, field) {
}
]
}
}
]
}
}
},
components: {
DataTable
}
}
```