Answers

• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  January 2021

  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 Posts: 16Questions: 5Answers: 0

  January 2021

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

  Kalle
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  January 2021

  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 Posts: 16Questions: 5Answers: 0

  January 2021

  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 Posts: 15,240Questions: 1Answers: 2,599

  January 2021

  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 Posts: 16Questions: 5Answers: 0

  February 2021

  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 Posts: 63,498Questions: 1Answers: 10,470 Site admin

  February 2021 Answer ✓

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

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

  Allan
• Kalle504 Posts: 16Questions: 5Answers: 0

  February 2021

  Thanks Allan!