From 717082b8bc5a6acdbf3553ff0880309e23dd1b43 Mon Sep 17 00:00:00 2001
From: "vicky-primathon.in" <vicky.bansal@primathon.in>
Date: Fri, 6 Nov 2020 10:51:29 +0530
Subject: [PATCH] Fix distortion due to table scrollbar

---
 .../components/designSystems/appsmith/Table.tsx   |  6 +++++-
 .../appsmith/TableStyledWrappers.tsx              | 15 ++++++---------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/Table.tsx b/app/client/src/components/designSystems/appsmith/Table.tsx
index 6be5ba72f1..3461c92d35 100644
--- a/app/client/src/components/designSystems/appsmith/Table.tsx
+++ b/app/client/src/components/designSystems/appsmith/Table.tsx
@@ -151,7 +151,11 @@ export const Table = (props: TableProps) => {
       />
       <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
         <div {...getTableProps()} className="table">
-          <div onMouseOver={props.disableDrag} onMouseLeave={props.enableDrag}>
+          <div
+            onMouseOver={props.disableDrag}
+            onMouseLeave={props.enableDrag}
+            className="thead"
+          >
             {headerGroups.map((headerGroup: any, index: number) => (
               <div
                 {...headerGroup.getHeaderGroupProps()}
diff --git a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
index 54bcf7d398..96cccfc616 100644
--- a/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
@@ -21,8 +21,7 @@ export const TableWrapper = styled.div<{
   .tableWrap {
     height: 100%;
     display: block;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto;
   }
   .table {
     border-spacing: 0;
@@ -36,13 +35,6 @@ export const TableWrapper = styled.div<{
       overflow: hidden;
     }
     .tbody {
-      overflow-y: scroll;
-      /* Subtracting 9px to handling widget padding */
-      height: ${props =>
-        props.height -
-        props.tableSizes.TABLE_HEADER_HEIGHT -
-        props.tableSizes.COLUMN_HEADER_HEIGHT -
-        9}px;
       .tr {
         width: 100%;
       }
@@ -104,6 +96,11 @@ export const TableWrapper = styled.div<{
       line-height: ${props => props.tableSizes.ROW_HEIGHT}px;
       padding: 0 10px;
     }
+    .thead {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
   }
   .draggable-header,
   .hidden-header {