Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table broken by hidden columns in a nested header #1433

Open
nezetic opened this issue Mar 7, 2024 · 0 comments
Open

Table broken by hidden columns in a nested header #1433

nezetic opened this issue Mar 7, 2024 · 0 comments

Comments

@nezetic
Copy link

nezetic commented Mar 7, 2024

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,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant