Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Enhancement: Virtualized Query Editor Table (#3460)

Browse Source 
* add react-window on react-table

* remove .vscode launch.json

* add cellwrapper

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
This commit is contained in:
Pawan Kumar 2021-03-11 10:25:37 +05:30 committed by GitHub
parent bc646ab9b2
commit 385baaddcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 86 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/package.json
View File

@ -109,6 +109,7 @@
"react-toastify": "^5.5.0",
"react-transition-group": "^4.3.0",
"react-use-gesture": "^7.0.4",
"react-window": "^1.8.6",
"react-zoom-pan-pinch": "^1.6.1",
"redux": "^4.0.1",
"redux-form": "^8.2.6",
@ -179,6 +180,7 @@
"@types/react-beautiful-dnd": "^11.0.4",
"@types/react-select": "^3.0.5",
"@types/react-tabs": "^2.3.1",
"@types/react-window": "^1.8.2",
"@types/redux-form": "^8.1.9",
"@types/redux-mock-store": "^1.0.2",
"@types/styled-system": "^5.1.9",

78
app/client/src/pages/Editor/QueryEditor/Table.tsx
View File

@ -1,11 +1,14 @@
import React from "react";
import { CellWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
import { useTable, useFlexLayout } from "react-table";
import styled from "styled-components";
import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
import { getType, Types } from "utils/TypeHelpers";
import { FixedSizeList } from "react-window";
import { useTable, useFlexLayout } from "react-table";
import { Colors } from "constants/Colors";
import { scrollbarWidth } from "utils/helpers";
import { getType, Types } from "utils/TypeHelpers";
import ErrorBoundary from "components/editorComponents/ErrorBoundry";
import { CellWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
import AutoToolTipComponent from "components/designSystems/appsmith/TableComponent/AutoToolTipComponent";
interface TableProps {
data: Record<string, any>[];
@ -203,6 +206,7 @@ const Table = (props: TableProps) => {
headerGroups,
rows,
prepareRow,
totalColumnsWidth,
} = useTable(
{
columns,
@ -212,6 +216,41 @@ const Table = (props: TableProps) => {
useFlexLayout,
);
const scrollBarSize = React.useMemo(() => scrollbarWidth(), []);
const RenderRow = React.useCallback(
({ index, style }) => {
const row = rows[index];
prepareRow(row);
return (
<div
{...row.getRowProps({
style,
})}
className="tr"
>
{row.cells.map((cell: any, cellIndex: number) => {
return (
<div
key={cellIndex}
{...cell.getCellProps()}
className="td"
data-rowindex={index}
data-colindex={cellIndex}
>
<CellWrapper isHidden={false}>
{cell.render("Cell")}
</CellWrapper>
</div>
);
})}
</div>
);
},
[prepareRow, rows],
);
if (rows.length === 0 || headerGroups.length === 0) return null;
return (
@ -242,29 +281,16 @@ const Table = (props: TableProps) => {
))}
</div>
))}
<div {...getTableBodyProps()} className="tbody">
{rows.map((row: any, index: number) => {
prepareRow(row);
return (
<div key={index} {...row.getRowProps()} className={"tr"}>
{row.cells.map((cell: any, cellIndex: number) => {
return (
<div
key={cellIndex}
{...cell.getCellProps()}
className="td"
data-rowindex={index}
data-colindex={cellIndex}
>
<CellWrapper isHidden={false}>
{cell.render("Cell")}
</CellWrapper>
</div>
);
})}
</div>
);
})}
<FixedSizeList
height={400}
itemCount={rows.length}
itemSize={35}
width={totalColumnsWidth + scrollBarSize}
>
{RenderRow}
</FixedSizeList>
</div>
</div>
</div>

17
app/client/src/utils/helpers.tsx
View File

@ -260,3 +260,20 @@ export const getSelectedText = () => {
return selectionObj && selectionObj.toString();
}
};
/**
* calculates and returns the scrollwidth
*
* @returns
*/
export const scrollbarWidth = () => {
const scrollDiv = document.createElement("div");
scrollDiv.setAttribute(
"style",
"width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;",
);
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
return scrollbarWidth;
};

15
app/client/yarn.lock
View File

@ -4222,6 +4222,13 @@
dependencies:
"@types/react" "*"
"@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" "*"
"@types/react@*", "@types/react@^16.8.2":
version "16.9.52"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.52.tgz#c46c72d1a1d8d9d666f4dd2066c0e22600ccfde1"
@ -16181,6 +16188,14 @@ react-window@^1.8.2:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
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"
react-zoom-pan-pinch@^1.6.1:
version "1.6.1"
resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"