gridjs
gridjs copied to clipboard
Table broken by hidden columns in a nested header
Describe the bug
Table is broken when columns are hidden in a nested header.
Computed colspan values are not taking into account the "hidden" attribute of columns.
To Reproduce
const grid = new Grid({
sort: true,
columns: [
{
name: 'Name',
columns: [{
name: 'First',
hidden: true // <- hidden is used in nested header
}, {
name: 'Last'
}]
},
'Email',
],
data: Array(5).fill().map(x => [
faker.name.firstName(),
faker.name.lastName(),
faker.internet.email(),
])
});
Screenshots
Expected behavior
The colspan value should ignore hidden columns.
diff --git a/src/util/table.ts b/src/util/table.ts
index e3a8e47..96d7c39 100644
--- a/src/util/table.ts
+++ b/src/util/table.ts
@@ -9,7 +9,7 @@ export function calculateRowColSpans(
const depth = Header.maximumDepth(column);
const remainingRows = totalRows - rowIndex;
const rowSpan = Math.floor(remainingRows - depth - depth / remainingRows);
- const colSpan = (column.columns && column.columns.length) || 1;
+ const colSpan = (column.columns && column.columns.filter(v => !v.hidden).length) || 1;
return {
rowSpan: rowSpan,