fix: fixed resizable table onHeaderCell bug #1796 (#1797)

Co-authored-by: shijia.me <[email protected]>
DouyinFE · Sep 1, 2023 · 6e3a679 · 6e3a679
1 parent 79bae7a
commit 6e3a679
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/cypress/e2e/table.spec.js b/cypress/e2e/table.spec.js
@@ -185,4 +185,10 @@ describe('table', () => {
         // filters 长度应该为 1
         cy.get('@consoleLog').should('be.calledWith', 1);
     });
+
+    it('resizable onHeaderCell', () => {
+        cy.visit('http://localhost:6006/iframe.html?id=table--resizable-table&viewMode=story');
+        cy.get('.test-1').should('have.length', 1);
+        cy.get('.test-2').should('have.length', 1);
+    })
 });
diff --git a/packages/semi-ui/table/ResizableTable.tsx b/packages/semi-ui/table/ResizableTable.tsx
@@ -141,19 +141,23 @@ const ResizableTable = (props: TableProps = {}, ref: React.MutableRefObject<Tabl
         setColumns(nextColumns);
     };
 
-    const resizableRender = (col: ColumnProps, index: number, level = 0) => ({
+    const resizableRender = (col: ColumnProps, index: number, level = 0, originalHeaderCellProps) => ({
         ...col,
-        onHeaderCell: (column: ColumnProps) => ({
-            width: column.width,
-            onResize: handleResize(column),
-            onResizeStart: handleResizeStart(column),
-            onResizeStop: handleResizeStop(column),
-        }),
+        onHeaderCell: (column: ColumnProps) => {
+            return {
+                ...originalHeaderCellProps,
+                width: column.width,
+                onResize: handleResize(column),
+                onResizeStart: handleResizeStart(column),
+                onResizeStop: handleResizeStop(column),
+            };
+        },
     });
 
     const assignResizableRender = (columns: ColumnProps[] = [], level = 0) => (Array.isArray(columns) && columns.length ?
         columns.map((col, index) => {
-            Object.assign(col, resizableRender(col, index, level));
+            const originalHeaderCellProps = col.onHeaderCell?.(col, index, level) ?? {};
+            Object.assign(col, resizableRender(col, index, level, originalHeaderCellProps));
             const children = col[childrenColumnName];
 
             if (Array.isArray(children) && children.length) {

diff --git a/packages/semi-ui/table/_story/ResizableTable/index.jsx b/packages/semi-ui/table/_story/ResizableTable/index.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { Table, Tooltip, Tag } from '@douyinfe/semi-ui';
 
+/**
+ * test with cypress, don't modify
+ */
 export default class ResizableDemo extends React.Component {
     constructor() {
         super();
@@ -20,12 +23,18 @@ export default class ResizableDemo extends React.Component {
                     },
                 ],
                 onFilter: (value, record) => record.name.includes(value),
+                onHeaderCell: (column, columnIndex) => ({
+                    className: `test-${columnIndex}`,
+                })
             },
             {
                 title: 'Age',
                 dataIndex: 'age',
                 width: 150,
                 sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+                onHeaderCell: (column, columnIndex) => ({
+                    className: `test-${columnIndex}`,
+                })
             },
             {
                 title: 'Address',