Coder Social home page Coder Social logo

gerkindev / vuejs-datatable Goto Github PK

View Code? Open in Web Editor NEW
173.0 12.0 45.0 3.73 MB

A Vue.js component for filterable and paginated tables.

Home Page: https://gerkindev.github.io/vuejs-datatable/

License: MIT License

JavaScript 5.55% Vue 0.30% TypeScript 90.68% CSS 1.15% HTML 2.31%
vue-components table datatable vuejs filtering sorting pagination

vuejs-datatable's Issues

Duplicate presence of slot "default"

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.

Dependency 'object-path' not found

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!

Bug sort by "RepresentedAs"

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.

Probleme with customizing table with IIFE build

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

Error "Cannot read property 'use' of undefined"

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?

Importe pre-compiled ES5 version

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

No default table class

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>

Error in Production

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!

Added vuejs-datatable to nuxt, shows only table colums and rows in text

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:

image

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.

Emit event?

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?

icons

The icons aren't appearing for me. Do I need to install them separately?

Moment.js support?

Is there a way to sort the columns using Moment.js localizations (specifically with date formats)?
Thanks for the great job so far.

link outside of component

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?

Weird "Vue is not defined" error ...

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>

Compatibility

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 ! :)

Custom style for th elements

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.

"Scope" attribute in custom template

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.

Error when running tests with karma and phantomjs

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.

ajaxtable-pager not working

Hi,
I am using ajaxtable and ajaxtable-pager,here table display working properly but pagination not showing

Replace laravel-mix with more specific build tools

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!

Sorting Not working on Column Change

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.

How to set a default sort column?

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.

Vue is not defined error

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

Cannot read property 'use' of undefined

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)

AJAX METHOD SORT AND FILTER PROBLEM

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));
  }
  }

`

Cannot get sorting to work when source of table data is Ajax

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>

image

I was expecting my CSS sorting classes to at least be applied on the table's headers...

image

Dynamically setting the page variable for a datatable-pager only changes the UI

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.

IE11: SCRIPT1003: Expected ':'

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 #:

screen shot 2019-01-08 at 2 26 06 pm

Any thoughts if I'm doing something wrong, or if it's a bug?

Thanks

How to programatically call table's getData function to reload table

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?

image

The source of the table's data depends on the option chosen on the select box
image

I can't get sorting to work

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.

Nuxt plugin - Syntax error (class Settings { constructor() ...)

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);

pager style is not working

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

image

how can i fix it?

thanks

Error: Can't resolve 'object-path'

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 !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.