diff --git a/cypress/e2e/table.spec.js b/cypress/e2e/table.spec.js index d7e2519524..f7e811a031 100644 --- 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); + }) }); \ No newline at end of file diff --git a/packages/semi-ui/table/ResizableTable.tsx b/packages/semi-ui/table/ResizableTable.tsx index 61158fb42b..b7dbc397d2 100644 --- 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 ({ + 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 index 03aa05d733..2c46975b2f 100644 --- 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',