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

Enhancement: Virtualized Query Editor Table (#3496)

Browse Source 
* 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>
This commit is contained in:
Pawan Kumar 2021-03-18 18:40:57 +05:30 committed by GitHub
parent 5f80e2561e
commit 80895b876b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
key={cellIndex}
{...cell.getCellProps()}
className="td"
data-rowindex={index}
data-colindex={cellIndex}
>
<CellWrapper isHidden={false}>
{cell.render("Cell")}
</CellWrapper>
<div key={cellIndex} {...cell.getCellProps()} className="td">
<CellWrapper>{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
key={index}
{...headerGroup.getHeaderGroupProps()}
className="tr"
>
{headerGroup.headers.map((column: any, columnIndex: number) => (
<div
key={columnIndex}
{...column.getHeaderProps()}
className="th header-reorder"
>
<div
className={
!column.isHidden ? "draggable-header" : "hidden-header"
}
>
{column.render("Header")}
</div>
</div>
))}
</div>
))}
<div>
{headerGroups.map((headerGroup: any, index: number) => (
<div
key={index}
{...headerGroup.getHeaderGroupProps()}
className="tr"
>
{headerGroup.headers.map(
(column: any, columnIndex: number) => (
<div
key={columnIndex}
{...column.getHeaderProps()}
className="th header-reorder"
>
<div
className={
!column.isHidden
? "draggable-header"
: "hidden-header"
}
>
{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}