Hey Sean,
I'm adding colvis as part of buttons with this configuration:
buttons: [
'copy', 'excel', 'pdf', 'colvis'
],
https://ibb.co/D4Pc9V0
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.
https://datatables.net/extensions/buttons/examples/column_visibility/simple.html
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 */
}