[Question] Use custom jsx template

[eirabben]

In vue-tables (Vue 1.x version), there was an option to use a custom template for displaying the table:

Vue.use(VueTables.client, {
    template: require('./mytemplate.html')
});

I haven't been able to find a way of doing this in the new version (I tried doing it the same way, and copying the template.jsx and template-folder, but no luck). Is there any way of doing this? If not, any plans to implement it?

I guess I could change the line where the template is required inside the plugin, but it would be erased if the plugin is updated. I am using Bootstrap 4, so it would be nice not having to include old bootstrap stuff.

[matfish2]

No plan to include this option in this version. However, You are welcome to modify the template to fit Bootstrap 4 and send a PR.

[pmartelletti]

@matfish2 any reason for not giving this flexibility of a custom template anymore? thanks.

[pmartelletti]

@matfish2 I was thinking of the following:

Vue.use(VueTables.server, {
    responseAdapter: function(resp) {
        return {
            data: resp.data,
            count: resp.meta.pagination.total
        }
    },
    render: require('./tables/template.jsx')
});

If you're interested on this, I can create a PR. But if you have a valid reason for not supporting this feature, I'll keep it in my own fork.

Cheers,

[zegikniet]

@pmartelletti I'm interested in this aswell

[pmartelletti]

@zegikniet it all depends in @matfish2 has a good reason or not to exclude it.

[matfish2]

I've added an option to pass a custom template as the fourth argument to Vue.use. See readme file.

[pmartelletti]

@matfish2 awesome - thanks.

[vesper8]

@pmartelletti @matfish2

I'm having trouble using this. I copied the template.jsx and the templates folder copied it to my own app folder.

I'm initializing with this

Vue.use(VueTables.client, [], false, './template.jsx');

My table renders fine with just

Vue.use(VueTables.client);

template.jsx and the templates folder are in the same folder as the component

and then I get these errors in my console

vue.runtime.common.js?d43f:521 [Vue warn]: Error when rendering component <client-table>: 

vue.runtime.common.js?d43f:435 TypeError: render.call is not a function
    at VueComponent.Vue._render (eval at <anonymous> (app.js:594), <anonymous>:3096:22)
    at VueComponent.eval (eval at <anonymous> (app.js:594), <anonymous>:2464:21)
    at Watcher.get (eval at <anonymous> (app.js:594), <anonymous>:1661:27)
    at new Watcher (eval at <anonymous> (app.js:594), <anonymous>:1653:12)
    at VueComponent.Vue._mount (eval at <anonymous> (app.js:594), <anonymous>:2463:19)
    at VueComponent.Vue$2.$mount (eval at <anonymous> (app.js:594), <anonymous>:6106:15)
    at init (eval at <anonymous> (app.js:594), <anonymous>:2777:11)
    at createComponent (eval at <anonymous> (app.js:594), <anonymous>:4122:9)
    at createElm (eval at <anonymous> (app.js:594), <anonymous>:4065:9)
    at createChildren (eval at <anonymous> (app.js:594), <anonymous>:4173:9)

Haven't made any modifications to the templates yet, just trying to get it to load it from my own folders before I make any changes.

Any help appreciated!

[pmartelletti]

@vesper8 what does your template.jsx looks like? Most probably, you forgot to change the import dirs.

[vesper8]

@pmartelletti

it's literally a copy/paste from the package's files. But since I also copied the template folder that contains all the templates referenced in the .jsx then I don't think it's that

module.exports = function(source) {
return function(h) {

var rows = require('./template/rows.jsx')(h, this)
var normalFilter = require('./template/normal-filter.jsx')(h, this)
var dropdownPagination = require('./template/dropdown-pagination.jsx')(h, this)
var columnFilters = require('./template/column-filters.jsx')(h, this);
var footerHeadings = require('./template/footer-headings.jsx')(h, this);
var noResults = require('./template/no-results.jsx')(h, this);
var pagination = require('./template/pagination.jsx')(h, this);
var dropdownPaginationCount = require('./template/dropdown-pagination-count.jsx')(h, this);
var headings = require('./template/headings.jsx')(h, this);
var perPage = require('./template/per-page.jsx')(h, this);

return <div class={"VueTables VueTables--" + this.source}>
  <div class="row">
    <div class="col-md-6">
      {normalFilter}
    </div>
    <div class="col-md-6">
      {dropdownPagination}
      {perPage}
    </div>
  </div>
  <table class={'VueTables__table table ' + this.opts.skin}>
    <thead>
      <tr>
        {headings}
      </tr>
      {columnFilters}
    </thead>
    {footerHeadings}
    <tbody>
      {noResults}
      {rows}
    </tbody>
  </table>
  {pagination}
  {dropdownPaginationCount}
</div>
}
}

Perhaps one of those referenced template files references something else that is out of scope. Is that the problem you think?

The instructions say to just copy the jsx to your own app folder. And the main template.jsx doesn't include much.. if you want to do customizations it's going to be inside some of those reference files inside the template sub-folder so that's why I copied them too.

[pmartelletti]

@vesper8 yep, that's my guess. I had to import thos templates like:

        var rows = require('vue-tables-2/lib/template/rows.jsx')(h, this)
        var normalFilter = require('vue-tables-2/lib/template/normal-filter.jsx')(h, this)
        var dropdownPagination = require('vue-tables-2/lib/template/dropdown-pagination.jsx')(h, this)
        var columnFilters = require('./columnFilters.jsx')(h, this);
        var footerHeadings = require('vue-tables-2/lib/template/footer-headings.jsx')(h, this);
        var noResults = require('vue-tables-2/lib/template/no-results.jsx')(h, this);
        var pagination = require('vue-tables-2/lib/template/pagination.jsx')(h, this);
        var dropdownPaginationCount = require('vue-tables-2/lib/template/dropdown-pagination-count.jsx')(h, this);
        var headings = require('vue-tables-2/lib/template/headings.jsx')(h, this);

note that column filters is a custom template, but if not, I'm just calling the ones from the package (instead of just copy-pasting the whole directory into my project).

[vertoo]

@vesper8 I had same issue. This is solution:

var VueTables = require('vue-tables-2');
var custom_template = require('./custom_template.jsx');
Vue.use(VueTables.server, {},
    false,
    custom_template('server')); // OR custom_template('client')

In your custom template you can load just child templates like @pmartelletti.

[vesper8]

@vertoo

Thank you so much! That works!

@pmartelletti

Thanks! That's useful to know!

[giraz82]

Thank you @vertoo, this is exactly the hint I was searching.