feat: #1789

XiaoMi · Jun 22, 2021 · 7d88ae0 · 7d88ae0
1 parent 237e9af
commit 7d88ae0
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 48 deletions.
diff --git a/components/table/HeaderTable.jsx b/components/table/HeaderTable.jsx
@@ -8,7 +8,7 @@ import Checkbox from '../checkbox'
 import { flatTreeData, setDepth, getLeafChildren, groupDataByDepth } from './util'
 import { Resizable } from 'react-resizable'
 
-const HeaderTable = ({ bodyWidth, rightFixedIndex }) => {
+const HeaderTable = ({ rightFixedIndex }) => {
   const {
     rowSelection,
     data,
@@ -32,7 +32,7 @@ const HeaderTable = ({ bodyWidth, rightFixedIndex }) => {
     resizable,
     setting,
     onHeaderRow,
-    ceiling,
+    sticky,
     disabledData
   } = useContext(TableContext)
   const [isAllChecked, setIsAllChecked] = useState(false)
@@ -257,23 +257,14 @@ const HeaderTable = ({ bodyWidth, rightFixedIndex }) => {
       style={{
         borderLeft: bordered && '1px solid #e7e7e7',
         borderTop: bordered && '1px solid #e7e7e7',
-        overflow: 'hidden',
         boxShadow: maxHeight && '0px 2px 6px 0px rgba(0,0,0,0.12)',
-        position: 'relative'
+        position: sticky ? 'sticky' : 'relative',
+        top: sticky && stickyTop,
+        zIndex: 10
       }}
     >
       {setting && <SettingMenu />}
-      <div
-        className={`${prefix}__header`}
-        key="normal"
-        ref={headerTableRef}
-        style={{
-          overflow: 'hidden',
-          width: ceiling ? bodyWidth : 'auto',
-          position: ceiling ? 'fixed' : 'static',
-          top: ceiling && stickyTop
-        }}
-      >
+      <div className={`${prefix}__header`} key="normal" ref={headerTableRef}>
         <table style={{ width: '100%' }} ref={headerInner}>
           <colgroup>
             {columnsgroup.map((c, index) => {

diff --git a/components/table/Table.jsx b/components/table/Table.jsx
@@ -43,7 +43,7 @@ const Table = ({
   showColHighlight,
   prefix = 'hi-table',
   fixedToColumn,
-  sticky: _ceiling,
+  sticky,
   stickyTop = 0,
   setting,
   onLoadChildren,
@@ -63,7 +63,6 @@ const Table = ({
   const [columns, setColumns] = useState(propsColumns)
   const hiTable = useRef(null)
   const disabledData = useRef([])
-  const [ceiling, setCeiling] = useState(false)
   const [activeSorterColumn, setActiveSorterColumn] = useState(null)
   const [activeSorterType, setActiveSorterType] = useState(null)
   const [highlightColumns, setHighlightColumns] = useState([])
@@ -197,33 +196,6 @@ const Table = ({
   const alignRightColumns = columns.filter((c) => c.align === 'right').map((col) => col.dataKey)
   // baseTable
   const baseTable = useRef(null)
-  const [baseTableWidth, setBaseTableWidth] = useState('100%')
-  const clientWidth = baseTable.current && baseTable.current.clientWidth
-  useEffect(() => {
-    setBaseTableWidth(clientWidth)
-  }, [clientWidth])
-
-  useEffect(() => {
-    if (_ceiling) {
-      window.addEventListener(
-        'scroll',
-        (e) => {
-          if (
-            hiTable &&
-            hiTable.current &&
-            hiTable.current.getBoundingClientRect().top <= stickyTop &&
-            hiTable.current.getBoundingClientRect().bottom >= stickyTop + 35
-          ) {
-            setCeiling(true)
-            syncScrollLeft(bodyTableRef.current.scrollLeft, stickyHeaderRef.current)
-          } else {
-            setCeiling(false)
-          }
-        },
-        true
-      )
-    }
-  }, [_ceiling, stickyTop])
 
   useEffect(() => {
     if (dataSource) {
@@ -258,7 +230,7 @@ const Table = ({
         onExpand,
         realColumnsWidth,
         setRealColumnsWidth,
-        ceiling,
+        sticky,
         stickyTop,
         // 排序逻辑
         activeSorterColumn,
@@ -319,7 +291,7 @@ const Table = ({
       >
         {/* Normal table 普通表格 */}
         <div className={`${prefix}__container`} ref={baseTable}>
-          <HeaderTable bodyWidth={baseTableWidth} />
+          <HeaderTable />
           <BodyTable fatherRef={hiTable} emptyContent={emptyContent} />
           {/* 显示阴影 */}
           {scrollSize.scrollLeft > 0 && realLeftFixedColumns.length > 0 && (

diff --git a/components/table/style/Table.scss b/components/table/style/Table.scss
@@ -3,7 +3,7 @@
 
 .#{$table} {
   position: relative;
-  overflow: hidden;
+  // overflow: hidden;
 
   &__container {
     position: relative;

diff --git a/components/table/style/index.scss b/components/table/style/index.scss
@@ -209,7 +209,7 @@
   }
 
   &__header {
-    overflow-x: scroll;
+    overflow: hidden;
     position: relative;
 
     > table {

diff --git a/docs/demo/table/section-special.jsx b/docs/demo/table/section-special.jsx
@@ -632,6 +632,8 @@ class Demo extends React.Component {
         columns={this.columns}
         fixedToColumn={{left:'number', right: 'gender'}}
         data={this.data} 
+        stickyTop={63}
+        sticky
         rowSelection={{
           selectedRowKeys: this.state.selectedRowKeys,
           onChange: selectedRowKeys => {