From ccabbbbd172a831937ba00e56aff438c3eb43627 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Wed, 25 Mar 2026 15:49:20 -0600
Subject: [PATCH] updating the colSpan in the custom element to be set based on
 the number of columns in the table so that it spans the full table without
 compressing the column below

---
 src/common/ResponsiveTable.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index e3afd3f..af03c5b 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -235,6 +235,11 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     localStorage.setItem(filterKey, JSON.stringify(filterList));
   }, [filterList])
 
+  const headerColSpan =
+    (columns?.length ?? ((rows?.[0] && Object.keys(rows[0]).length) || 0)) +
+    (rowSelect ? 1 : 0) +
+    (renderGutter ? 1 : 0);
+
   const openColumnMenu = (event: any) => {
     setColumnAnchor(event.currentTarget);
     // setUserMenuIsOpen(true);
@@ -614,7 +619,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
         <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
           {customElement && 
             <TableRow>
-              <TableCell colSpan={11} sx={{ border: "none" }}>
+              <TableCell colSpan={headerColSpan} sx={{ border: "none" }}>
                 {customElement}
               </TableCell>
             </TableRow>