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

@@ -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>