New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
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!
