Custom Column Picker

cersos

When using 1.10.18 with bootstrap 4 and the Buttons: Column visibility button, is it possible to have a custom display of the available columns, or as a last resort style it into multiple columns?

When there is a large number of columns to chose from, the list goes off the screen and can't be clicked on.

Steve

colin

Hi @cersos ,

This example here shows two-column layout, which may be good for you,

Cheers,

Colin

cersos

Thanks for the response @colin.

Unfortunately that does not work when using bootstrap 4. It seems to just ignore it and put them in a single column anyways.

Steve

cersos

Just in case anyone stumbles on this and might find a bootstrap modal Column Picker useful:

    buttons: [{
     text: 'Columns',
     action: function() {
      var n = 0,
          max = 4, // gives 4 buttons across
          modal = '',
          buttons = '<div class=container-fluid><div class=row>';
      DT.columns().header().each(function(e,i) {
       var col = jQuery(e).html(),
           visible = jQuery(e).is(':visible');
       if (i) { // assumes column 0 is a responsive control column
        buttons += '<input type=button columnIndex='+i+' value="'+col+'" class="col-'+(max-1)+' btn-sm columnPicker btn-'+(visible ? 'primary' : 'secondary')+'" />';
        if (n == (max-1)) {
         buttons += '</div><div class=row>';
         n = 0;
        } else
         n += 1;
       }
      });
      if (n)
       buttons += '</div>';
      buttons += '</div>';
      modal = '\
       <div id=columnPickerModal class="modal-dialog modal-dialog-centered" role=document>\
        <div class=modal-content>\
         <div class=modal-header>\
          <h5 class=modal-title id=columnPickerTitle>Column Picker</h5>\
          <button type=button class=close data-dismiss=modal aria-label=Close>\
           <span aria-hidden=true>&times;</span>\
          </button>\
         </div>\
         <div id=columnPickerBody class=modal-body>'+buttons+'</div>\
         <div class=modal-footer>\
          <button type=button class="btn btn-secondary" data-dismiss=modal>Close</button>\
         </div>\
        </div>\
       </div>\
      ';
      jQuery('<div/>')
       .addClass('modal')
       .attr('tabindex','-1')
       .attr('role','dialog')
       .attr('aria-labelledby','columnPickerTitle')
       .attr('aria-hidden','true')
       .html(modal)
       .appendTo('body')
       .modal()
       .on('hidden.bs.modal',function () {
        jQuery(this)
         .modal('dispose')
         .remove();
       });
      jQuery('.columnPicker').on('click',function() {
       var i = jQuery(this).attr('columnIndex');
       DT.column(i).visible(!DT.column(i).visible()).draw()
       if (jQuery(this).hasClass('btn-primary'))
        jQuery(this).removeClass('btn-primary').addClass('btn-secondary');
       else
        jQuery(this).removeClass('btn-secondary').addClass('btn-primary');
      });
     }
    }]