ratiw / vuetable-2 Goto Github PK
View Code? Open in Web Editor NEWdata table simplify! -- datatable component for Vue 2.x. See documentation at
Home Page: https://vuetable.com
License: MIT License
data table simplify! -- datatable component for Vue 2.x. See documentation at
Home Page: https://vuetable.com
License: MIT License
Hey Rati,
I added
<filter-bar placeholder="Search for brick">
to show correct tip in filter input. It also would be nice to add 'unit' var to <vuetable-pagination-info units="bricks">
so it will show Displaying 0 to 0 of 1352 bricks
I can send you a pull req.
How could would be if we had a group by column?
Something like this:
https://codepen.io/andrewcourtice/pen/VabXQV/
Thank you for your excellent package.
In Vuetable.vue you are declaring Vue:
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
This is fine if you are not already using Vue, however for projects that have already defined Vue it means that it is loaded twice and causes issues if you are hooking in to Vue (with say interceptors) before importing vuetable-2.
I can see that vuetable-1 didn't do this, is there a reason why vuetable-2 does it this way?
Thanks
Using this on a Vue 2.0+ project, I noticed that the this version does not have the item-actions implemented yet in the code. Creating this issue to keep track of implementation.
@ratiw I was just learning vue soon, I would like to put your vuetable as a component applied to my project, feasible?
Hi @ratiw , I have this error, I know that it is because of the data in the transform: function(data)
because the (data)
is only the data.data and not the fully response.
But in the onLoadSuccess (response)
the response is OK. So what I'm missing?
This is more of a vue vs vue2 question, but we are about to start working on a new project; I'm wondering if we should go with vuetable-2 (and vue2) or vuetable?
@ratiw is it your plan for vuetable-2 to supersede vuetable? Would you recommend using vuetable-2 for production (commercial project that has planned life time of 3~5 years)?
Many thanks and keep up the great work.
I think is a good feature to also have the option of pass data through property instead to call an api
Sometimes it seems to make sense to fully load the table data into the client and work from there.
A client-side only filter could be much faster, just like a switch between table pages.
Are there plans to to develop vuetable-2 in this direction?
Or is it already possible to use client-date and client-side filtering and pagination? If so any hints where to start doing this?
Keep getting error
init pretty simple
<template>
<div class="card">
<div class="title">
<h5>Контакты</h5>
</div>
<div class="content">
<div class="table-responsive">
<vuetable v-ref:vuetable
api-url="/contacts"
:fields="columns"
></vuetable>
</div>
</div>
</div>
</template>
<script>
export default{
name: 'Contacts',
data(){
return{
msg:'hello vue',
columns: [
'__checkbox:id',
'name',
'email'
]
}
},
mounted() {
console.log(this.msg);
}
}
</script>
Hi @ratiw ,
Thanks for vuetable-2 👍
I am able to pass checked rows to server to delete them and once it is success, I want to hide the selected rows. It works if I refresh the vuetable by event, but I really don't want to send a request to server again to bring whole data again, rather wanted to hide the deleted rows. Thanks in advance, your support is awesome as always.
[14:30:26] gulp-notify: Browserify Failed!: Unexpected token
/node_modules/vuetable-2/src/components/Vuetable.vue:1
<template>
No matter what I do, whether I require or import, npm doesn't work
Hi! First of all, thanks for making this awesome piece of software. I am benefitting from it a lot!
However, I did encounter an issue I am not completely sure how to fix. I have a table containing some user information. This table is shown both for authenticated and unauthenticated users. I want to show the authenticated users a few actions.
I currently have the following setup:
props: {
authenticated: {
type: Boolean,
required: true
},
},
data () {
return {
fields: [{
name: 'username',
title: 'Username'
}, {
name: 'url',
title: 'URL',
callback: 'formatUrl'
}, {
name: 'created_at',
title: 'Added at',
callback: 'formatDate'
}, {
name: 'updated_at',
title: 'Reviewed at',
callback: 'formatDate'
}, {
name: '__slot:actions',
dataClass: 'center aligned'
}]
}
},
And the (slot) template:
<template slot="actions" scope="props">
<div v-if="authenticated" class="actions">
<button v-if="!props.rowData.reviewed" class="ui mini green labeled icon button">
<i class="checkmark icon"></i>
Review
</button>
<button v-else class="ui mini yellow labeled icon button">
<i class="undo icon"></i>
Resend
</button>
<button class="ui mini red labeled icon button">
<i class="delete icon"></i>
Delete
</button>
</div>
</template>
This works perfectly well, however unauthorised users see this somewhat ugly empty column (see screenshots). Is there any way to hide the entire actions column for these users?
Thanks in advance!
I used to use DataTables plugin.
One of the useful features is state saving :
https://datatables.net/examples/basic_init/state_save.html
The state of a table (its paging position, ordering state etc) can be restored when the user comes back to the page.
Please implement this feature.
I am really glad this vuetable component exist. Thank you !
Hello! I have faced with a strange problem.
I use vuetable2 (with pagination) and Laravel 5.3.
During an initial loading everything is well. But when I try to change page - table rendering fails.
It happens because this.field
prop breaks down.
In loadData method before calling Vue.http.get
there are 2 objects in property, but in the first row of loadSuccess
method - it consists of 2 strings (as defined in directive)
components defining:
<template>
<vuetable ref="vuetable"
api-url="/oauth/clients/tokens"
:fields="['user_id', 'client_id']"
pagination-path=""
@vuetable:pagination-data="onPaginationData">
</vuetable>
<div class="text-center">
<vuetable-pagination
ref="pagination"
:css="cssPagination"
:icons="icons"
@vuetable-pagination:change-page="onChangePage">
</vuetable-pagination>
</div>
</template>
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
}
}
Vuetable.vue:
loadData: function(success = this.loadSuccess, failed = this.loadFailed) {
this.fireEvent('loading')
this.httpOptions['params'] = this.getAllQueryParams()
console.log(JSON.stringify(this.fields));
/**
output: "[{"name":"user_id","title":"User_id","titleClass":"","dataClass":"","callback":null,"visible":true},{"name":"client_id","title":"Client_id","titleClass":"","dataClass":"","callback":null,"visible":true}]"
*/
Vue.http.get(this.apiUrl, this.httpOptions).then(
success,
failed
)
},
loadSuccess: function(response) {
console.log(JSON.stringify(this.fields));
/**
output: "["user_id","client_id"]"
*/
this.fireEvent('load-success', response)
...
Hi,
It seems VUEJS event broadcast and on doesn't work if components are not related. So in this case is there any way to call the reload method from another component?
I have page on which this data-table is displayed. This same page also has "Add Contact" button. Whenever user clicks on the "Add Contact" - a modal is displayed where user can fill information and press SAVE. This calls another VUEJS component method, fires an API to store the data and closes the modal.
However, data-table doesn't get refreshed, reason - reload method is in the component defined for the data-table . So I can't call that method from non-child or non-parent component.
How do I solve this? One option is to put the modal code in the data-table component itself but I wasn't sure how that will work or how to do that :( (sorry new to vue.js) .
This is the code that stores modal data - it doesn't use any template. Simple SUBMIT calls the method.
Vue.component('contact-api', { // code that calls API to store the modal data })
This is the code that helps to display data-table on the page. Please note - three different components are used.
`Vue.component('contact-actions', {
template: [
'<div>',
'<button class="btn-xs btn-icon waves-effect waves-light btn-default" @click="onClick(\'view-item\', rowData)"><i class="fa fa-edit"></i></button>',
' <button class="btn-xs btn-icon waves-effect waves-light btn-danger" @click="onClickDeleteContact(rowData)"><i class="fa fa-remove"></i></button>',
'</div>'
].join(''),
props: {
rowData: {
type: Object,
required: true
}
},
methods: {
onClick: function(action, data) {
},
onClickDeleteContact: function(data) {
}
}
})
Vue.component('contact-detail-row', { //all detail row related logic })
Vue.component('contact-table', {
template: '#contact-table',
components: {
Vuetable,
VuetablePagination,
VuetablePaginationDropdown,
VuetablePaginationInfo,
},
data: function() {
},
watch: {
},
methods: {
},
created () {
}
})
`
In my opinion, requiring the use of vue-resource
should be up to the developer. I am already including vue-resource
and as such, the error Cannot redefine property: $url
gets thrown.
Please remove the import and force developers to pull it in themselves as a dependency.
Unless of course there is a specific reason for this. I would also like to see the ability to change out vue-resource
for another similar package like axios.
Great Work 👍
I have a Problem, the Content my Table isn`t rendered. The Rows are there but without its Content.
<template>
<vuetable
api-url="http://seller.dev/api"
pagination-path=""
class="zen-table-elem"
:fields="columns"
></vuetable>
</template>
<script>
export default {
name: 'ArticleTable',
data () {
return {
columns: [
'Bild',
'Preis',
'Ø Sales',
'Bestand',
'Kategorie',
'Rang'
],
articles: {}
}
},
created () {
this.getAll()
},
methods: {
getAll () {
this.$http.get('http://seller.dev/api').then(function (response) {
this.articles = response.data
}, function (response) {
console.log(response)
})
}
}
}
</script>
My returned JSON Response from my API build with Laravel
Vue Devtools shows me the returned Object in the Vuetable Component
But there is no Content inside my Columns as you see
And by the Way: How can i remove the blue Color Classes of the Table?
Hi,
I have one transactions table and other account-id table. I have belongsTo eloquent relationship where each every transaction belongs to some or other account-id.
This API works perfectly when tested online (using POSTMASTER). JSon returned is in the correct format. However - vuetable goes in infinite loop whenever I update below code in the TRANSFORM method:
for (let i = 0; i < data.length; i++) {
transformed['data'].push({
id: data[i].id,
gl_account_id: data[i].gl_account.name,
})
}
however it works correctly when I have below code (no change in the backend)
for (let i = 0; i < data.length; i++) {
transformed['data'].push({
id: data[i].id,
gl_account_id: data[i].gl_account_id, //.gl_account.name,
})
}
here, "gl_account_id" field is a foreign key. So instead of using that - I was trying to use its "name" to display in the table.
Any idea how to get this working?
hi,
first of all, thanks for this great project and all the great work the team put on this.
so I've been playing around on some of the tutorials and decided to add it as a nodejs package to my test project using Laravel 5.4, I am using webpack and vuejs2. I have no problem installing vuetable-2 via npm, but when I try to import it to my app.js:
import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
.. and try to compile it (npm run dev), I am getting an error causing the bundle to prevent from compiling. here's the exact error message I got: (stripped paths to my local dirs)
bub:~/vrs $ npm run watch
> @ watch /full/path/to/my/project
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 1/1 modules 0 active
Webpack is watching the files…
95% emitting
ERROR Failed to compile with 3 errors
error in ./~/vuetable-2/src/components/Vuetable.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
@ ./~/vuetable-2/src/components/Vuetable.vue 7:2-170
@ ./resources/assets/js/bootstrap.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
error in ./~/vuetable-2/src/components/VuetablePagination.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
@ ./~/vuetable-2/src/components/VuetablePagination.vue 3:2-180
@ ./resources/assets/js/bootstrap.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
error in ./~/vuetable-2/src/components/VuetablePaginationInfo.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "/full/path/to/my/project/node_modules/vuetable-2/.babelrc" at 0, attempted to resolve relative to "/full/path/to/my/project/node_modules/vuetable-2"
at /full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:233:36)
at OptionManager.init (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:367:12)
at File.initOptions (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:216:65)
at new File (/full/path/to/my/project/node_modules/babel-core/lib/transformation/file/index.js:139:24)
at Pipeline.transform (/full/path/to/my/project/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/full/path/to/my/project/node_modules/babel-loader/lib/index.js:38:20)
at /full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:78:18
at ReadFileContext.callback (/full/path/to/my/project/node_modules/babel-loader/lib/fs-cache.js:14:14)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:365:13)
I tried to look for any guide related to proper npm installation, cause I might missing something that causes the error, but cant find unfortunately, so I tried to open the files involved and play a bit on the terms mentioned on the error (not an expert on nodejs), so I tried playing on the values inside node_modules/vuetable-2/.babelrc file, I tried to drop the: "plugins": ["transform-runtime"],
line completely, and removed stage-2
from presets
field. so the new value would be:
{
"presets": ["es2015"],
"comments": false
}
again, am a BEGginer for nodejs, and I dont quite understand yet the full extend of the changes i did, but it works, and I can successfully run vuetable-2 with laravel and webpack. just thought it might be helpful for the team or whoever encounters the same error I did, It's just I dont feel comfortable making any custom changes on vendor library files, and would rather report it to the authors.
Hi @ratiw still a newbie of using vue, and been trying your vuetable but I encountering some parse error.
Module parse failed: C:\xampp\htdocs\ProjectLaravel\PROJ\node_modules\vue-tables-2\lib\methods\render.js Unexpected token (17:9)
Here is my webpack.config.js
`var webpack = require('webpack');
var fileName = "list.js"; //source and compiled filename
var entryFile = "./public/js/Core/"+fileName;
var destinationFolder = "./public/js/Core/compiled";
module.exports = {
entry: entryFile,
output: {
path: destinationFolder,
filename: fileName
},
module: {
loaders: [
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
};
`
And my JS file
`var VueTables = require('vue-tables-2');
Vue.use(VueTables.client, {
compileTemplates: true,
highlightMatches: true,
pagination: {
dropdown:true,
chunk:5
},
filterByColumn: true,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
}
});
new Vue({
el : '#brandVue',
data : {
columns: ['id','name','age'],
tableData: [
{id:1, name:"John",age:"20"},
{id:2, name:"Jane",age:"24"},
{id:3, name:"Susan",age:"16"},
{id:4, name:"Chris",age:"55"},
{id:5, name:"Dan",age:"40"}
],
}
});
`
Thanks @ratiw for the help!
I don't see any CDN version of vuetable-2 (only 1). I tried downloading the release file but it looks like I have to build it myself, and doing so results in npm install
failing at [email protected] install: node install.js
. Using node 6.6.0 and npm 3.10.8 by the way.
Currently I've defined a component in a file :
<template lang="html">
<div class="btn-group" role="group" aria-label="...">
<a @click="onShow(rowData)" class="btn btn-info"><i class="fa fa-info"></i> Detail</a>
<a @click="onEdit(rowData)" class="btn btn-primary"><i class="fa fa-edit"></i> Edit</a>
<a @click="onDelete(rowData)" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</a>
</div>
</template>
<script>
export default {
props: {
rowData: {
type: Object,
required: true
},
showUrl: {
type: String,
required: true
},
editUrl: {
type: String,
required: true
},
deleteUrl: {
type: String,
required: true
},
redirectUrl: {
type: String,
required: false
}
},
methods: {
onShow: function(data) {
window.location.href = this.showUrl + '/' + data.id
},
onEdit: function(data) {
window.location.href = this.editUrl + '/' + data.id
},
onDelete: function(data) {
this.$http.delete(this.deleteUrl + '/' + data.id).then(
(response) => {
console.log(response);
if(this.redirectUrl !== undefined)
window.location.href = this.redirectUrl
this.$parent.refresh()
},
(response) => {
console.log(response);
}
)
}
}
}
</script>
Is there anyway to send props to my component ? Currently I see only a way to state which component to be used for the __component column without sending it anything. Please help 🙏
Hello,
I use vuetable-2 that I find very well, and i start with vuejs 2, i would like add my filters above or below column's names with html tag thread tr td. (like this grid example : http://grids-demo.herokuapp.com/demo/example4)
I have this http://imgur.com/a/I9laA and it's work.
Does somebody have an idea ?
Thank you in advance for your help.
I'm using vee-validate and I'm having a conflict problem with the 'fields' prop.
What can I do to solve it?
Is there any way to load all data and then make pagination? Something like datatables.net does.
I prefer speed when user is using the table before first-time load.
I'm trying to setup a table with pagination but with this new version I haven't been able to do it yet.
I've read the Upgrade Guide but I can't really understand what I've to do in order to display the pagination. (I'm kind of new in VueJS). Also the vuetable:pagination-data
is never called in my component.
Here's what I've coded at the moment:
<template>
<vuetable
:api-url="apiUrl"
:fields="columns"
:pagination-path="paginationPath"
:css="css"
:pagination-component="paginationComponent"></vuetable>
</template>
<script>
export default {
props: ['apiUrl'],
mixins: [require('../components/Mixin.vue')],
data: function data() {
return {
columns: [
'first_name',
'last_name',
'email',
'company',
'job_title',
'groups'
],
paginationPath: 'meta.pagination.links',
paginationComponent: 'vuetable-pagination',
css: {
tableClass: 'table',
ascendingIcon: 'fa fa-angle-up',
descendingIcon: 'fa fa-angle-down',
detailRowClass: ''
}
}
},
mounted: function () {
//
},
methods: {
registerEvents: function () {
var self = this;
this.$on('vuetable:pagination-data', function (pagination) {
console.log('vuetable:pagination-data', pagination);
});
}
},
created: function () {
this.registerEvents();
}
}
</script>
And I'm calling this component like this :
<laravel-participant-vuetable api-url="/vue/api/events/{{ $event->id }}/participants"></laravel-participant-vuetable>
Thanks for your help
Hi,
I'm trying to use vuetable-2 but after yarn add vuetable-2
i have this error :
ERROR in ./~/babel-loader/lib?{"cacheDirectory":true,"presets":[["es2015",{"modules":false}]]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuetable-2/src/components/Vuetable.vue
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "F:\\dev\\Project\\node_modules\\vuetable-2\\.babelrc" at 0, attempted to resolve relative to "F:\\dev\\Project\\node_modules\\vuetable-2"
Hello, I'm trying the "Property or method "css" is not defined on the instance but referenced during render" when start new vuetable-2 component.
My settings:
http://joxi.ru/5mddy9OSvxMPbm.jpg
and in the console I get the error:
http://joxi.ru/8239qYaH6Ekq6r.jpg
How can I resolve that?
Thanks.
Hi @ratiw
Again thanks for the wonderful vuetable plugin.
I am trying to map your code and adding some functionality, like on your custom action component, i want to pass also the rowIndex on click events, so I have to map how you are getting the rowData you passing to this events.
Hopefully you could enlighten me.
Thanks!
Hi, This project is very nice.
I just started learning vue js, Beginning with version 2.
the vuetable (by vue1) is full, but vuetable-2 not package ( in vuetable.js).
will I need to encapsulate him ?
I hope this can get better and better
this is my exercise project, this your package
https://github.com/imagine10255/laravel53-vuejs2-jwt-auth/blob/master/resources/assets/js/components/VuetableDemo1.vue
thinks.
Hello,
If I didn't miss it somewhere, Is there a way to pass props or events to the actions custom component without modifying Vuetable?
1、 the main vue instance:
table 1:
<vuetable ref="vuetable"
...
@CustomAction:action-item="onActions"
></vuetable>
table 2:
<vuetable ref="vuetable"
...
@CustomAction:action-item="onXXXActions"
></vuetable>
2、emit event
table 1:
Vue.component('custom-actions', {
...
methods: {
onClick: function (action, data) {
this.$parent.$emit('CustomAction:action-item',{action: action, data: data})
}
}
}
table 2:
Vue.component('custom-actions', {
...
methods: {
onClick: function (action, data) {
this.$parent.$emit('CustomAction:xxx-action-item',{action: action, data: data})
}
}
}
3、
table 1:
onActions(data) {
if (data.action == 'delete') {
this.deleteAction(data.data);
}
},
table 2:
onXXXActions(data) {
if (data.action == 'delete') {
this.deleteAction(data.data);
}
},
question:
two vuetables on my page , just one of onActions work, what's matter?
Just to report that I had to change "VuetablePaginationMixin.vue" to "VuetablePaginationMixin.js" and remove the <script> tags in order to make the code compile. Otherwise I would get the error:
Error transforming Y:\Administrator\Desktop\vue\src\vuetable\VuetablePaginationMixin.vue with 'vue' plugin: Cannot read property 'trim' of undefined.
The vue plugin would be looking for the template of a component even though it's a mixin and has no template.
Works this way. Thanks for the plugin!
var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);
import Vuetable from 'vuetable-2/src/components/Vuetable.vue';
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue';
import VuetablePaginationDropdown from 'vuetable-2/src/components/VuetablePaginationDropdown.vue';
Vue.component('vuetable', Vuetable);
Vue.component('vuetable-pagination', VuetablePagination)
Vue.component('vuetable-pagination-dropdown', VuetablePaginationDropdown)
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
ERROR in ./~/vuetable-2/~/css-loader?sourceMap!./~/vuetable-2/~/vue-loader/lib/style-rewriter.js?id=data-v-d0b0b768!./~/vuetable-2/~/vue-loader/lib/selector.js?type=styles&index=0!./~/vuetable-2/src/components/Vuetable.vue
Module build failed: TypeError: Cannot read property '0' of undefined
at Object.module.exports (test/node_modules/vuetable-2/node_modules/vue-loader/lib/selector.js:10:31)
@ ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!./~/vuetable-2/~/vue-style-loader!./~/vuetable-2/~/css-loader?sourceMap!./~/vuetable-2/~/vue-loader/lib/style-rewriter.js?id=data-v-d0b0b768!./~/vuetable-2/~/vue-loader/lib/selector.js?type=styles&index=0!./~/vuetable-2/src/components/Vuetable.vue 4:14-233
Does anyone have a working example/guide?
this.$on('vuetable:action', (action, data) => {
})
this.$on('vuetable:cell-clicked', (data, field, event) => {
self.onCellClicked(data, field, event)
})
this.$on('vuetable:cell-dblclicked', (data, field, event) => {
self.onCellDoubleClicked(data, field, event)
})
this.$on('vuetable:load-success', (response) => {
self.onLoadSuccess(response)
})
this.$on('vuetable:load-error', (response) => {
self.onLoadError(response)
})
only this is work:
'vuetable:cell-clicked'
others can't work, how to do it?
As i see there is no way to mark column as sortable with icon when column is sortable but not active, i hope u understand...
So i see isInCurrentSortGroup
method, maybe you could place in this part :class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]"
class active or whatever?
<th v-if="extractName(field.name) == '__component'"
@click="orderBy(field, $event)"
:class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]">
{{ field.title || '' }}
<i v-if="isInCurrentSortGroup(field) && field.title"
:class="sortIcon(field)"
:style="{opacity: sortIconOpacity(field)}"></i>
</th>
Title says it all. Thanks.
Hi, I am using vue2 with vuetable-2, i follow vuetable documentation but i got this, i tried to copy paste the example but the error still occurred..
Uncaught TypeError: this.fields.forEach is not a function(…)
Please help me, i log "this.fields" is an object instead of array
Hi, I used NPM and built DEV output. I am using LARAVEL in the backed and received below error:
[Vue warn]: Error when rendering component :
vue.js:2264TypeError: Cannot read property 'toUpperCase' of null ..
am I missing any step? vue dev tools shows correct pagination data - so till that point it was good.
Looks like the parameters doesn't match the function's logic anymore.
@change="toggleCheckbox($event.target.checked, item, field.name)"
vs
toggleCheckbox: function(dataItem, fieldName, event) {
However I tried to fix toggleCheckbox's arguments the values where added to the selectedTo
array but the checkbox didn't stay checked.
I have a fairly simple component set up like so:
<template>
<row>
<column>
<vuetable url="..."></vuetable>
</column>
</row>
</template>
<script>
export default {
data () => {
return {
fields: [{name: "test", callback: "test"}]
};
},
methods: {
test: (value) => value.split('').reverse().join('')
}
}
</script>
When trying to call the callback, the following code is triggered in VueTable:
callCallback: function(field, item) {
if ( ! this.hasCallback(field)) return
if(typeof(field.callback) == 'function') {
return field.callback(this.getObjectValue(item, field.name))
}
let args = field.callback.split('|')
let func = args.shift()
if (typeof this.$parent[func] === 'function') {
let value = this.getObjectValue(item, field.name)
return (args.length > 0)
? this.$parent[func].apply(this.$parent, [value].concat(args))
: this.$parent[func].call(this.$parent, value)
}
return null
},
The relevant line here is if(typeof this.$parent[func] === 'function')
... Because this.$parent
refers to the column, not my custom component. And of course <column>
doesn't have a method called test
This is easily resolved with something like the following:
let elem = this.$parent;
while (elem.$parent && !elem[func]) {
elem = elem.$parent;
}
This would travel up the component tree until it found one where the callback was defined. Of course performing this while loop per row could lead to some gross performance penalties, so you may want to add caching of the callback afterwards.
Just a thought for an improvement
Hi,
Thanks for the great table code.
It would be really awesome if you add EXPORT to Excel or PDF or list feature. Can you please add this in your requested feature list.
Thanks.
Hi!
I have trying for many time to get run vuetable, but I always get the same error:
Uncaught TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property '_updateFromParent' of undefined
My api does not have any problem, this is my code for vue:
html:
<div class="tab-content">
<div class="row">
<div class="table-responsive">
<vuetable ref="vuetable"
api-url="/api/ladder/achievement"
:fields="columns"
:per-page="perPage"
></vuetable>
</div>
</div>
</div>
js:
import Vuetable from 'vuetable-2/src/components/Vuetable.vue'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination.vue'
import VuetablePaginationDropdown from 'vuetable-2/src/components/VuetablePaginationDropdown.vue'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo.vue'
var locales = {
es: {
message: {
avatar: 'Avatar',
nickname: 'Apodo',
level: 'Nivel',
point: 'Puntos',
}
},
fr: {
message: {
avatar: 'Avatar',
nickname: 'Nickname',
level: 'Level',
point: 'Points',
}
},
en: {
message: {
avatar: 'Avatar',
nickname: 'Nickname',
level: 'Level',
point: 'Points',
}
}
}
Vue.config.lang = document.querySelector('#lang').getAttribute('value')
Object.keys(locales).forEach(function(lang) {
Vue.locale(lang, locales[lang])
})
new Vue({
el: '#app',
components: {
Vuetable,
VuetablePagination,
VuetablePaginationDropdown,
VuetablePaginationInfo,
},
data: {
perPage: 15,
columns: [{
name: 'avatar_url',
title: Vue.t('message.avatar'),
dataClass: 'text-center',
callback: 'image',
titleClass: 'text-center',
}, {
name: 'Name',
title: Vue.t('message.nickname'),
dataClass: 'text-center',
titleClass: 'text-center',
}, {
name: 'level',
title: Vue.t('message.level'),
dataClass: 'text-center',
titleClass: 'text-center',
}, {
name: 'AchievementPoints',
title: Vue.t('message.point'),
dataClass: 'text-center',
titleClass: 'text-center',
}],
},
watch: {
'perPage' (val, oldVal) {
this.$nextTick(function() {
this.$refs.vuetable.refresh()
})
},
},
methods: {
image: function(str) {
return '<img v-lazy="/template/img/ladder/heads/' + str + '" width="27">'
}
}
})
So what is wrong with my code? I miss any reference or?
So many thanks for you help, and sorry if my english it's not perfect I still learning ^^
What is the correct way to show a text or animination for the table
i have this code
JS
new Vue({
el: #app-content,
data: {
paginationComponent: 'vuetable-pagination',
paginationInfoTemplate: '',
loading: true
},
methods: {
onLoaded: function () {
this.loading = false;
}
})
HTML
<div>
<div v-if="loading"><span class="fa fa-spinner fa-spin fa-3x"></span>Loading ...</div>
<vuetable
ref="vuetable"
api-url="{{ $setup->api_url}}"
:fields="{{json_encode($setup->columns())}}"
pagination-path="{{$setup->pagination_path}}"
@vuetable:pagination-data="{{ $setup->pagination_data }}"
:css="{tableClass: '{{$setup->css['tableClass']}}'}"
@vuetable:loaded="onLoaded"
>
</vuetable>
</div>
For some reason when i execute the sentence in the onLoaded method, the table data dissapears what am i doing wrong? this was working with vue1, but i dont know what changed that is preventing from working
[email protected] dev /home/eco/Downloads/vuetable-2-master
node build/dev-server.js
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::8080
at Object.exports._errnoException (util.js:1022:11)
at exports._exceptionWithHostPort (util.js:1045:20)
at Server._listen2 (net.js:1262:14)
at listen (net.js:1298:10)
at Server.listen (net.js:1376:9)
at Function.listen (/home/eco/Downloads/vuetable-2-master/node_modules/express/lib/application.js:617:24)
at Object. (/home/eco/Downloads/vuetable-2-master/build/dev-server.js:59:22)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:420:7)
at startup (bootstrap_node.js:139:9)
at bootstrap_node.js:535:3
npm ERR! Linux 4.4.0-57-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: node build/dev-server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'node build/dev-server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vuetable-2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node build/dev-server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vuetable-2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vuetable-2
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/eco/Downloads/vuetable-2-master/npm-debug.log
I would like to be able to choose another option as the "axios" case
I have a view component that uses the v-server-table and the data is retrieved from the api using paginate. the table display the records from the first page but the pagination is not shown.
issues
below is the component html
below is the component script
export default {
name: 'user-list',
prop: {
columns: [],
options: {},
pagination: {},
perPage: 10
},
data: function () {
return {
columns:['UserNo','UserName', 'IDCardNo', 'ContactNo', '__actions'],
itemActions: [
{ name: 'view-item', label: '', icon: 'zoom icon', class: 'ui teal button' },
{ name: 'edit-item', label: '', icon: 'edit icon', class: 'ui orange button'},
{ name: 'delete-item', label: '', icon: 'delete icon', class: 'ui red button' }
],
options: {
columns: ['UserNo','UserName', 'IDCardNo', 'ContactNo', '__actions'],
headings: {
PatientNo: 'User No',
Patient: 'User Name',
IDCardNo: 'ID/Passport No',
ContactNo: 'Contact No',
edit: 'Edit',
delete: 'Delete'
},
pagination: {
dropdown:true,
chunk:5,
paginationComponent: 'vuetable-pagination',
paginationInfoTemplate: '',
loading: true
},
filterByColumn: false,
texts: {
filter: "Search:"
},
perPage: 5
}
}
},
//created: {
//},
methods: {
},
events: {
'vuetable:action': function(action, data) {
console.log('vuetable:action', action, data)
if (action == 'view-item') {
this.viewProfile(data.id)
}
},
'vuetable:load-error': function(response) {
console.log('Load Error: ', response)
}
}
}
what am I missing here .
I'm trying to get Vuetable-2 to work in our solution. The demo works without problems. The difference is that we use a lot of different modules and I'm fairly new to front-end development and fail to see what the problem can be.
The difference between the demo and trying to set the demo up in our own project is this:
Demo
import Vuetable from 'vuetable-2/src/components/Vuetable
Our project
import Vuetable from 'vuetable-2/src/components/Vuetable.vue
The reason for doing so is because if I do not (leave out the .vue), I'll get the following error:
ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?
type=script&index=0!./resources/assets/js/components/VuetableTest.vue
Module not found: Error: Can't resolve 'vuetable-2/src/components/Vuetable'
But, with the extension added to the import, I'll get this (in the browser console):
[Vue warn]: Property or method "css" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option.
(found in component <vuetable>)
[Vue warn]: Error when rendering component <vuetable>:
Uncaught TypeError: Cannot read property 'tableClass' of undefined
Now I have the feeling it has something to do with me needing to add the extension to the import, something that is not done within the Vuetable files, for example import VueResource from 'vue-resource'.
Our package.json
:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-advanced": "*",
"laravel-elixir-webpack-official": "*",
"lodash": "^4.14.0",
"multiselect": "^0.9.12",
"node-sass": "^3.10.0",
"notifyjs-browser": "^0.4.2",
"sweetalert": "^1.1.3",
"vue": "^2.1.0",
"vue-resource": "^1.0.2",
"vue-router": "^0.7.13",
"vuetable-2": "^1.2.0",
"vuex": "^2.1.1",
"whatwg-fetch": "^1.0.0",
"wow.js": "^1.2.2"
},
"dependencies": {
"laravel-echo": "^1.0.5",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pusher-js": "^3.2.1"
}
}
Again, I feel like this has to do with modules we use or elixir settings or whatever, but it's not working out of the box. Sorry for adding this as a new issue to Vuetable, but I don't know where to ask else.
I have filtering criteria object
var myCriteria = {
country: 'Germany',
categoryIn: ['bug', 'task', 'other']
}
When assigning this object to apped-params (moreParams is binded with append-params) wrong url is build
this.moreParams = myCriteria
this.$refs.vuetable.refresh()
the filtering url part should be:
&country=Germany&categoryIn=bug,task,other OR
&country=Germany&categoryIn[]=bug&categoryIn[]=task&categoryIn[]=other
Do you plan to add support that enhancement?example
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.