Cannot use the jQuery Datatables responsive plugin

[vibonacci]

Hi,

I'm passing responsive: true to my tables. However, the plugin is not triggered. Do I need to load it separately, and if so, how?

Thanks in advance

[noogen]

Note that the Master/Details implementation does not work well with responsive because it uses the same child table row, per my note here: https://github.com/niiknow/vue-datatables-net#responsive

As you're using the built-in responsive, remove the default containerClassname by setting it to empty as seen here on line 46 https://github.com/niiknow/vue-datatables-net/blob/master/example/responsive.vue#L46

Install the responsive plugin and the specific theme. Also remember to load the CSS because that's where the blue "plus" icon come from. I added the example https://github.com/niiknow/vue-datatables-net/blob/master/example/responsive.vue#L82

Line 82 and 83 load the plugin and specific theme, bootstrap4 theme in this case. Then line 91 load the css for it.

npm install --save-dev datatables.net-responsive datatables.net-responsive-bs4

See screenshot

Notice how the select-checkbox has conflict in the screenshot above. Simply move the index to position 2 - https://github.com/niiknow/vue-datatables-net/blob/master/example/responsive.vue#L45 to work with the built-in responsive. You would face the same issue with the built-in select-checkbox, explanation here - https://stackoverflow.com/questions/46281317/responsive-datatable-with-first-column-as-checkbox

This is through initial extensive testing and researched. That's why we implement our own select-checkbox and not recommend using the built-in responsive, back to my original note here: https://github.com/niiknow/vue-datatables-net#responsive

[vibonacci]

Thank you for the extensive explanation. We got it to work now and it works great.

1 tip for others: on the following page you can make a 'combined-module' so you do not need to load responsive plugin separately.

https://datatables.net/download/

I'll take this opportunity to thank you for making this wrapper. We love Vue and we love datatables.net. We always used datatables.net, but had troubles getting it to work after switching to Vue. Vue and jQ do not go well together naturally. Your wrapper solved this perfectly 🙂

[vibonacci]