feat(table): 支持表头列合并 (#3032)

XiaoMi · Nov 6, 2024 · 6ea874c · 6ea874c
1 parent 83be3c1
commit 6ea874c
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 53 deletions.
diff --git a/.changeset/early-cycles-drum.md b/.changeset/early-cycles-drum.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/table": minor
+"@hi-ui/hiui": minor
+---
+
+feat(table): 支持表头列合并 (#3032)
diff --git a/packages/ui/table/src/TheadContent.tsx b/packages/ui/table/src/TheadContent.tsx
@@ -57,10 +57,17 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
                   }
                 }
 
+                const stickyColProps = getStickyColProps(col)
+
                 const cell = (
                   <th
                     key={dataKey}
-                    {...getStickyColProps(col)}
+                    {...stickyColProps}
+                    style={{
+                      ...stickyColProps.style,
+                      // 表头合并场景下，被合并的表头需要隐藏
+                      display: col?.colSpan === 0 ? 'none' : undefined,
+                    }}
                     className={cx(
                       `${prefixCls}-cell`,
                       raw.className,
@@ -87,19 +94,22 @@ export const TheadContent = forwardRef<HTMLDivElement | null, TheadContentProps>
                   </th>
                 )
 
+                // 当有表头列合并时，将当前列的索引设置为最后一个被合并的列的索引，这样在拖拽时，UI 和交互才更符合直觉
+                const index = col.colSpan && col.colSpan > 1 ? colIndex + col.colSpan - 1 : colIndex
+
                 return resizable && colIndex !== colWidths.length - 1 ? (
                   <Resizable
                     key={colIndex}
                     className={`${prefixCls}__resizable`}
                     draggableOpts={{ enableUserSelectHack: false }}
                     handle={<span className={`${prefixCls}__resizable-handle`} />}
                     height={0}
-                    width={colWidths[colIndex] as number}
+                    width={colWidths[index] as number}
                     onResize={(evt, options) => {
-                      onColumnResizable(evt, options, colIndex)
+                      onColumnResizable(evt, options, index)
                     }}
                     onResizeStop={(evt, options) => {
-                      onResizeStop?.(evt, options?.size, colIndex, colWidths)
+                      onResizeStop?.(evt, options?.size, index, colWidths)
                     }}
                   >
                     {cell}

diff --git a/packages/ui/table/src/hooks/use-colgroup.ts b/packages/ui/table/src/hooks/use-colgroup.ts
@@ -32,6 +32,7 @@ export const useColumns = ({ columns }: { columns: TableColumnItem[] }) => {
         title: raw.title,
         align: raw.align ?? 'left',
         render: raw.render,
+        colSpan: raw.colSpan,
       }
     })
 
@@ -62,7 +63,7 @@ export const useColumns = ({ columns }: { columns: TableColumnItem[] }) => {
     flattedColumns.forEach((column: any) => {
       if (isLeaf(column)) {
         column.rowSpan = maxColumnDepth - column.depth + 1
-        column.colSpan = 1
+        column.colSpan = column.colSpan ?? 1
       } else {
         column.rowSpan = 1
         column.colSpan = getLeafChildren(column).length

diff --git a/packages/ui/table/src/types.ts b/packages/ui/table/src/types.ts
@@ -141,6 +141,10 @@ export type TableColumnItem = {
    * 多级表头
    */
   children?: TableColumnItem[]
+  /**
+   * 表头列合并，设置为 0 时，不渲染
+   */
+  colSpan?: number
   /**
    * 控制单元格自定义渲染
    */

diff --git a/packages/ui/table/stories/col-menu.stories.tsx b/packages/ui/table/stories/col-menu.stories.tsx
@@ -17,13 +17,12 @@ export const ColMenu = () => {
       dataKey: 'age',
       key: 2,
       width: 80,
-      sorter(pre, next) {
+      sorter(pre: any, next: any) {
         return pre.raw.age - next.raw.age
       },
     },
     {
       title: 'Home phone',
-      colSpan: 2,
       width: 180,
       dataKey: 'tel',
       key: 3,
@@ -36,79 +35,68 @@ export const ColMenu = () => {
     },
     {
       title: 'Home phone2',
-      colSpan: 2,
       width: 180,
       dataKey: 'tel2',
       key: 5,
     },
     {
       title: 'Home phone3',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel3',
       key: 6,
     },
     {
       title: 'Home phone4',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel4',
       key: 7,
     },
     {
       title: 'Home phone5',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel5',
       key: 8,
     },
     {
       title: 'Home phone6',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel6',
       key: 9,
     },
     {
       title: 'Home phone7',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel7',
       key: 10,
     },
     {
       title: 'Home phone8',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel8',
       key: 11,
     },
     {
       title: 'Home phone9',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel9',
       key: 12,
     },
     {
       title: 'Home phone10',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel10',
       key: 13,
     },
     {
       title: 'Home phone11',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel11',
       key: 14,
     },
 
     {
       title: 'Home phone12',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel12',
       key: 15,
     },
@@ -118,7 +106,7 @@ export const ColMenu = () => {
       dataKey: 'phone',
       width: 180,
       key: 16,
-      sorter(pre, next) {
+      sorter(pre: any, next: any) {
         return pre.phone - next.phone
       },
     },
@@ -232,14 +220,6 @@ export const ColMenu = () => {
     },
   ])
 
-  const onHighlightedCol = (changedColInfo, highlightedColKeys) => {
-    console.log(changedColInfo, highlightedColKeys)
-  }
-
-  const onChange = (pagination, sorter, extra) => {
-    console.log(pagination, sorter, extra)
-  }
-
   return (
     <>
       <h1>ColMenu for Table</h1>
@@ -248,8 +228,12 @@ export const ColMenu = () => {
           columns={columns}
           data={data}
           showColMenu
-          onHighlightedCol={onHighlightedCol}
-          onChange={onChange}
+          onHighlightedCol={(changedColInfo, highlightedColKeys) => {
+            console.log(changedColInfo, highlightedColKeys)
+          }}
+          onChange={(sorter, extra) => {
+            console.log(sorter, extra)
+          }}
         />
       </div>
     </>

diff --git a/packages/ui/table/stories/custom-filter.stories.tsx b/packages/ui/table/stories/custom-filter.stories.tsx
@@ -196,7 +196,6 @@ export const CustomFilter = () => {
           />
         </div>
       ),
-      colSpan: 2,
       width: 180,
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
@@ -215,7 +214,6 @@ export const CustomFilter = () => {
     },
     {
       title: 'Home phone2',
-      colSpan: 2,
       width: 180,
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
@@ -229,7 +227,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel3',
       key: 6,
     },
@@ -239,7 +236,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel4',
       key: 7,
     },
@@ -249,7 +245,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel5',
       key: 8,
     },
@@ -259,7 +254,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel6',
       key: 9,
     },
@@ -269,7 +263,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel7',
       key: 10,
     },
@@ -279,7 +272,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel8',
       key: 11,
     },
@@ -289,7 +281,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel9',
       key: 12,
     },
@@ -299,7 +290,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel10',
       key: 13,
     },
@@ -309,7 +299,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel11',
       key: 14,
     },
@@ -320,7 +309,6 @@ export const CustomFilter = () => {
       render(text) {
         return <EllipsisTooltip>{text}</EllipsisTooltip>
       },
-      colSpan: 2,
       dataKey: 'tel12',
       key: 15,
     },

diff --git a/packages/ui/table/stories/data-sorter.stories.tsx b/packages/ui/table/stories/data-sorter.stories.tsx
@@ -23,7 +23,6 @@ export const DataSorter = () => {
     },
     {
       title: 'Home phone',
-      colSpan: 2,
       width: 180,
       dataKey: 'tel',
       key: 3,
@@ -36,79 +35,68 @@ export const DataSorter = () => {
     },
     {
       title: 'Home phone2',
-      colSpan: 2,
       width: 180,
       dataKey: 'tel2',
       key: 5,
     },
     {
       title: 'Home phone3',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel3',
       key: 6,
     },
     {
       title: 'Home phone4',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel4',
       key: 7,
     },
     {
       title: 'Home phone5',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel5',
       key: 8,
     },
     {
       title: 'Home phone6',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel6',
       key: 9,
     },
     {
       title: 'Home phone7',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel7',
       key: 10,
     },
     {
       title: 'Home phone8',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel8',
       key: 11,
     },
     {
       title: 'Home phone9',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel9',
       key: 12,
     },
     {
       title: 'Home phone10',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel10',
       key: 13,
     },
     {
       title: 'Home phone11',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel11',
       key: 14,
     },
 
     {
       title: 'Home phone12',
       width: 180,
-      colSpan: 2,
       dataKey: 'tel12',
       key: 15,
     },