Styling visible/invisible state of each column name, within Column Visibility pulldown

yahermann

Upon pressing the Column Visibility button, is there a way to style the column names?

More specifically, I'd like to change the styling such that a checkmark appears next to visible columns, and no checkmark next to invisible columns.

Wow -- amazing plugin!!

yahermann

Crickets :-)

I spent a bit of time working on this, thought I'd post the following CSS, which will change the styling of the Column Visibility button dropdown to checkmarks next to columns that are visible. I think this approach has much higher usability than the out-of-the-box default.

This CSS also adds a pointer cursor to each option.

Note, this is intended for use with the Bootstrap styling. I haven't tested it with the other options.

<style>
   li.buttons-columnVisibility a { 
       cursor:pointer; 
       }
   li.buttons-columnVisibility.active a { 
       background-color:transparent; 
       color:inherit;  
       }
   li.buttons-columnVisibility.active a:hover { 
       background-color:#f5f5f5; 
       color:inherit; 
       }
   li.buttons-columnVisibility a:before { 
       width:25px; 
       font-family:"Glyphicons Halflings"; 
       content:"\e013"; 
       color:transparent; 
       padding-right:10px; 
       }
   li.buttons-columnVisibility.active a:before { 
       color:inherit; 
       }
</style>

Hopefully this will be useful to others.

Thanks again for building such a useful plugin!