fix(DataTable): sticky column.

package.json

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

src/components/Datatable/TableHeader.js

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

src/style/components/DataTable/DataTable.scss

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