DataTable fixed columns with complex headers not working as expected
Hello,
I am trying to use a combination of fixed columns and complex headers as seen in the link below:
https://datatables.net/extensions/fixedcolumns/examples/initialisation/complex-header.html
However, when I try to adapt the table and associated javascript with this, it does not work (using Django backend). It seems the packages may be outdated, but when I updated them with npm all references to data tables broke. Web development isn't my specialty, is there any way to get this to work or will I have to wait for a new Metronic release?
Thank you!
Replies (4)
Hi
Apologize for the delay. It seems like the issue might be related to the complex headers structure causing conflicts with DataTables' fixed columns feature. Here are a few suggestions to troubleshoot and potentially resolve the issue:
Ensure that the HTML structure of the table, including the complex headers, is correctly formed and does not contain any errors or overlapping elements.
Temporarily remove the fixed columns feature (fixedColumns: { left: 4 }) from the DataTable initialization code and see if the issue persists. This will help determine if the problem is related to fixed columns or complex headers.
Ensure that you are using the latest version of the DataTables library. Sometimes, updates include bug fixes and improvements that address issues with complex table structures.
Hello,
I have copied the exact code/HTML structure from the documentation where it works as expected:
https://datatables.net/extensions/fixedcolumns/examples/initialisation/complex-header.html
I have tried with and without the fixedColumns, it does not work. When I update to the latest version of the DataTables library, it results in breaking changes to the template. Here are the previous versions included with the purchase:
"datatables.net": "^1.13.8",
"datatables.net-bs5": "^1.13.8",
"datatables.net-buttons": "^2.4.2",
"datatables.net-buttons-bs5": "^2.4.2",
"datatables.net-colreorder": "^1.7.0",
"datatables.net-colreorder-bs5": "^1.7.0",
"datatables.net-datetime": "^1.5.0",
"datatables.net-fixedcolumns": "^4.3.0",
"datatables.net-fixedcolumns-bs5": "^4.3.0",
"datatables.net-fixedheader": "^3.4.0",
"datatables.net-fixedheader-bs5": "^3.4.0",
"datatables.net-plugins": "^1.13.6",
"datatables.net-responsive": "^2.5.0",
"datatables.net-responsive-bs5": "^2.5.0",
"datatables.net-rowgroup": "^1.4.1",
"datatables.net-rowgroup-bs5": "^1.4.1",
"datatables.net-rowreorder": "^1.4.1",
"datatables.net-rowreorder-bs5": "^1.4.1",
"datatables.net-scroller": "^2.3.0",
"datatables.net-scroller-bs5": "^2.3.0",
"datatables.net-select": "^1.7.0",
"datatables.net-select-bs5": "^1.7.0",I have tried many different combinations, but here is with every related package up to date:
"datatables.net": "^2.0.0",
"datatables.net-bs5": "^2.0.0",
"datatables.net-buttons": "^3.0.0",
"datatables.net-buttons-bs5": "^3.0.0",
"datatables.net-colreorder": "^2.0.0",
"datatables.net-colreorder-bs5": "^2.0.0",
"datatables.net-datetime": "^1.5.2",
"datatables.net-fixedcolumns": "^5.0.0",
"datatables.net-fixedcolumns-bs5": "^5.0.0",
"datatables.net-fixedheader": "^4.0.0",
"datatables.net-fixedheader-bs5": "^4.0.0",
"datatables.net-plugins": "^1.13.6",
"datatables.net-responsive": "^3.0.0",
"datatables.net-responsive-bs5": "^3.0.0",
"datatables.net-rowgroup": "^1.5.0",
"datatables.net-rowgroup-bs5": "^1.5.0",
"datatables.net-rowreorder": "^1.5.0",
"datatables.net-rowreorder-bs5": "^1.5.0",
"datatables.net-scroller": "^2.4.0",
"datatables.net-scroller-bs5": "^2.4.0",
"datatables.net-select": "^2.0.0",
"datatables.net-select-bs5": "^2.0.0",When I have this updated, the scrollY no longer works and the pagination disappears. Can you please help with this? The template seems to be outdated, would love to know if you are able to replicate the documentation in the provided link with the template in its current form.
Hi,
Could you please provide the specific error message or any other details you've encountered while trying to adapt the table with complex headers? With more information, we can better understand the issue and provide you with a solution or further guidance.
Thank you
Hello,
Thank you for the response.
I have the following html table headers that work as expected with the first four fixed columns and xy scrolling functionality:
<img src="https://drive.google.com/file/d/1r4cjB99v3oFRyhEXnm1BTdZHwdkIueu-/view?usp=sharing" />
This is with simple column headers, only 1 row.
The associated javascript for this datatable is this:
const initDatatable = () => {
// Initialize DataTable with fixed columns
$(table).DataTable({
scrollY: "55vh",
scrollX: true,
scrollCollapse: true,
"ordering": false,
fixedColumns: {
left: 4
}
});
}However when I add complex headers using the html below:
<tr
class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-200">
<th rowspan="2" class="min-w-150px">col-1</th>
<th rowspan="2" class="min-w-150px">col-2</th>
<th colspan="2" class="min-w-300px">col-3</th>
<th colspan="5" class="min-w-450px">col-4</th>
<th colspan="5" class="min-w-450px">col-5</th>
<th colspan="5" class="min-w-450px">col-6</th>
</tr>
<tr
class="fw-semibold fs-6 text-gray-800 border-bottom border-gray-200">
<th class="min-w-150px">col-3.1</th>
<th class="min-w-150px">col-3.2</th>
<th colspan="2" class="min-w-150px">col-4.1</th>
<th colspan="2" class="min-w-150px">col-4.2</th>
<th class="min-w-150px">col-4.3</th>
<th colspan="2" class="min-w-150px">col-5.1</th>
<th colspan="2" class="min-w-150px">col-5.2</th>
<th class="min-w-150px">col-5.3</th>
<th colspan="2" class="min-w-150px">col-6.1</th>
<th colspan="2" class="min-w-150px">col-6.2</th>
<th class="min-w-150px">col-6.3</th>
</tr>The table now bunches all of the numbers together, is no longer able to scroll horizontally, and the pagination disappears:
<img src="/Users/jcavanaugh/Desktop/Screenshot 2024-02-19 at 4.22.42 PM.png" />
When I click on the select number of entries on the bottom left, the pagination returns and I am able to scroll horizontally again, but the fixed columns are lost and a duplicate header shows up (that moves with the vertical scrolling)
<img src="/Users/jcavanaugh/Desktop/Screenshot 2024-02-19 at 4.24.47 PM.png" />
Any ideas what could be happening here would be greatly appreciated as I would love to have both fixed column scrolling with complex header functionality.
Thank you!
