Hey Sean,
I'm adding colvis as part of buttons with this configuration:
buttons: [
'copy', 'excel', 'pdf', 'colvis'
],
Could you add necessary options for dt-button-active class to make it work properly? Any workaround class definition until fix would be great.
See the original behavior here. It was part of the old keen as well.
Hi Mete,
You can modify your DataTables configuration like this:
Add a custom class to the colvis button.
Use the buttons.buttons.action callback to add/remove the dt-button-active class.
$(document).ready(function() {
var table = $("#example").DataTable({
dom: "Bfrtip",
buttons: [
"copy", "excel", "pdf",
{
extend: "colvis",
text: "Column visibility",
className: "my-colvis-button",
action: function(e, dt, button, config) {
// Toggle visibility
$.fn.dataTable.ext.buttons.collection.action.call(this, e, dt, button, config);
// Add/remove active class
if ($(button).hasClass("dt-button-active")) {
$(button).removeClass("dt-button-active");
} else {
$(button).addClass("dt-button-active");
}
}
}
]
});
// Add custom styles for active class if needed
$(".my-colvis-button").on("click", function() {
$(this).toggleClass("dt-button-active");
});
});
.dt-button-active {
background-color: #d9d9d9; /* Example style */
}