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

Fix distortion due to table scrollbar

Browse Source
This commit is contained in:
vicky-primathon.in 2020-11-06 10:51:29 +05:30
parent e99a94df87
commit 717082b8bc
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/client/src/components/designSystems/appsmith/Table.tsx
View File

@ -151,7 +151,11 @@ export const Table = (props: TableProps) => {
/> />
<div className={props.isLoading ? Classes.SKELETON : "tableWrap"}> <div className={props.isLoading ? Classes.SKELETON : "tableWrap"}>
<div {...getTableProps()} className="table"> <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) => ( {headerGroups.map((headerGroup: any, index: number) => (
<div <div
{...headerGroup.getHeaderGroupProps()} {...headerGroup.getHeaderGroupProps()}

15
app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
View File

@ -21,8 +21,7 @@ export const TableWrapper = styled.div<{
.tableWrap { .tableWrap {
height: 100%; height: 100%;
display: block; display: block;
overflow-x: auto; overflow: auto;
overflow-y: hidden;
} }
.table { .table {
border-spacing: 0; border-spacing: 0;
@ -36,13 +35,6 @@ export const TableWrapper = styled.div<{
overflow: hidden; overflow: hidden;
} }
.tbody { .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 { .tr {
width: 100%; width: 100%;
} }
@ -104,6 +96,11 @@ export const TableWrapper = styled.div<{
line-height: ${props => props.tableSizes.ROW_HEIGHT}px; line-height: ${props => props.tableSizes.ROW_HEIGHT}px;
padding: 0 10px; padding: 0 10px;
} }
.thead {
position: sticky;
top: 0;
z-index: 1;
}
} }
.draggable-header, .draggable-header,
.hidden-header { .hidden-header {