From 2679ee2e46edf53ab07c19e1186ce2877e159303 Mon Sep 17 00:00:00 2001
From: Reese <10563996+reesercollins@users.noreply.github.com>
Date: Fri, 16 Dec 2022 00:25:20 -0500
Subject: [PATCH] fix(chart-table): Scrollbar causing header + footer overflow
 (#21064)

---
 .../src/DataTable/hooks/useSticky.tsx         | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
index 6fd4d839c..067d071ee 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
@@ -237,7 +237,7 @@ function StickyWrap({
   const colWidths = columnWidths?.slice(0, columnCount);
 
   if (colWidths && bodyHeight) {
-    const bodyColgroup = (
+    const colgroup = (
       <colgroup>
         {colWidths.map((w, i) => (
           // eslint-disable-next-line react/no-array-index-key
@@ -246,23 +246,6 @@ function StickyWrap({
       </colgroup>
     );
 
-    // header columns do not have vertical scroll bars,
-    // so we add scroll bar size to the last column
-    const headerColgroup =
-      sticky.hasVerticalScroll && scrollBarSize ? (
-        <colgroup>
-          {colWidths.map((x, i) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <col
-              key={i}
-              width={x + (i === colWidths.length - 1 ? scrollBarSize : 0)}
-            />
-          ))}
-        </colgroup>
-      ) : (
-        bodyColgroup
-      );
-
     headerTable = (
       <div
         key="header"
@@ -274,7 +257,7 @@ function StickyWrap({
         {React.cloneElement(
           table,
           mergeStyleProp(table, fixedTableLayout),
-          headerColgroup,
+          colgroup,
           thead,
         )}
         {headerTable}
@@ -292,7 +275,7 @@ function StickyWrap({
         {React.cloneElement(
           table,
           mergeStyleProp(table, fixedTableLayout),
-          headerColgroup,
+          colgroup,
           tfoot,
         )}
         {footerTable}
@@ -320,7 +303,7 @@ function StickyWrap({
         {React.cloneElement(
           table,
           mergeStyleProp(table, fixedTableLayout),
-          bodyColgroup,
+          colgroup,
           tbody,
         )}
       </div>