@gmfe/table-x 2.14.30-beta.2 → 2.14.30-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.30-beta.2",
+  "version": "2.14.30-beta.4",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",

package/src/hoc/two_level_header_table_x/rebuild_helper.js

@@ -80,13 +80,16 @@ export function rebuildNestedColumnsFromFlat(flatColumns) {
     }
   })
 
-  // 特殊列（select、diy、expand）必须放在最后
+  // 特殊列（select、diy、expand）的处理
   // 从 flatColumns 中提取特殊列，保持它们在 flatColumns 中的相对顺序
   const specialCols = flatColumns.filter(col =>
     specialColumnIds.includes(col.id)
   )
-  // 确保特殊列在最后
-  nested.push(...specialCols)
-
-  return nested
+  
+  // 分离 fixed: 'left' 的特殊列和其他特殊列
+  const leftFixedSpecialCols = specialCols.filter(col => col.fixed === 'left')
+  const otherSpecialCols = specialCols.filter(col => col.fixed !== 'left')
+  
+  // 按顺序：fixed: 'left' 的特殊列 -> 普通列 -> 其他特殊列
+  return [...leftFixedSpecialCols, ...nested, ...otherSpecialCols]
 }

package/src/hoc/two_level_header_table_x/td.js

@@ -6,12 +6,64 @@ import React from 'react'
 // cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
 // 这里是为了兼容 cell.render('Cell') 返回undefined的情况
 class TdCatchErr extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  static getDerivedStateFromError(error) {
+    // 捕获子组件树中的错误，返回新的 state
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // 静默处理错误，不打印日志
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    const children = this.props.children
+    // 如果 children 是 undefined 或 null，返回 null（React 允许返回 null）
+    if (children === undefined || children === null) {
+      return null
+    }
+    return children
+  }
+}
+
+// 创建一个包装组件，用于包装 Cell 组件的 type，确保它总是返回有效值
+// 这个组件会包装原始的 Cell 组件，如果原始组件返回 undefined，就返回 null
+const SafeCellWrapper = OriginalComponent => {
+  return function WrappedCell(props) {
+    try {
+      const result = OriginalComponent(props)
+      // 如果原始组件返回 undefined，返回 null
+      return result === undefined ? null : result
+    } catch (error) {
+      return null
+    }
+  }
+}
+
+// 错误边界组件，专门用于捕获 Cell 组件返回 undefined 的错误
+class SafeCellErrorBoundary extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true }
+  }
+
   componentDidCatch(error, errorInfo) {
-    console.warn(error)
-    console.warn(errorInfo.componentStack)
+    // 静默处理错误
   }
 
   render() {
+    if (this.state.hasError) {
+      return null
+    }
     return this.props.children
   }
 }
@@ -40,12 +92,26 @@ const Td = ({ cell, totalWidth }) => {
   }
 
   // 如果 Cell 返回 undefined，转换为 null（null 不会报错，undefined 会）
-  const cellContent = cell.render('Cell')
-  const safeCellContent = cellContent === undefined ? null : cellContent
+  let cellContent = cell.render('Cell')
+
+  // cellContent 是一个 React 元素，但它的 type（组件）在渲染时可能返回 undefined
+  // 我们需要用一个包装组件来替换原始的 type，确保总是返回有效值
+  if (cellContent && React.isValidElement(cellContent)) {
+    // 创建一个新的 React 元素，用包装组件替换原始的 type
+    const OriginalComponent = cellContent.type
+    const WrappedComponent = SafeCellWrapper(OriginalComponent)
+    cellContent = React.createElement(
+      SafeCellErrorBoundary,
+      null,
+      React.createElement(WrappedComponent, cellContent.props)
+    )
+  } else if (cellContent === undefined || cellContent === null) {
+    cellContent = null
+  }
 
   return (
     <td {...tdProps}>
-      <TdCatchErr>{safeCellContent}</TdCatchErr>
+      <TdCatchErr>{cellContent}</TdCatchErr>
     </td>
   )
 }

package/src/hoc/two_level_header_table_x/thead.js

@@ -174,7 +174,12 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               }
             }
           }
-          const { colSpan: hpColSpan, rowSpan: hpRowSpan, ...restHp } = hp || {}
+          const {
+            colSpan: hpColSpan,
+            rowSpan: hpRowSpan,
+            key: hpKey,
+            ...restHp
+          } = hp || {}
           const finalRowSpan =
             rowSpan !== undefined ? Number(rowSpan) : undefined
           const finalColSpan =
@@ -201,8 +206,12 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
             style: cellStyle
           }
 
+          // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
+          // 如果有 hpKey，也加上索引以确保唯一性（因为 hpKey 可能也会重复）
+          const baseKey = hpKey || header.id || header.accessor
+          const headerKey = baseKey ? `${baseKey}-${idx}` : `header-${idx}`
           return (
-            <th key={idx} {...thProps}>
+            <th key={headerKey} {...thProps}>
               {typeof header.Header === 'function' ? (
                 <header.Header />
               ) : (
@@ -248,9 +257,15 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
             ) {
               return null
             }
+            // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
+            const columnKey = column.id
+              ? `${column.id}-${idx}`
+              : column.accessor
+              ? `${column.accessor}-${idx}`
+              : `col-${idx}`
             return (
               <Th
-                key={idx}
+                key={columnKey}
                 column={{
                   ...column,
                   // column.fixed 已经在 transformColumnsForTwoLevel 中正确设置

package/src/hoc/two_level_header_table_x/transform_helper.js

@@ -51,11 +51,16 @@ export function transformColumnsForTwoLevel(columns) {
 
   // 分离普通列和特殊列
   const normalColumns = []
-  const specialColumns = []
+  const leftFixedSpecialColumns = []  // fixed: 'left' 的特殊列（如 diy）
+  const otherSpecialColumns = []      // 其他特殊列（如 select、expand）
 
   columns.forEach(column => {
     if (specialColumnIds.includes(column.id)) {
-      specialColumns.push(column)
+      if (column.fixed === 'left') {
+        leftFixedSpecialColumns.push(column)
+      } else {
+        otherSpecialColumns.push(column)
+      }
     } else {
       normalColumns.push(column)
     }
@@ -125,10 +130,21 @@ export function transformColumnsForTwoLevel(columns) {
     }
   })
 
-  // 最后处理特殊列（select、diy、expand）放在最后
+  // 处理 fixed: 'left' 的特殊列（如 diy），放在最前面
+  leftFixedSpecialColumns.forEach(column => {
+    transformedColumns.unshift(column)
+    firstLevelHeaders.unshift({
+      ...column,
+      hasSubColumns: false,
+      subColumnCount: 1,
+      isSpecialColumn: true
+    })
+  })
+
+  // 最后处理其他特殊列（select、expand）放在最后
   // 注意：移除特殊列的 fixed 属性，让它们按数组顺序显示在最后（不固定）
   // 如果用户需要特殊列固定在右边，可以手动设置 fixed: 'right'
-  specialColumns.forEach(column => {
+  otherSpecialColumns.forEach(column => {
     const { fixed, ...columnWithoutFixed } = column
     const adjustedColumn = {
       ...columnWithoutFixed,