feat(table): add tableWidthAdjustOnResize api (#3046) (#3052)

* feat(table): add tableWidthAdjustOnResize api (#3046)

* chore(table): 优化组件示例

* fix(table): 修改列高亮时拖拽条样式问题

* chore(table): 优化拖拽条hover时样式

.changeset/beige-months-poke.md

@@ -0,0 +1,6 @@
+---
+"@hi-ui/table": minor
+"@hi-ui/hiui": minor
+---
+
+feat(table): add tableWidthAdjustOnResize api (#3046)

packages/ui/table/src/hooks/use-col-width.ts

@@ -5,11 +5,13 @@ import { useUpdateEffect } from '@hi-ui/use-update-effect'
 
 export const useColWidth = ({
   resizable,
+  tableWidthAdjustOnResize,
   data,
   columns,
   virtual,
 }: {
   resizable: boolean
+  tableWidthAdjustOnResize: boolean
   data: TableRowRecord[]
   columns: TableColumnItem[]
   virtual?: boolean
@@ -119,7 +121,7 @@ export const useColWidth = ({
     const measureRowElement = measureRowElementRef.current
 
     if (measureRowElement) {
-      const resizeObserver = new ResizeObserver(() => {
+      resizeObserver = new ResizeObserver(() => {
         if (virtual) {
           setColWidths(getVirtualWidths())
         } else {
@@ -136,9 +138,7 @@ export const useColWidth = ({
     }
 
     return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-      }
+      resizeObserver?.disconnect()
     }
     // 测量元素在内容列为空时会是空，切换会使测量元素变化，导致后续的resize时间无法响应,此处测量元素变化时需要重新绑定
   }, [columns, getVirtualWidths, getWidths, virtual])
@@ -182,9 +182,7 @@ export const useColWidth = ({
     }
 
     return () => {
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-      }
+      resizeObserver?.disconnect()
     }
   }, [columns.length, headerTableElement, resizable])
 
@@ -228,6 +226,12 @@ export const useColWidth = ({
 
       setColWidths((prev) => {
         const nextColWidths = [...prev]
+
+        if (tableWidthAdjustOnResize) {
+          nextColWidths[index] = nextWidth
+          return nextColWidths
+        }
+
         let anotherWidth = nextColWidths[index + 1]! + nextColWidths[index]! - nextWidth
 
         if (anotherWidth <= anotherMinWidth) {
@@ -240,7 +244,7 @@ export const useColWidth = ({
         return nextColWidths
       })
     },
-    [minColWidth]
+    [minColWidth, tableWidthAdjustOnResize]
   )
 
   const getColgroupProps = React.useCallback(

packages/ui/table/src/styles/table.scss

@@ -186,6 +186,7 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default;
 
         .#{$prefix}-header__resizable-handle {
           border-left-color: use-color('gray', 200);
+          border-right-color: use-color('gray', 200);
         }
       }
 
@@ -196,7 +197,9 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default;
         height: 100%;
         bottom: 0;
         right: 0;
-        border-left: 2px solid use-color('gray', 50);
+        margin-right: -2px;
+        border-left: 2px solid transparent;
+        border-right: 2px solid transparent;
         cursor: col-resize;
         z-index: 1;
 
@@ -207,6 +210,7 @@ $emptyContent: '#{$component-prefix}-table-body-empty-content' !default;
         &:hover {
           background-color: use-color-mode('primary');
           border-left-color: use-color('gray', 200);
+          border-right-color: use-color('gray', 200);
         }
       }
     }

packages/ui/table/src/use-table.ts

@@ -54,6 +54,7 @@ export const useTable = ({
   onFixedToColumn,
   scrollWidth,
   resizable = false,
+  tableWidthAdjustOnResize = false,
   // highlight
   errorRowKeys = DEFAULT_ERROR_ROW_KEYS,
   highlightedColKeys: highlightedColKeysProp,
@@ -197,6 +198,7 @@ export const useTable = ({
     data,
     columns,
     resizable,
+    tableWidthAdjustOnResize,
     virtual: !!virtual,
   })
 
@@ -778,6 +780,11 @@ export interface UseTableProps {
    *  是否能够动态控制列宽
    */
   resizable?: boolean
+  /**
+   *  调整列宽时是否改变表格宽度，在 resizable 模式下生效
+   *  @private
+   */
+  tableWidthAdjustOnResize?: boolean
   /**
    * 是否支持虚拟滚动，
    * 列宽：column设置的width或200作为宽度，内容区填充不满时，宽度等比分配。

packages/ui/table/stories/data-sorter.stories.tsx

@@ -220,15 +220,11 @@ export const DataSorter = () => {
     },
   ])
 
-  const onChange = (pagination, sorter, extra) => {
-    console.log(pagination, sorter, extra)
-  }
-
   return (
     <>
       <h1>DataSorter for Table</h1>
       <div className="table-data-sorter__wrap" style={{ minWidth: 660, background: '#fff' }}>
-        <Table columns={columns} data={data} onChange={onChange} />
+        <Table columns={columns} data={data} onChange={console.log} />
       </div>
     </>
   )

packages/ui/table/stories/scrollbar.stories.tsx

@@ -345,6 +345,19 @@ export const Scrollbar = () => {
     },
   ])
 
+  const scrollbarInnerRef = React.useRef<any>(null)
+  const update = () => scrollbarInnerRef.current?.update?.()
+
+  // 在外部滚动时更新 Scrollbar 滚动条的位置
+  // 该处理是针对 scrollbarXStickToBottom 参数为 true 的情况，让滚动条始终保持在底部，详见 Scrollbar 组件文档
+  React.useEffect(() => {
+    document.addEventListener('scroll', update)
+
+    return () => {
+      document.removeEventListener('scroll', update)
+    }
+  }, [])
+
   return (
     <>
       <h1>Scrollbar for Table</h1>
@@ -359,13 +372,14 @@ export const Scrollbar = () => {
             {
               // 保持滚动条始终可见
               keepVisible: true,
+              innerRef: scrollbarInnerRef,
               // 设置滚动条的 z-index 值
               zIndex: 9,
               settings: {
                 // 垂直滑动时，让横向滚动条一直显示在容器底部
-                // scrollbarXStickToBottom: true,
+                scrollbarXStickToBottom: true,
                 // 横向滚动条距离底部的距离
-                // scrollbarXStickToBottomGap: 20,
+                scrollbarXStickToBottomGap: 20,
               },
             }
           }

stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="使用前请必看 | 安装使用Beta版本" />
+<Meta title="使用前必看" />
 
 <div>
 <h1 align="center">