Loading local data

[pututbawono]

Is it possible to use this wrapper to load local data, namely data from a v-model ? I want to display the selected options from a multiselect element in a table. I know it can be done using standard bootstrap table, but I need the ease of DataTables features like search, pagination, filter, etc. I see this wrapper has a prop that I think can be used (the dataLoader parameter), but it's said it hasn't been tested. Please help, thanks.

[ejohmac]

I'm looking for something similar - simple client-side loading of data into the data tables component through a prop? I've looked through the docs and examples but they all seem to mention server-side processing.

Many thanks

[noogen]

Old documentation as it wasn't originally planned, but I've used it in several projects and it works fine. You simply bind a function that call the callback (parameter) method to return array of items. Example:

:data-loader="yourFunction"

methods:{
  yourFunction(callback) {
     const that = this
     const itemsArray = that.model.children
     callback(itemsArray)
  }
}

@ejohmac To answer your question, I think the hardest problem people trying to solve is the server-side loading. Client-side rendering of local data is easy because there are 100+ other Vue table components out there to help render local data. Some people might find it easier to simply use v-for to render it themselves. As such, even though the component works fine with local data from the very start, the documentation were never updated to encourage people to explore other options.

When we start building this component, we use bootstrap-vue b-table mixed in some projects to render local data. We've since migrated all of our internal use to bootstrap-vue b-table and created a new component https://github.com/niiknow/bvtnet-items-provider to support our datatable.net server-side endpoints.

[pututbawono]

@noogen, So for example, if my v-model parameter is myChoices (which is already an array) and I've already defined it in the data() method of my component, all I have to do is callback(this.myChoices)? Do I have to define callback itself?

[noogen]

The component expect that you pass in a method that accept 1 parameter that is a function. So the answer is yes, callback is whatever you call as first parameter of the dataLoader method. Let say your dataLoader method is called someMethod(), then you would define it like so:

someMethod(cb) {
  // since you already define myChoices in data(), simply return it here
  cb(this.myChoices)
}

[pututbawono]

So after a lof of mix-ups, here's what I got in my code :

// in <vdtnet-table> tag :
:dataLoader="loaderGroupAlat"

// in method() part of the Vue : 
loaderGroupAlat (cb) {
    cb(this.groupAlat)
}

this.groupAlat is a v-model parameter from multiselect box and it's an array of objects, defined in the return {} part data() as groupAlat: []. This doesn't work, and I got an error message Error in mounted hook: "TypeError: Cannot read property 'style' of undefined". What did I do wrong?

[noogen]

It should be.

:data-loader="loaderGroupAlat"

"camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents". See VueJS ref here: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

Also, that error is something else. You have bad html somewhere relating to a component that has "style" attribute definition.

[pututbawono]

I've used vdtnet-table on usual server-side scripting and using camelCase, but there's no error regarding that. If I remove the :data-loader prop from the vdtnet tag, the error message is gone. I'm sure I don't use style attribute anywhere on the page. Also, on mounted phase, there's nothing showing on the table even though this.groupAlat has values in it. But when I change the selection in multiselect element, the table shows the data. I think it has something to do with the error message I mentioned before.

[ejohmac]

Thanks @noogen I'll check out that table. Appreciate the reply

[noogen]

Stale issue.