Add colvis to an existing button

Kalle504

Hello,

I would like to move the colvis button to an other button. Is sort of works, see picture. I would like to have the same layout as the search input, is it possible? See picture.

I have done an example that could be found here:
https://jsfiddle.net/zb6fj0p8/

Kalle

allan

Hi Kalie,

Do you mean reuse the dropdown from our colvis button triggered from your own custom button? I’m afraid that is not something that Buttons can do.

You’d need to build the downdrop yourself and then call the column().visible() method to toggle visibility as required.

Allan

Kalle504

Thanks Alan, do you know if there are any example how to build my own dropdown for the colvis functionality?

Kalle

allan

This example shows how toggle column visibility. For the dropdown, you might want to look at Bootstrap (or similar) which have built in widgets for that kind of thing.

Allan

Kalle504

Thanks Allan for the input!

I'm using this code at the moment:

var buttonsColvis = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'colvis',
text : 'Choose',
className: 'btn btn-outline-primary'
}
]
}).container().appendTo($('#idColumns'));

Together with:

I get the buton, but the w-100 does not not work (I'm busting bootstrap 4). I would like the button to resize.

Anybody know how to do that ?

colin

Styling is always hard without seeing it. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Kalle504

Hello Collin,

Sorry for the late response, here is an example: https://jsfiddle.net/2586wfb1/

Can I make the button to rezize with the container? W-100 does not seems to work. The button is always the same width as the text.

allan

Its a bit hacky, but this CSS will do it:

div.btn-group,
div.btn-group button {
  display: block;
  width: 100%;
}

Allan

Kalle504

Thanks Allan!