fix: fix colspan prop to use column visibility

Fixes #1555

src/hooks/useTable.js

@@ -246,7 +246,7 @@ export const useTable = (props, ...plugins) => {
       mergeProps(
         {
           key: ['header', column.id].join('_'),
-          colSpan: column.totalHeaderCount,
+          colSpan: column.totalVisibleHeaderCount,
         },
         applyPropHooks(
           instanceRef.current.hooks.getHeaderProps,

src/utils.js

@@ -182,14 +182,27 @@ export function determineHeaderVisibility(instance) {
         : !!column.show
       : false
 
+    let totalVisibleHeaderCount = 0
+
     if (column.headers && column.headers.length) {
-      column.headers.forEach(subColumn =>
-        handleColumn(subColumn, column.isVisible)
+      column.headers.forEach(
+        subColumn =>
+          (totalVisibleHeaderCount += handleColumn(subColumn, column.isVisible))
       )
+    } else {
+      totalVisibleHeaderCount = column.isVisible ? 1 : 0
     }
+
+    column.totalVisibleHeaderCount = totalVisibleHeaderCount
+
+    return totalVisibleHeaderCount
   }
 
-  headers.forEach(subHeader => handleColumn(subHeader, true))
+  let totalVisibleHeaderCount = 0
+
+  headers.forEach(
+    subHeader => (totalVisibleHeaderCount += handleColumn(subHeader, true))
+  )
 }
 
 export function getBy(obj, path, def) {