Probleme with customizing table with IIFE build

[amonmoce]

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

[GerkinDev]

Hi,

Are you sure you loaded vuejs-datatable script before trying to init it? Can you post a minimal reproduction code ?

Cheers

[amonmoce]

This is what I have, straight from the documentation.

I have an index.html file where I have the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js" defer></script> <script src="node_modules/vuejs-datatable/dist/vuejs-datatable.js" defer></script> <script src="js/vue_app.js" defer></script>

And then in the vue_app.js, I have the following code:

VuejsDatatable
.registerTableType( 'datatable', tableType => {
tableType.mergeSettings( {
table: {
class: 'table table-hover table-striped',
sorting: {
sortNone: '',
sortAsc: '',
sortDesc: '',
},
},
pager: {
classes: {
pager: 'pagination text-center',
selected: 'active',
},
icons: {
previous: '',
next: '',
},
},
} );
} );

const app = new Vue({
el: '#app',
data: {
columns: [
{label: 'id', field: 'id'},
{label: 'Username', field: 'user.username', headerClass: 'class-in-header second-class'},
{label: 'First Name', field: 'user.first_name'},
{label: 'Last Name', field: 'user.last_name'},
{label: 'Email', field: 'user.email'},
{label: 'address', representedAs: ({address, city, state}) => ${address}<br />${city}, ${state}, > interpolate: true}
],
rows: [
//...
{
"id": 1,
"user": {
"username": "dprice0",
"first_name": "Daniel",
"last_name": "Price",
"email": "dprice0@blogs.com"
},
"address": "3 Toban Park",
"city": "Pocatello",
"state": "Idaho"
},
{
"id": 2,
"user": {
"username": "manoa",
"first_name": "Fidel",
"last_name": "Cout",
"email": "manoa@blogs.com"
},
"address": "3 Silicon Valley Park",
"city": "Pocatello",
"state": "Idaho"
}
//...
]
}
})

[cfdroguettr]

I have the same problem as @amonmoce For me the console return this Cannot read property 'registerTableType' of undefined But DatatableFactory work's when i don't try custom the table.

import indicadores from './components/informes/indicadores.vue'
import informesPagos from './components/informes/pagos.vue'
import informesMensajes from './components/informes/mensajes.vue'

import DatatableFactory from 'vuejs-datatable';

DatatableFactory.registerTableType('datatable', tableType => {
    tableType.mergeSettings( {
        table: {
            class: 'table',
            sorting: {
                sortNone: '<i class="fa fa-arrows-v"></i>',
                sortAsc: '<i class="fa fa-long-arrow-up"></i>',
                sortDesc: '<i class="fa fa-long-arrow-down"></i>'
            }
        },
        pager: {
            classes: {
                pager: 'pagination text-center',
                selected: 'active'
            },
            icons: {
                previous: '<i class="fa fa-angle-left"></i>',
                next: '<i class="fa fa-angle-right"></i>'
            }
        }
    })
})

Vue.use(DatatableFactory);

import './filters'
import './mixins'

var app = new Vue({
    el: '#app',
    components: {
        indicadores,
        informesPagos,
        informesMensajes
    }
})

[cfdroguettr]

I have managed to solve the problem to a certain extent by changing from

import DatatableFactory from 'vuejs-datatable'

to

import DatatableFactory from 'vuejs-datatable/dist/vuejs-datatable.esm'

I also tried using v2.0.0-alpha.1 and DatatableFactory.registerTableType it worked without problems but I had problems with the filters (they do not work) and the format of the pagination (it is not natively compatible with bootstrap)

[GerkinDev]

@cfdroguettr actually, the section about extra configuration for Webpack/Rollup is missing from the documentation of the upcoming 2.x version, that I'll address ASAP. Thank you for pointing it out.

@amonmoce can you confirm me which version you're using ?

[GerkinDev]

@cfdroguettr I've checked the 2.0, no bundlers documentation is needed since the inclusion problem was fixed between v1.x & v2.x. The v2.0 is fully configurable and does not embed any compatibility with any CSS framework by default. Could you please open an issue for the sorting problem you encountered ?

Cheers

[GerkinDev]

Closing because the issue is too old to be still relevant (seeing the release of v2.0.0-alpha.2) & no activity was made