Added react-custom-scrollbars

app/client/package.json

@@ -73,6 +73,7 @@
     "lint-staged": "^9.2.5",
     "localforage": "^1.7.3",
     "lodash": "^4.17.19",
+    "lodash-es": "4.17.14",
     "lodash-move": "^1.1.1",
     "loglevel": "^1.6.7",
     "lottie-web": "^5.7.4",
@@ -90,6 +91,7 @@
     "react": "^16.12.0",
     "react-base-table": "^1.9.1",
     "react-beautiful-dnd": "^12.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dnd": "^9.3.4",
     "react-dnd-html5-backend": "^9.3.4",
     "react-dnd-touch-backend": "^9.4.0",
@@ -118,7 +120,6 @@
     "redux-form": "^8.2.6",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
-    "lodash-es": "4.17.14",
     "scroll-into-view-if-needed": "^2.2.26",
     "shallowequal": "^1.1.0",
     "showdown": "^1.9.1",

app/client/src/components/designSystems/appsmith/TableComponent/Table.tsx

@@ -22,6 +22,7 @@ import { Colors } from "constants/Colors";
 
 import VerticalScrollIndicator from "components/ads/VerticalScrollIndicator";
 import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
+import { Scrollbars } from "react-custom-scrollbars";
 
 interface TableProps {
   width: number;
@@ -193,97 +194,101 @@ export const Table = (props: TableProps) => {
         className={props.isLoading ? Classes.SKELETON : "tableWrap"}
         ref={tableWrapperRef}
       >
-        <div {...getTableProps()} className="table">
+        <Scrollbars style={{ width: props.width, height: props.height - 38 }}>
-          <div
+          <div {...getTableProps()} className="table">
-            onMouseOver={props.disableDrag}
+            <div
-            onMouseLeave={props.enableDrag}
+              onMouseOver={props.disableDrag}
-            className="thead"
+              onMouseLeave={props.enableDrag}
-          >
+              className="thead"
-            {headerGroups.map((headerGroup: any, index: number) => (
+            >
-              <div
+              {headerGroups.map((headerGroup: any, index: number) => (
-                {...headerGroup.getHeaderGroupProps()}
-                className="tr"
-                key={index}
-              >
-                {headerGroup.headers.map((column: any, columnIndex: number) => {
-                  return (
-                    <TableHeaderCell
-                      key={columnIndex}
-                      column={column}
-                      columnName={column.Header}
-                      columnIndex={columnIndex}
-                      isHidden={column.isHidden}
-                      sortTableColumn={props.sortTableColumn}
-                      isAscOrder={column.isAscOrder}
-                      isResizingColumn={isResizingColumn.current}
-                    />
-                  );
-                })}
-              </div>
-            ))}
-            {headerGroups.length === 0 &&
-              renderEmptyRows(
-                1,
-                props.columns,
-                props.width,
-                subPage,
-                prepareRow,
-              )}
-          </div>
-          <div
-            {...getTableBodyProps()}
-            className={`tbody ${
-              props.pageSize > subPage.length ? "no-scroll" : ""
-            }`}
-            ref={tableBodyRef}
-          >
-            {subPage.map((row, rowIndex) => {
-              prepareRow(row);
-              return (
                 <div
-                  {...row.getRowProps()}
+                  {...headerGroup.getHeaderGroupProps()}
-                  className={
+                  className="tr"
-                    "tr" +
+                  key={index}
-                    `${
-                      row.index === selectedRowIndex ||
-                      selectedRowIndices.includes(row.index)
-                        ? " selected-row"
-                        : ""
-                    }`
-                  }
-                  onClick={(e) => {
-                    row.toggleRowSelected();
-                    props.selectTableRow(row);
-                    e.stopPropagation();
-                  }}
-                  key={rowIndex}
                 >
-                  {row.cells.map((cell, cellIndex) => {
+                  {headerGroup.headers.map(
-                    return (
+                    (column: any, columnIndex: number) => {
-                      <div
+                      return (
-                        {...cell.getCellProps()}
+                        <TableHeaderCell
-                        className="td"
+                          key={columnIndex}
-                        key={cellIndex}
+                          column={column}
-                        data-rowindex={rowIndex}
+                          columnName={column.Header}
-                        data-colindex={cellIndex}
+                          columnIndex={columnIndex}
-                      >
+                          isHidden={column.isHidden}
-                        {cell.render("Cell")}
+                          sortTableColumn={props.sortTableColumn}
-                      </div>
+                          isAscOrder={column.isAscOrder}
-                    );
+                          isResizingColumn={isResizingColumn.current}
-                  })}
+                        />
+                      );
+                    },
+                  )}
                 </div>
-              );
+              ))}
-            })}
+              {headerGroups.length === 0 &&
-            {props.pageSize > subPage.length &&
+                renderEmptyRows(
-              renderEmptyRows(
+                  1,
-                props.pageSize - subPage.length,
+                  props.columns,
-                props.columns,
+                  props.width,
-                props.width,
+                  subPage,
-                subPage,
+                  prepareRow,
-                prepareRow,
+                )}
-              )}
+            </div>
+            <div
+              {...getTableBodyProps()}
+              className={`tbody ${
+                props.pageSize > subPage.length ? "no-scroll" : ""
+              }`}
+              ref={tableBodyRef}
+            >
+              {subPage.map((row, rowIndex) => {
+                prepareRow(row);
+                return (
+                  <div
+                    {...row.getRowProps()}
+                    className={
+                      "tr" +
+                      `${
+                        row.index === selectedRowIndex ||
+                        selectedRowIndices.includes(row.index)
+                          ? " selected-row"
+                          : ""
+                      }`
+                    }
+                    onClick={(e) => {
+                      row.toggleRowSelected();
+                      props.selectTableRow(row);
+                      e.stopPropagation();
+                    }}
+                    key={rowIndex}
+                  >
+                    {row.cells.map((cell, cellIndex) => {
+                      return (
+                        <div
+                          {...cell.getCellProps()}
+                          className="td"
+                          key={cellIndex}
+                          data-rowindex={rowIndex}
+                          data-colindex={cellIndex}
+                        >
+                          {cell.render("Cell")}
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+              {props.pageSize > subPage.length &&
+                renderEmptyRows(
+                  props.pageSize - subPage.length,
+                  props.columns,
+                  props.width,
+                  subPage,
+                  prepareRow,
+                )}
+            </div>
           </div>
-        </div>
+        </Scrollbars>
       </div>
       <HorizontalScrollIndicator
         containerRef={tableHeaderWrapperRef}
@@ -292,7 +297,7 @@ export const Table = (props: TableProps) => {
         top={props.editMode ? "37px" : "40px"}
         left={props.editMode ? "0px" : "3px"}
       />
-      <HorizontalScrollIndicator
+      {/* <HorizontalScrollIndicator
         containerRef={tableWrapperRef}
         mode="LIGHT"
         alwaysShowScrollbar
@@ -303,7 +308,7 @@ export const Table = (props: TableProps) => {
         containerRef={tableBodyRef}
         mode="LIGHT"
         top={props.editMode ? "70px" : "73px"}
-      />
+      /> */}
     </TableWrapper>
   );
 };

app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx

@@ -29,7 +29,6 @@ export const TableWrapper = styled.div<{
     position: relative;
     width: ${(props) => props.width - 8}px;
     overflow-x: auto;
-    ${DisableNativeScrollbar};
   }
   .table {
     border-spacing: 0;
@@ -49,7 +48,6 @@ export const TableWrapper = styled.div<{
       height: ${(props) => props.height - 80}px;
       width: 100%;
       overflow-y: auto;
-      ${DisableNativeScrollbar};
       .tr {
         width: 100%;
       }

app/client/yarn.lock

@@ -3580,7 +3580,6 @@
 "@types/marked@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
-  integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw==
 
 "@types/mdast@^3.0.0":
   version "3.0.3"
@@ -3761,7 +3760,6 @@
 "@types/react-window@^1.8.2":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
-  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
   dependencies:
     "@types/react" "*"
 
@@ -4408,6 +4406,10 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
 
+add-px-to-style@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a"
+
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -5329,7 +5331,6 @@ bluebird@^3.3.5, bluebird@^3.5.5, bluebird@^3.7.2:
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
-  integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 bn.js@^5.1.1:
   version "5.1.3"
@@ -6046,7 +6047,6 @@ code-point-at@^1.0.0:
 codemirror@^5.59.2:
   version "5.59.2"
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922"
-  integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA==
 
 collapse-white-space@^1.0.2:
   version "1.0.6"
@@ -6170,7 +6170,6 @@ compression@^1.7.4:
 compute-scroll-into-view@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz#5b7bf4f7127ea2c19b750353d7ce6776a90ee088"
-  integrity sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ==
 
 concat-map@0.0.1:
   version "0.0.1"
@@ -6297,7 +6296,6 @@ core-js@^3.0.1, core-js@^3.0.4, core-js@^3.6.5:
 core-js@^3.9.1:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
-  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -7071,6 +7069,14 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
+dom-css@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202"
+  dependencies:
+    add-px-to-style "1.0.0"
+    prefix-style "2.0.1"
+    to-camel-case "1.0.0"
+
 dom-helpers@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
@@ -7233,7 +7239,6 @@ element-resize-detector@^1.2.1:
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
-  integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -10856,12 +10861,10 @@ locate-path@^5.0.0:
 lodash-es@4.17.14:
   version "4.17.14"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc"
-  integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA==
 
 lodash-move@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/lodash-move/-/lodash-move-1.1.1.tgz#59f76e0f1ac57e6d8683f531bec07c5b6ea4e348"
-  integrity sha1-WfduDxrFfm2Gg/UxvsB8W26k40g=
   dependencies:
     lodash "^4.6.1"
 
@@ -10945,7 +10948,6 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
 lodash@^4.6.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@3.0.0, log-symbols@^3.0.0:
   version "3.0.0"
@@ -11112,7 +11114,6 @@ markdown-to-jsx@^6.10.3, markdown-to-jsx@^6.11.4:
 marked@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
-  integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
 
 marker-clusterer-plus@^2.1.4:
   version "2.1.4"
@@ -12358,7 +12359,6 @@ path-to-regexp@^1.7.0:
 path-to-regexp@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
-  integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
 
 path-type@^1.0.0:
   version "1.1.0"
@@ -13129,6 +13129,10 @@ preact@^10.0.0:
   version "10.5.4"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.4.tgz#1e4d148f949fa54656df6c9bc9218bd4e12016e3"
 
+prefix-style@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -13209,7 +13213,6 @@ pretty-hrtime@^1.0.3:
 prismjs@^1.23.0, prismjs@^1.8.4:
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
-  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
   optionalDependencies:
     clipboard "^2.0.0"
 
@@ -13507,7 +13510,7 @@ raf-schd@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
 
-raf@^3.4.1:
+raf@^3.1.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   dependencies:
@@ -13629,6 +13632,14 @@ react-color@^2.17.0:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-custom-scrollbars@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz#830fd9502927e97e8a78c2086813899b2a8b66db"
+  dependencies:
+    dom-css "^2.0.0"
+    prop-types "^15.5.10"
+    raf "^3.1.0"
+
 react-day-picker@7.4.8:
   version "7.4.8"
   resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.8.tgz#675625240d3fae1b41c0a9d5177c968c8517c1d4"
@@ -14180,7 +14191,6 @@ react-window@^1.8.2:
 react-window@^1.8.6:
   version "1.8.6"
   resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
-  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
   dependencies:
     "@babel/runtime" "^7.0.0"
     memoize-one ">=3.1.1 <6"
@@ -14969,7 +14979,6 @@ scriptjs@^2.5.8:
 scroll-into-view-if-needed@^2.2.26:
   version "2.2.26"
   resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz#e4917da0c820135ff65ad6f7e4b7d7af568c4f13"
-  integrity sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw==
   dependencies:
     compute-scroll-into-view "^1.0.16"
 
@@ -16115,10 +16124,20 @@ to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
 
+to-camel-case@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46"
+  dependencies:
+    to-space-case "^1.0.0"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
 
+to-no-case@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a"
+
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
@@ -16147,6 +16166,12 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-space-case@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17"
+  dependencies:
+    to-no-case "^1.0.0"
+
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"