gerkindev / vuejs-datatable Goto Github PK
View Code? Open in Web Editor NEWA Vue.js component for filterable and paginated tables.
Home Page: https://gerkindev.github.io/vuejs-datatable/
License: MIT License
A Vue.js component for filterable and paginated tables.
Home Page: https://gerkindev.github.io/vuejs-datatable/
License: MIT License
Not quite even sure what this means, but... I've been wrestling with this with the vuejs-datatable component for a while.
I thought it was a vue 2.5 thing, but rolling back to 2.4 doesn't help.
This is with release 1.5.3
Had upgraded because there was some weirdness in earlier version relating to how the component was imported - was used to work in 1.3.2 seemed to stop working, and I've been trying an upgrade, but nothing about this works now. That 'duplicate slot' thing is blocking me now.
I installed vue-datatable with yarn add vuejs-datatable
, and imported datatable according to the demo information. Then my build tool complained about missing object-path
, regardless that I've installed the package earlier actually.
The error message is:
ERROR Failed to compile with 2 errors
This dependency was not found:
* object-path in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vuejs-datatable/src/vue-datatable.vue, ./~/vuejs-datatable/src/stores/json.js
To install it, you can run: npm install --save object-path
Any help or suggestion is appreciated!
Hello everybody. I have I problem when I try to create a link as row value. For example:
{label: 'name', representedAs: (data) => <a href="${data.id}">${data.name}</a>
, interpolate: true}
I want to sort by name but the sort direction is always the id, if I remove ${data.id} from href, the sort is working fine. I think the sort method works with the first parameter after the arrow function. How can I sort by name and not by id? Thank you very much.
Using the IIFE build of vuejs-datatable, I have no way to use VuejsDatatable because I have the error
Uncaught ReferenceError: VuejsDatatable is not defined
at vue_app.js:1
Also I noticed that for IIFE and Ecma, the customization of the table has the same example code. Maybe there is an issue in the readme file or I do not understand it well for IIFE builds.
Thanks in advance
I'm importing and using as per docs:
import Vue from 'vue';
import DatatableFactory from 'vuejs-datatable';
Vue.use(DatatableFactory);
And i'm getting the following error:
vuejs-datatable.js:1 Uncaught TypeError: Cannot read property 'use' of undefined
at eval (vuejs-datatable.js:1)
at Object.eval (vuejs-datatable.js:1)
at eval (vuejs-datatable.js:4)
at Object../node_modules/vuejs-datatable/dist/vuejs-datatable.js (bundle.min.js:1550)
at __webpack_require__ (bundle.min.js:725)
at fn (bundle.min.js:102)
at eval (main.js:5)
at Module../src/main.js (bundle.min.js:1979)
at __webpack_require__ (bundle.min.js:725)
at bundle.min.js:792
I tried `window.Vue = Vue;' with no luck, thinking that it was related to #28
What could it be?
Hi,
I'm trying to use the pre-compiled ES5 version
var Vue = require('vue') var vuejsDataTable = require('./vuejs-datatable')
Like this, but I get a
Cannot read property 'component' of undefined
Any one knows how to solve this issue?
Regards
Could it be possible to pass in the classes for a bootstrap table but having no default? Something like:
<datatable class="table table-bordered" :columns="columns" :data="rows" :filter-by="filter"></datatable>
Hello there,
I am facing an issue when running a production mode.... I am using npm to compile it in a single js file, and here is the error:
Unexpected token: punc ()) [./~/vuejs-datatable/src/stores/json.js:4,0][/js/app.js:33709,8]
Thanks!
Is there any way to let a component handle the sorting of its column?
I'm trying to add this beauty to my nuxt installation.
I made a vuejs-datatable.js file inside the plugins folder with this content:
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable/dist/vuejs-datatable.esm.js'
Vue.use(DatatableFactory)
I then registrered it as a plugin using:
plugins: ['@/plugins/vuetify', '@/plugins/vuejs-datatable'],
And lastly i added it to the transpiler using:
transpile: ['vuetify/lib', '/plugins/vuejs-datatable.js'],
Now this is my result:
The code im using in my vue file comes from the github readme
<datatable :columns="columns" :data="rows"></datatable>
And using the standard colums and rows.
My dev console is empty.
how to get the sorted column to use it to call ajax.
Is there a way to emit back to the parent component from within a component passed to the datatable? I don't see a way to attach a "v-on" binding. As an example, clicking on an edit button component to the table triggers a modal open event within the parent component?
Hi,
I try to run your example : https://vuejs-datatable.patrickstephan.me/demonstrations/usage/ajax.html
When always reload page, the library call 2 request to backend to get data.
Why library do that? It is not necessary. Please help me solve it.
Page number gets set to zero on custom data functions when filtering returns 0 results.
The icons aren't appearing for me. Do I need to install them separately?
On your documentation page https://vuejs-datatable.patrickstephan.me/usage/ajax your AJAX request is getting called twice. Thats probably not the desired behavior, or?
Is there a way to sort the columns using Moment.js localizations (specifically with date formats)?
Thanks for the great job so far.
The section for the API of the datatable
component in the docs is not scrolleable and some importante content is hidden, like de component
option for the rows.
I'd like to link text in a DT column, but I can't seem to get the link to work unless I put it within a component. If I put the link in the component, it isn't sortable or filterable.
Is there another way to get a link to work beside wrapping it in a component?
Hi,
I am registering the component as per the docs and importing Vue as per my other components but getting the error "Error in created hook: "ReferenceError: Vue is not defined".
Below is the complete .vue file.
Any help greatly appreciated.
Thanks.
<template>
<div>
<datatable :columns="columns" :data="rows"></datatable>
</div>
</template>
<script>
import Vue from "vue"
import DatatableFactory from "vuejs-datatable"
Vue.use(DatatableFactory)
export default {
data () {
return {
columns: [
{label: "id", field: "id"},
{label: "Username", field: "user.username"},
{label: "First Name", field: "user.first_name"},
{label: "Last Name", field: "user.last_name"},
{label: "Email", field: "user.email"},
{label: "address",
representedAs: function (row) {
return row.address + "<br />" + row.city + ", " + row.state
},
interpolate: true
}
],
rows: [
{
"id": 1,
"user": {
"username": "dprice0",
"first_name": "Daniel",
"last_name": "Price",
"email": "[email protected]"
},
"address": "3 Toban Park",
"city": "Pocatello",
"state": "Idaho"
}
]
}
}
}
</script>
Hi !
Your code seems to be amazing but what about browsers compatibilty ?
I supposed it work on browser using WebKit but for others like IE/Edge and Firefox ?
Thanks ! :)
add
import Vue from "vue";
to line 42 file vue-datatable.vue
because I got error
Sortable feature does not seem to work in Vue 2.5.7. i suppose it should be true by default but even setting sortable:true that feature does not work
Is it possible to have custom css classes or styles applied to the <th>
elements of the table? I couldn't achieve this using headerComponent
.
When adding pagination. the class "pagination" is added to the <ul>
but the class attribute is empty for the <li>
and <a>
tags
<li class=""><a href="javascript: void(0);" class="">1</a></li>
I am trying to make a custom template like this :
<template scope="{ row }">
<tr v-bind:class="row.status.code">
<td>{{ row.order_no }}</td>
<td>{{ row.product.name }}</td>
<td>{{ row.patient.name }}</td>
<td>{{ row.doctor.name }}</td>
<td>{{ row.updated_at }}</td>
<td>{{ row.status.label }}</td>
</tr>
</template>
It show nothing, and in the console.log says that "scope" is deprecated in 2.5 and suggest to use slot-scope instead. but it still show nothing without error in console log.
Hello.
I'm tying to write tests on the project I work and I can't, because I get next error:
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
SyntaxError: Use of reserved word 'class'
at http://localhost:8081webpack:///node_modules/vuejs-datatable/src/classes/settings.js:3:0 <- index.js:15069
Is it possible somehow to fix or to avoid it?
Thanks.
I cannot find a way to add the custom footer? tfoot anybody? After Vue 2.5.
Hi,
I am using ajaxtable and ajaxtable-pager,here table display working properly but pagination not showing
Hi,
Is it possible to sort table on clicking headers instead of icons?
I've been trying to trigger sort event but not successfuly.
Thanks,
Emiliano
Hi mate, it's great job. Congrats and thanks.
Does any plan support bootstrap 4 or support custom class name?
Hey there,
As a way to improve build, why don't we replace laravel-mix with a pure webpack config? Even if the config itself would be a bit bigger, it would remove dependencies on unused laravel-specific features, and gain access on more precise configuration. Moreover, by reducing intermediate packages, we can be more responsive to build tools updates.
As I told you, I'm OK to PR for that, but I need your confirmation.
Cheers!
If I Click on one column to sort then it works, but then if I click on another column to sort the icon change, but the results do not change. However, if I keep clicking on it to sort then it eventually gets to the right sorting. It is just the first click from one column to the next. This issue is also present on your documentation pages. Sort a column by UserName then by ID. You will notice the results don't sort by ID right away.
Thanks for building this component! It's quite easy to work with.
One question I had: is there a way to set a column to sort by default? Or perhaps a function I can call when the table loads to trigger it to sort?
I would like my data to be sorted when it is initially displayed.
If I Click on Pager - Mazilla open New Tab.
I fix this by adding prevent @click="sendClick"
=> @click.prevent="sendClick"
ReferenceError: Vue is not defined
at VueComponent.created (vue-datatable.vue?ac0c:165)
at callHook (vue.common.js?e881:2897)
at VueComponent.Vue._init (vue.common.js?e881:4562)
at new VueComponent (vue.common.js?e881:4730)
at createComponentInstanceForVnode (vue.common.js?e881:4244)
at init (vue.common.js?e881:4061)
at createComponent (vue.common.js?e881:5514)
at createElm (vue.common.js?e881:5462)
at createChildren (vue.common.js?e881:5588)
at createElm (vue.common.js?e881:5490)
logError @ vue.common.js?e881:1719
globalHandleError @ vue.common.js?e881:1710
handleError @ vue.common.js?e881:1699
callHook @ vue.common.js?e881:2899
Vue._init @ vue.common.js?e881:4562
VueComponent @ vue.common.js?e881:4730
createComponentInstanceForVnode @ vue.common.js?e881:4244
init @ vue.common.js?e881:4061
createComponent @ vue.common.js?e881:5514
createElm @ vue.common.js?e881:5462
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
createChildren @ vue.common.js?e881:5588
createElm @ vue.common.js?e881:5490
patch @ vue.common.js?e881:5997
Vue._update @ vue.common.js?e881:2639
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
Watcher @ vue.common.js?e881:3106
mountComponent @ vue.common.js?e881:2774
Vue$3.$mount @ vue.common.js?e881:8431
Vue$3.$mount @ vue.common.js?e881:10792
init @ vue.common.js?e881:4067
createComponent @ vue.common.js?e881:5514
createElm @ vue.common.js?e881:5462
patch @ vue.common.js?e881:6036
Vue._update @ vue.common.js?e881:2649
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
run @ vue.common.js?e881:3194
flushSchedulerQueue @ vue.common.js?e881:2956
(anonymous) @ vue.common.js?e881:1815
flushCallbacks @ vue.common.js?e881:1736
Promise resolved (async)
microTimerFunc @ vue.common.js?e881:1784
nextTick @ vue.common.js?e881:1828
queueWatcher @ vue.common.js?e881:3043
update @ vue.common.js?e881:3184
Vue.$forceUpdate @ vue.common.js?e881:2670
(anonymous) @ vue.common.js?e881:8216
wrappedHook @ vue.common.js?e881:2059
invoker @ vue.common.js?e881:2002
(anonymous) @ vue.common.js?e881:7713
(anonymous) @ vue.common.js?e881:314
end @ vue.common.js?e881:7420
(anonymous) @ vue.common.js?e881:7431
setTimeout (async)
whenTransitionEnds @ vue.common.js?e881:7429
(anonymous) @ vue.common.js?e881:7744
requestAnimationFrame (async)
(anonymous) @ vue.common.js?e881:7387
requestAnimationFrame (async)
nextFrame @ vue.common.js?e881:7386
performLeave @ vue.common.js?e881:7737
leave @ vue.common.js?e881:7721
remove$$1 @ vue.common.js?e881:7812
removeAndInvokeRemoveHook @ vue.common.js?e881:5690
removeVnodes @ vue.common.js?e881:5664
patch @ vue.common.js?e881:6078
Vue._update @ vue.common.js?e881:2649
updateComponent @ vue.common.js?e881:2767
get @ vue.common.js?e881:3117
run @ vue.common.js?e881:3194
flushSchedulerQueue @ vue.common.js?e881:2956
(anonymous) @ vue.common.js?e881:1815
flushCallbacks @ vue.common.js?e881:1736
Promise resolved (async)
microTimerFunc @ vue.common.js?e881:1784
nextTick @ vue.common.js?e881:1828
queueWatcher @ vue.common.js?e881:3043
update @ vue.common.js?e881:3184
Vue.$forceUpdate @ vue.common.js?e881:2670
(anonymous) @ index.js?12b5:158
(anonymous) @ index.js?12b5:139
(anonymous) @ index.js?12b5:104
(anonymous) @ Sales.vue?e28b:31
352 @ 0.5d94cfeeacdd17f21b13.hot-update.js:14
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ Sales.vue?ea1b:9
(anonymous) @ app.js:2497
__webpack_require__ @ app.js:660
hotApply @ app.js:590
cb @ process-update.js?e13e:66
(anonymous) @ process-update.js?e13e:82
Promise resolved (async)
check @ process-update.js?e13e:81
module.exports @ process-update.js?e13e:42
processMessage @ client.js?7955:251
handleMessage @ client.js?7955:131
handleMessage @ client.js?7955:94
<datatable-pager v-if="isShowPager()" type="abbreviated" v-model="page" v-bind:per-page="per_page" ></datatable-pager>
This doesn't work if you set per_page variable equal or greater than rows quantity
So i installed via NPM -
npm install vuejs-datatable
Added
import Vue from 'vue';
import DatatableFactory from 'vuejs-datatable';
Vue.use(DatatableFactory);
and i get this error - no idea why.
at eval (vuejs-datatable.js?b015:1)
at Object.eval (vuejs-datatable.js?b015:1)
at eval (vuejs-datatable.js?b015:2)
at Object. (build.js:3830)
at webpack_require (build.js:679)
at fn (build.js:89)
at eval (main.js?3479:1)
at Object. (build.js:2769)
at webpack_require (build.js:679)
at fn (build.js:89)
It would be glad to know if after ajax method why filter and sort option is not working?
or needs tweaks??
`
methods: {
getData: function(params, setRowData){
axios.get('https://api.spacexdata.com/v2/launches').then(function(response){
var start_index = (params.page_number - 1) * params.page_length;
var end_index = start_index + params.page_length;
setRowData(
response.data.slice(start_index, end_index),
response.data.length
);
}.bind(this));
}
}
`
Thanks @pstephan1187 for this great plugin.
I am however unable to get sorting to work, or even the sorting icons to appear when the source of the table data is an API loaded via Ajax.
Below is my code setup...
main.js code...
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import DatatableFactory from 'vuejs-datatable';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';
DatatableFactory.useDefaultType(false)
.registerTableType('datatable', (table_type) => {
table_type.mergeSettings({
table: {
class: 'table hover table-scroll', // table
sorting: {
classes: {
canSort: ['sort'], // 'btn', 'btn-link', 'text-muted',
sortNone: ['fa', 'fa-sort'],
sortAsc: ['fa', 'fa-sort-down'],
sortDesc: ['fa', 'fa-sort-up'],
}
}
},
pager: {
classes: {
pager: 'pagination text-center',
// selected: 'current',
li: 'page-item',
a: 'page-link',
}
}
});
});
Vue.use(BootstrapVue);
Vue.use(DatatableFactory);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
});
User.vue code
<template>
<div>
<h5>User List</h5>
<div class="col-md-12">
<div id="table" class="col-xs-12 table-responsive">
<datatable :columns="user.columns" :data="getData">
<template slot-scope="{ row }">
<tr>
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
<td>{{row.national_id}}</td>
<td>{{row.dob}}</td>
<td>{{row.activated}}</td>
</tr>
</template>
</datatable>
</div>
</div>
<div class="col-md-12">
<div class="col-xs-12 form-inline">
<datatable-pager v-model="user.page" type="abbreviated" :per-page="user.perPage"></datatable-pager>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
user: {
columns: [
{ label: 'First Name', field: '', sortable: true },
{ label: 'Last Name', field: '', sortable: true },
{ label: 'National ID', field: '', sortable: true },
{ label: 'Date of Birth', field: '', sortable: true },
{ label: 'Activated', field: '', sortable: true },
],
rows: [],
page: 1,
perPage: 2,
},
};
},
methods: {
getData: (params, setRowData) => {
axios.get('/api/user', { params: params } ).then( function(res) {
setRowData(
res.data.data,
res.data.data.length,
);
}.bind(this));
}
}
};
</script>
I was expecting my CSS sorting classes to at least be applied on the table's headers...
So I have this datatable-pager
<datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager>
And the 'page' variable set up:
data() {
return {
page: 1,
per-page: 10
}
}
Whenever I set the 'page' variable to a different value from the code dynamically, like this for example:
this.page = 3;
The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn't change, it is still the data of the previous page.
Hello,
I'm having a few issues getting this component working in my app. Historically, I've never been able to include it via NPM (I've had to download the .zip release and import via the source files). It would seem as of version 1.7.0, I can't do either.
My app is based on Laravel + Vue and I am using Laravel Mix 4.0.0.
Here are my issues:
Installing via npm (npm install vuejs-datatable
), I import the component:
import DatatableFactory from 'vuejs-datatable'
Then add it to Vue:
Vue.use(DatatableFactory);
By default, I get a "Cannot read property 'use' of undefined" error in Google Chrome. I also get this if I import vuejs-datatable from the source files (i.e.: import DatatableFactory from './vendor/vue-datatable'
).
Per issue #50, I added the following to my webpack.mix.js file:
mix.webpackConfig({
resolve: {
alias: {
'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js'
}
}
})
After recompiling the JavaScript, everything works in Google Chrome. However, Internet Explorer throws the following error:
SCRIPT1003: Expected ':'
File: app.js, Line: 118095, Column: 719
Here's a screenshot of that line #:
Any thoughts if I'm doing something wrong, or if it's a bug?
Thanks
I have an Ajax table that I need to update programmatically when a select box is changed. How do I achieve this? As seen on the screen-shot below, I'm trying to call the tables onGetData function from the select box but cannot be able to pass the table's 'context'. Does this plugin have a 'reload table' event?
The source of the table's data depends on the option chosen on the select box
Hey, thanks for making this package available, it is outstanding. I am having an issue with sorting though.
html:
<datatable :columns="table_columns" :rows="filteredMembers" filterable paginate></datatable>
relevant js
data: function(){
return {
table_columns: [
{label: 'Company', field: 'company_name'},
{label: 'Contact', field: 'contact_firstName'},
{label: 'Anniversary', field: 'anniversary'},
{label: 'Email', field: 'contact_email'},
{label: 'Phone', field: 'contact_phoneNumber'},
],
}
},
computed: {
filteredMembers: function(){
... get member from vuex here
return _.sortBy(members, ['company_name'])
},
}
In my example, the sorting icons are appearing and change on click. However, the order of the rows does not change. I'm using vue 2.1
Thanks again for making this available.
In nuxt.config.js in the plugins array I try to add a plugin pstephan1187/vue-datatable (it uses ES6 syntax)
module.exports = { plugins: [ '~components/global', '~plugins/axios', '~plugins/datatable', ],
After this It works in Chrome but I get error in IE10, IE11 - Syntax error (class Settings { constructor() ...)
How can I import module with transform to ES2015.
In plugin I do
import Vue from 'vue'; import DatatableFactory from 'vuejs-datatable'; Vue.use(DatatableFactory);
hello.
I just run datatable with example.
everything go fine,
untill when I try to use datatable pager,
I read the website to add type to datatable-pager like this
<datatable-pager v-model="page" type="long" :per-page="per_page"></datatable-pager>
but it doesn't rend the pager like website, but just plain number
how can i fix it?
thanks
Hi guys,
i'm trying to use vuejs-datatable on my vujs project, but i h ave the error 'Error: Can't resolve 'object-path'
here is my code:
<datatable :columns="columns" :data="rows"></datatable>
import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'
Vue.use(DatatableFactory)
export default {
data () {
return {
table_columns: [
{label: 'id', field: 'id'},
{label: 'Username', field: 'user.username'},
{label: 'First Name', field: 'user.first_name'},
{label: 'Last Name', field: 'user.last_name'},
{label: 'Email', field: 'user.email'}
],
table_rows: [
{
'id': 1,
'user': {
'username': 'dprice0',
'first_name': 'Daniel',
'last_name': 'Price',
'email': '[email protected]'
},
'address': '3 Toban Park',
'city': 'Pocatello',
'state': 'Idaho'
}
]
}
},
Anyone has an idea on what can make this error ?
Thank you !
Is there anyway I can add a router link for data row?
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.