gridjs icon indicating copy to clipboard operation
gridjs copied to clipboard

Table broken by hidden columns in a nested header

Open nezetic opened this issue 1 year ago • 0 comments

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

Screenshot 2024-03-07 143411

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,

nezetic avatar Mar 07 '24 13:03 nezetic