Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Datatables Colvis classes
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.
Replies (1)
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");
});
});This script does the following:
Initializes the DataTable with the colvis button included in the buttons array.
Adds a custom my-colvis-button class to the colvis button.
Uses the action callback to toggle the dt-button-active class when the button is clicked.
You can also add CSS to style the dt-button-active class as needed:
.dt-button-active {
background-color: #d9d9d9; /* Example style */
}Let me know if you need further assistance!
