Bootstrap 4 compatibility

[DSpeichert]

After struggling with the HeaderSettings component (the settings drop down was not opening), I realized this component depends on Bootstrap 3.

With Bootstrap 4, it is not opening the drop down without data-toggle="dropdown" on the button, and then with it, it's not opening the nested drop-down (for Save), it just closes the drop down completely. I'm quite sure that Bootstrap 4 does not support nested drop-downs.

[kenberkeley]

So, it seems that I have to revert this PR?
#62

[DSpeichert]

I don't think that one is related.

I fixed opening the settings drop down on this line:

vue2-datatable/src/HeaderSettings/index.vue

Line 3 in b076f1b

<button class="btn btn-default dropdown-toggle" ref="dropdownBtn" type="button">

(adding data-toggle="dropdown")

But then this one is broken, since it is nested:

vue2-datatable/src/HeaderSettings/index.vue

Line 20 in b076f1b

<button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button" style="box-shadow: none">

[kenberkeley]

well... so it does not support BS4 actually...

[DSpeichert]

No, in fact it doesn't. I'm not sure it's quite possible to support both BS3 and BS4 at the same time.
I'd recommend at least making it clear in the documentation for now that it specifically needs BS3.

[kenberkeley]

ok i will correct it tomorrow

[chadidi]

@kenberkeley Can you guys add support to BS4 ASAP, I know you can't support both BS3 and BS4 but you can make a branch for BS3 and the master for the latest bootstrap version.

Thanks

[kenberkeley]

#116

[kenberkeley]

I not longer work for OneWay so you guys might have to on your own...

[chadidi]

Thanks for quick answer @kenberkeley. Who is the manager of the repository currently that can help us add BS4 support? or this repo is abandoned?

[kenberkeley]

I was the leader when in OneWay, now I left so nobody could handle... I am confident of this repo with BS3 so I will keep maintain it. In terms of BS4 compability, I hope you guys can help

[chadidi]

@kenberkeley OK I will try to do a pull request this weekend.

[vrajroham]

I managed to solve this by the following tweak, but applydropdown stopped working.

 // Added when table is rendered with little timeout
 $('div[name=HeaderSettings]').children('button[class*=dropdown-toggle]')[0].setAttribute('data-toggle','dropdown');

[victorhramos]

Adding to this subject, this component doesnt support bootstrap 4 tabs.
If you use inside tabs tdComp and thComp wont work.

Look the difference