fix(DataTable): sticky column.

This commit is contained in:
a.bouhuolia
2022-02-05 11:31:57 +02:00
parent 47f6845633
commit d300231838
3 changed files with 15 additions and 7 deletions

View File

@@ -93,7 +93,7 @@
"react-sortablejs": "^2.0.11", "react-sortablejs": "^2.0.11",
"react-split-pane": "^0.1.91", "react-split-pane": "^0.1.91",
"react-table": "^7.6.3", "react-table": "^7.6.3",
"react-table-sticky": "^1.1.2", "react-table-sticky": "^1.1.3",
"react-transition-group": "^4.4.1", "react-transition-group": "^4.4.1",
"react-use": "^13.26.1", "react-use": "^13.26.1",
"react-use-context-menu": "^0.1.4", "react-use-context-menu": "^0.1.4",

View File

@@ -89,12 +89,14 @@ export default function TableHeader() {
return ( return (
<ScrollSyncPane> <ScrollSyncPane>
<div className="thead"> <div className="thead">
{headerGroups.map((headerGroup, index) => ( <div className={'thead-inner'}>
<TableHeaderGroup key={index} headerGroup={headerGroup} /> {headerGroups.map((headerGroup, index) => (
))} <TableHeaderGroup key={index} headerGroup={headerGroup} />
<If condition={progressBarLoading}> ))}
<MaterialProgressBar /> <If condition={progressBarLoading}>
</If> <MaterialProgressBar />
</If>
</div>
</div> </div>
</ScrollSyncPane> </ScrollSyncPane>
); );

View File

@@ -9,6 +9,11 @@
min-width: 100%; min-width: 100%;
display: block; display: block;
.thead .thead-inner,
.tbody .tbody-inner{
min-width: fit-content;
}
.thead { .thead {
overflow: hidden; overflow: hidden;
@@ -393,6 +398,7 @@
background: #fff; background: #fff;
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border-bottom: 0; border-bottom: 0;
color: #000;
} }
} }
} }