Metronic DataTables not working with new layout option
I am using the latest version of Metronic 8.2.5 with DataTables Bootstrap 5 styling. However Metronic does not seem to respect the new layout option provided by Datatables.
For example when I initialize my table with below code but Metronic always keeps it's own layout format with dom elems positioned at the bottom of the table.
return new DataTable("#tableId", {
layout: {
topStart: {
pageLength: {
menu: [10, 25, 50, 100]
}
},
topEnd: {
search: {
placeholder: "Type search here"
}
},
bottomEnd: {
paging: {
numbers: 3
}
}
}
});Replies (4)
Hi,
Can you disable or override the dom parameter in your Datatable js initialization code?
By default, Metronic uses it in the global datatable setup in src/js/vendors/plugins/datatables.init.js.
Regards.
Hi @Sean
Thanks for the reply. That would work but I want to avoid hacking the source files so for now I have used the old style dom positioning in my own custo js file.
options.dom =
"<"d-flex justify-content-between bg-light-primary px-3 py-2"" +
"<"d-flex align-items-center"l>" +
"<"d-flex align-items-center"B>" +
"<"d-flex align-items-center"f>" +
">" +
"<"table-responsive"tr>" +
"<"d-flex justify-content-between px-3"" +
"<"d-flex align-items-center"i>" +
"<"d-flex align-items-center"p>" +
">";I hope that Metronic updates their code base soon to respect datatables new layout options.
Thanks
Hi,
That's a great workaround. Sure, we will migrate those code parts in a future update.
Regards.
Hey Sean,
I was dealing the same issue for the last few days. I also upgraded to the latest version 8.2.6 today but still layout not working. Legacy dom works. Did you make the changes here?
Is there any other missing feature for the datatables integration that we should know?
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
