Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Datatable fixed header not working
Hi, I am trying to create a fixed header datatable inside a card. All the js and css files from `gulp` is getting compiled to css and js of my project. But table is not getting fixed header in my page. Can you help me with that?
Replies (8)
Hi,
It seems in the documentation we showed the wrong code.
Please try to use the below code instead:
var status = {
1: {"title": "Pending", "state": "primary"},
2: {"title": "Delivered", "state": "danger"},
3: {"title": "Canceled", "state": "primary"},
4: {"title": "Success", "state": "success"},
5: {"title": "Info", "state": "info"},
6: {"title": "Danger", "state": "danger"},
7: {"title": "Warning", "state": "warning"},
};
$("#kt_datatable_fixed_header").DataTable({
"fixedHeader": {
"header":true
},
"columnDefs": [
{
// The `data` parameter refers to the data for the cell (defined by the
// `data` option, which defaults to the column being worked with, in
// this case `data: 0`.
"render": function ( data, type, row ) {
var index = KTUtil.getRandomInt(1, 7);
return data + "<span class="ms-2 badge badge-light-" + status[index]["state"] + " fw-bold">" + status[index]["title"] + "</span>";
},
"targets": 1
}
]
});We will update the docs shortly. If you need any further help please do let us know.
Regards.
Thanks, but still has the same problem.
I am using v8.1.8 too, and this is gulp.config.js file:
const gulpConfig = {
// ...
build: {
base: {...},
plugins: {
global: {
src: {
mandatory: {...},
optional: {
// Other plugins
datatables: {
styles: [
"{$config.path.node_modules}/datatables.net-bs5/css/dataTables.bootstrap5.css",
"{$config.path.node_modules}/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-select-bs5/css/select.bootstrap5.min.css",
"{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.css",
],
scripts: [
"{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
"{$config.path.node_modules}/datatables.net-bs5/js/dataTables.bootstrap5.js",
"{$config.path.src}/js/vendors/plugins/datatables.init.js",
"{$config.path.node_modules}/jszip/dist/jszip.min.js",
"{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
"{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
"{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
"{$config.path.node_modules}/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
"{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
"{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
"{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
"{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
"{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
"{$config.path.node_modules}/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
"{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
"{$config.path.node_modules}/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
"{$config.path.node_modules}/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
"{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
"{$config.path.node_modules}/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
"{$config.path.node_modules}/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
"{$config.path.node_modules}/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js",
"{$config.path.node_modules}/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
"{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.js",
"{$config.path.node_modules}/datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.js",
],
},
},
override: {
styles: ["{$config.path.src}/sass/plugins.scss"],
},
},
dist: {
styles: "{$config.dist}/plugins/plugins.bundle.css",
scripts: "{$config.dist}/plugins/plugins.bundle.js",
images: "{$config.dist}/plugins/images",
fonts: "{$config.dist}/plugins/fonts",
},
},
},
media: {...},
}
};Other datatable features working fine but I can not use fixed header.
Hi,
Can you provide your HTML and JS code of your datatable using dist.github.com ? We will debug your code on our end and let you know the result.
Regards.
I have so many custom codes and I can not share them.
I just downloaded demo1 html template again, and tried to make '/apps/customers/list.html' table fixed header. So I edited 'assets/js/custom/apps/customers/list/list.js' file and added ' fixedHeader: {header: true}' to DataTable options, and nothing changed.
I know is working fine in docs but can you try it in a demo like this table? thanks.
Hi,
Thank you for the clarification.
Sure, we will test it with the demos and will let you know the result shortly.
Regards.
Hi,
Please try to use "headerOffset": 70 to set offset to display the fixed table header under the fixed page header:
"fixedHeader": {
"header":true,
"headerOffset": 70
},Regards.
