Enhancement: Virtualized Query Editor Table (#3496)

* add react-window on react-table

* remove .vscode launch.json

* add cellwrapper

* fix height issue in virtualized table

* useBlockLayout in Table

* add border-right on table row

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>

app/client/src/pages/Editor/QueryEditor/Table.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { FixedSizeList } from "react-window";
-import { useTable, useFlexLayout } from "react-table";
+import { useTable, useBlockLayout } from "react-table";
 
 import { Colors } from "constants/Colors";
 import { scrollbarWidth } from "utils/helpers";
@@ -57,6 +57,7 @@ export const TableWrapper = styled.div`
     }
     .tr {
       overflow: hidden;
+      border-right: 1px solid ${Colors.GEYSER_LIGHT};
       :nth-child(even) {
         background: ${Colors.ATHENS_GRAY_DARKER};
       }
@@ -200,6 +201,13 @@ const Table = (props: TableProps) => {
     return [];
   }, [data]);
 
+  const defaultColumn = React.useMemo(
+    () => ({
+      width: 170,
+    }),
+    [],
+  );
+
   const {
     getTableProps,
     getTableBodyProps,
@@ -212,8 +220,9 @@ const Table = (props: TableProps) => {
       columns,
       data,
       manualPagination: true,
+      defaultColumn,
     },
-    useFlexLayout,
+    useBlockLayout,
   );
 
   const scrollBarSize = React.useMemo(() => scrollbarWidth(), []);
@@ -232,16 +241,8 @@ const Table = (props: TableProps) => {
         >
           {row.cells.map((cell: any, cellIndex: number) => {
             return (
-              <div
+              <div key={cellIndex} {...cell.getCellProps()} className="td">
-                key={cellIndex}
+                <CellWrapper>{cell.render("Cell")}</CellWrapper>
-                {...cell.getCellProps()}
-                className="td"
-                data-rowindex={index}
-                data-colindex={cellIndex}
-              >
-                <CellWrapper isHidden={false}>
-                  {cell.render("Cell")}
-                </CellWrapper>
               </div>
             );
           })}
@@ -258,33 +259,39 @@ const Table = (props: TableProps) => {
       <TableWrapper>
         <div className="tableWrap">
           <div {...getTableProps()} className="table">
-            {headerGroups.map((headerGroup: any, index: number) => (
+            <div>
-              <div
+              {headerGroups.map((headerGroup: any, index: number) => (
-                key={index}
+                <div
-                {...headerGroup.getHeaderGroupProps()}
+                  key={index}
-                className="tr"
+                  {...headerGroup.getHeaderGroupProps()}
-              >
+                  className="tr"
-                {headerGroup.headers.map((column: any, columnIndex: number) => (
+                >
-                  <div
+                  {headerGroup.headers.map(
-                    key={columnIndex}
+                    (column: any, columnIndex: number) => (
-                    {...column.getHeaderProps()}
+                      <div
-                    className="th header-reorder"
+                        key={columnIndex}
-                  >
+                        {...column.getHeaderProps()}
-                    <div
+                        className="th header-reorder"
-                      className={
+                      >
-                        !column.isHidden ? "draggable-header" : "hidden-header"
+                        <div
-                      }
+                          className={
-                    >
+                            !column.isHidden
-                      {column.render("Header")}
+                              ? "draggable-header"
-                    </div>
+                              : "hidden-header"
-                  </div>
+                          }
-                ))}
+                        >
-              </div>
+                          {column.render("Header")}
-            ))}
+                        </div>
+                      </div>
+                    ),
+                  )}
+                </div>
+              ))}
+            </div>
 
             <div {...getTableBodyProps()} className="tbody">
               <FixedSizeList
-                height={400}
+                height={window.innerHeight}
                 itemCount={rows.length}
                 itemSize={35}
                 width={totalColumnsWidth + scrollBarSize}