fix(chart-table): Scrollbar causing header + footer overflow (#21064)

apache · Dec 16, 2022 · 2679ee2 · 2679ee2
1 parent 89bb6c0
commit 2679ee2
Showing 1 changed file with 4 additions and 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
@@ -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>