[Bug Report][3.10.5] VDataTable incorrect rowspan in nested headers #22210
Description
Environment
Vuetify Version: 3.10.5
Vue Version: 3.5.22
OS: Windows 10 (current), Linux, Mac OS, iOS, Android, Windows
Fixed Version
The issue is caused by incorrect rowspan and depth calculation in the parse() method of useHeaders.
The provided fixed version ensures proper row and column span handling for nested headers and correct cell placement within elements.
const { element: item, priority } = queue.dequeue()!;
const hasChildren =
Array.isArray(item.children) && item.children.length > 0;
const isGroup = hasChildren;
const depthRemaining = maxDepth - currentDepth;
row.push({
...item,
rowspan: isGroup ? 1 : Math.max(1, depthRemaining - getDepth(item)),
colspan: isGroup ? Math.max(1, extractLeaves(item).length) : 1,
});
if (isGroup && item.children) {
const nextRow = Math.floor(priority) + 1;
for (const child of item.children) {
const sort =
(priority % 1) + fraction / Math.pow(10, currentDepth + 2);
queue.enqueue(child, nextRow + sort);
}
}
Expected Behavior
The datatable should correctly calculate the rowspan and header depth for nested headers.
Each header cell should be inserted into the proper element according to its level in the header hierarchy.
Actual Behavior
The component calculates the rowspan and depth incorrectly.
Some header cells are inserted into the wrong elements, causing misaligned or broken multi-level headers.
Reproduction Link
https://play.vuetifyjs.com/#...
