@gmfe/table-x 2.14.30-alpha.0 → 2.14.30-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.30-alpha.0",
+  "version": "2.14.30-beta.1",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,9 +27,8 @@
   },
   "dependencies": {
     "@gm-common/tool": "^1.0.0",
-    "@gmfe/business": "^2.14.30-alpha.0",
-    "@gmfe/locales": "^2.14.30-alpha.0",
-    "@gmfe/react": "^2.14.30-alpha.0",
+    "@gmfe/locales": "^2.14.29",
+    "@gmfe/react": "^2.14.29",
     "classnames": "^2.2.5",
     "lodash": "^4.17.14",
     "prop-types": "^15.7.2",
@@ -37,5 +36,5 @@
     "react-window": "^1.8.5",
     "sortablejs": "^1.10.1"
   },
-  "gitHead": "f7da14010d37550f0a19949fe4a5b3d65301545a"
+  "gitHead": "8d291ad2d8b321f27918ac65cf201bd1eb8872a8"
 }

package/src/base/index.js

@@ -6,7 +6,6 @@ import classNames from 'classnames'
 import _ from 'lodash'
 import THead from './thead'
 import Tr from './tr'
-import { StickyLayout } from '@gmfe/react'
 
 // 给定初始值，交由getColumnStyle控制。width逻辑保持跟react-table（v6）的用法一致。
 const defaultColumn = __DEFAULT_COLUMN
@@ -140,4 +139,4 @@ TableX.defaultProps = {
   isTrHighlight: () => false
 }
 
-export default StickyLayout(TableX)
+export default TableX

package/src/base/td.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import { getColumnStyle } from '../util'
+import { getColumnStyle } from '@gmfe/table-x/src/util'
 import PropTypes from 'prop-types'
 import React from 'react'
 

package/src/base/thead.js

@@ -4,7 +4,7 @@ import Th from './th'
 
 const THead = ({ headerGroups, totalWidth }) => {
   return (
-    <thead className='gm-table-x-thead common-sticky-header'>
+    <thead className='gm-table-x-thead'>
       {headerGroups.map((headerGroup, i) => (
         <tr key={i} className='gm-table-x-tr'>
           {headerGroup.headers.map((column, i) => (

package/src/base/tr.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import Td from './td'
+import Td from '@gmfe/table-x/src/base/td'
 
 const Tr = ({
   row,
@@ -10,7 +10,7 @@ const Tr = ({
   style,
   totalWidth,
   isTrDisable,
-  isTrHighlight,
+  isTrHighlight
 }) => {
   const props = {
     ...row.getRowProps(),

package/src/hoc/two_level_header_table_x/flatten_helper.js

@@ -0,0 +1,29 @@
+/**
+ * 扁平化 columns（用于 select 和 diy 处理）
+ * 将带有 subColumns 的 columns 展开为扁平结构
+ *
+ * 对于有 subColumns 的列，会给每个 subColumn 添加：
+ * - parentKey: 父级列的 id（用于重建时识别分组）
+ * - parentHeader: 父级列的 Header（用于重建时显示一级表头）
+ * - parentFixed: 父级列的 fixed 属性（用于重建时设置 fixed）
+ */
+export function flattenColumnsForSelectAndDiy(columns) {
+  const flattened = []
+  columns.forEach(column => {
+    if (column.subColumns && column.subColumns.length > 0) {
+      column.subColumns.forEach(subCol => {
+        const { fixed: _subColFixed, ...subColWithoutFixed } = subCol
+        flattened.push({
+          ...subColWithoutFixed,
+          parentKey: column.id || column.Header, // 父级标识
+          parentHeader: column.Header,
+          parentFixed: column.fixed
+        })
+      })
+    } else {
+      // 没有 subColumns，直接添加
+      flattened.push(column)
+    }
+  })
+  return flattened
+}

package/src/hoc/two_level_header_table_x/rebuild_helper.js

@@ -0,0 +1,92 @@
+import {
+  TABLE_X_SELECT_ID,
+  TABLE_X_DIY_ID,
+  TABLE_X_EXPAND_ID
+} from '../../util'
+
+/**
+ * 根据扁平化的 columns 重建嵌套结构
+ * 输入：
+ *   - flatColumns: 处理后的扁平 columns（每个 subColumn 都带有 parentKey、parentHeader、parentFixed 属性）
+ * 输出：重建的嵌套结构（严格按照 flatColumns 的顺序输出）
+ */
+export function rebuildNestedColumnsFromFlat(flatColumns) {
+  const nested = []
+  const specialColumnIds = [
+    TABLE_X_SELECT_ID,
+    TABLE_X_DIY_ID,
+    TABLE_X_EXPAND_ID
+  ]
+
+  // 普通列（排除特殊列）
+  const normalCols = flatColumns.filter(
+    col => !specialColumnIds.includes(col.id)
+  )
+  // 收集分组数据：parentKey -> { parentHeader, parentFixed, subCols: [] }
+  const groupMap = new Map()
+
+  // 遍历一次：收集所有分组的数据
+  normalCols.forEach(col => {
+    if (col.parentKey) {
+      // 有 parentKey：二级分类的子列
+      if (!groupMap.has(col.parentKey)) {
+        groupMap.set(col.parentKey, {
+          parentHeader: col.parentHeader,
+          parentFixed: col.parentFixed,
+          subCols: []
+        })
+      }
+      // 移除临时属性并添加到分组
+      const {
+        parentKey: _p,
+        parentHeader: _h,
+        parentFixed: parentFixedValue,
+        ...colWithoutParent
+      } = col
+      const { fixed: _subColFixed, ...colWithoutFixed } = colWithoutParent
+      groupMap.get(col.parentKey).subCols.push({
+        ...colWithoutFixed,
+        fixed: parentFixedValue
+      })
+    }
+  })
+
+  // 再次遍历：按 flatColumns 的顺序输出普通列
+  const processedGroups = new Set()
+
+  normalCols.forEach(col => {
+    if (col.parentKey) {
+      // 有 parentKey：在第一次遇到的位置输出分组
+      if (!processedGroups.has(col.parentKey)) {
+        processedGroups.add(col.parentKey)
+        const group = groupMap.get(col.parentKey)
+        const visibleSubCols = group.subCols.filter(
+          subCol => subCol.show !== false
+        )
+        if (visibleSubCols.length > 0) {
+          nested.push({
+            Header: group.parentHeader,
+            id: col.parentKey,
+            fixed: group.parentFixed,
+            subColumns: visibleSubCols
+          })
+        }
+      }
+    } else {
+      // 无 parentKey：单独列，直接输出
+      if (col.show !== false) {
+        nested.push(col)
+      }
+    }
+  })
+
+  // 特殊列（select、diy、expand）必须放在最后
+  // 从 flatColumns 中提取特殊列，保持它们在 flatColumns 中的相对顺序
+  const specialCols = flatColumns.filter(col =>
+    specialColumnIds.includes(col.id)
+  )
+  // 确保特殊列在最后
+  nested.push(...specialCols)
+
+  return nested
+}

package/src/hoc/two_level_header_table_x/table_x.js

@@ -0,0 +1,169 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { useTable } from 'react-table'
+import { Empty, Loading, afterScroll, __DEFAULT_COLUMN } from '../../util'
+import classNames from 'classnames'
+import _ from 'lodash'
+import TwoLevelTHead from './thead'
+import Tr from './tr'
+import { rebuildNestedColumnsFromFlat } from './rebuild_helper'
+import { transformColumnsForTwoLevel } from './transform_helper'
+
+const defaultColumn = __DEFAULT_COLUMN
+
+/**
+ * 支持两级表头的 TableX 组件
+ *
+ * 接收：
+ *   - columns: 处理后的扁平 columns（经过 select、diy HOC 处理，每个 subColumn 都带有 parentKey、parentHeader、parentFixed 属性）
+ *
+ * 功能：
+ *   1. 根据 parentKey 重建嵌套结构
+ *   2. 转换为 react-table 格式
+ *   3. 使用 TwoLevelTHead 渲染两级表头
+ */
+const TwoLevelTableX = ({
+  columns,
+  data,
+  loading,
+  SubComponent,
+  keyField = 'value',
+  className,
+  tiled = false,
+  onScroll,
+  isTrDisable = () => false,
+  isTrHighlight = () => false,
+  ...rest
+}) => {
+  const rebuiltColumns = useMemo(() => {
+    return rebuildNestedColumnsFromFlat(columns)
+  }, [columns])
+
+  const { transformedColumns, firstLevelHeaders } = useMemo(() => {
+    return transformColumnsForTwoLevel(rebuiltColumns)
+  }, [rebuiltColumns])
+
+  const visibleColumns = useMemo(() => {
+    return transformedColumns.filter(c => c.show !== false)
+  }, [transformedColumns])
+
+  const {
+    getTableProps,
+    headerGroups,
+    getTableBodyProps,
+    rows,
+    prepareRow
+  } = useTable({
+    columns: visibleColumns,
+    data,
+    defaultColumn
+  })
+
+  let totalWidth = 0
+  if (rows[0] && rows[0].cells.length > 0) {
+    prepareRow(rows[0])
+    const last = rows[0].cells[rows[0].cells.length - 1].column
+    totalWidth = last.totalLeft + last.totalWidth
+  }
+
+  const gtp = getTableProps()
+  const tableStyle =
+    totalWidth > 0
+      ? { width: '100%', minWidth: totalWidth + 'px' }
+      : { width: '100%' }
+
+  const tableProps = {
+    ...gtp,
+    style: tableStyle,
+    className: classNames(
+      'gm-table-x-table',
+      'gm-table-x-table-two-level',
+      gtp.className
+    )
+  }
+
+  const gtbp = getTableBodyProps()
+  const tableBodyProps = {
+    ...gtbp,
+    className: 'gm-table-x-tbody'
+  }
+
+  const handleScroll = e => {
+    onScroll && onScroll(e)
+    afterScroll()
+  }
+
+  const RenderRow = ({ index, style }) => {
+    const row = rows[index]
+    prepareRow(row)
+
+    return (
+      <Tr
+        key={row.index}
+        row={row}
+        SubComponent={SubComponent}
+        keyField={keyField}
+        style={style}
+        totalWidth={totalWidth}
+        isTrDisable={isTrDisable}
+        isTrHighlight={isTrHighlight}
+      />
+    )
+  }
+
+  return (
+    <div
+      {...rest}
+      className={classNames(
+        'gm-table-x',
+        {
+          'gm-table-x-empty': data.length === 0,
+          'gm-table-x-tiled': tiled
+        },
+        className
+      )}
+      onScroll={handleScroll}
+    >
+      <table {...tableProps}>
+        <TwoLevelTHead
+          headerGroups={headerGroups}
+          firstLevelHeaders={firstLevelHeaders}
+          totalWidth={totalWidth}
+        />
+        <tbody {...tableBodyProps}>
+          {_.map(rows, row =>
+            RenderRow({
+              index: row.index,
+              style: {}
+            })
+          )}
+        </tbody>
+      </table>
+      {loading && <Loading style={{ marginTop: '92px' }} />}
+      {!loading && data.length === 0 && <Empty />}
+    </div>
+  )
+}
+
+TwoLevelTableX.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired,
+  loading: PropTypes.bool,
+  SubComponent: PropTypes.func,
+  keyField: PropTypes.string,
+  tiled: PropTypes.bool,
+  isTrDisable: PropTypes.func,
+  isTrHighlight: PropTypes.func,
+  onScroll: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+}
+
+TwoLevelTableX.defaultProps = {
+  keyField: 'value',
+  tiled: false,
+  isTrDisable: () => false,
+  isTrHighlight: () => false
+}
+
+export default TwoLevelTableX

package/src/hoc/two_level_header_table_x/td.js

@@ -0,0 +1,60 @@
+import classNames from 'classnames'
+import { getColumnStyle } from '../../util'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+// cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
+// 这里是为了兼容 cell.render('Cell') 返回undefined的情况
+class TdCatchErr extends React.Component {
+  componentDidCatch(error, errorInfo) {
+    console.warn(error)
+    console.warn(errorInfo.componentStack)
+  }
+
+  render() {
+    return this.props.children
+  }
+}
+
+const Td = ({ cell, totalWidth }) => {
+  const cp = cell.getCellProps()
+  const { tdClassName } = cell.column
+  const tdProps = {
+    ...cp,
+    className: classNames('gm-table-x-td', tdClassName, {
+      'gm-table-x-fixed-left': cell.column.fixed === 'left',
+      'gm-table-x-fixed-right': cell.column.fixed === 'right'
+    }),
+    style: {
+      ...cp.style,
+      ...getColumnStyle(cell.column)
+    }
+  }
+
+  if (cell.column.fixed === 'left') {
+    // 用到 fixed，可以利用 totalLeft
+    tdProps.style.left = cell.column.totalLeft
+  } else if (cell.column.fixed === 'right') {
+    tdProps.style.right =
+      totalWidth - cell.column.totalLeft - cell.column.totalWidth
+  }
+
+  // 如果 Cell 返回 undefined，转换为 null（null 不会报错，undefined 会）
+  const cellContent = cell.render('Cell')
+  const safeCellContent = cellContent === undefined ? null : cellContent
+
+  return (
+    <td {...tdProps}>
+      <TdCatchErr>{safeCellContent}</TdCatchErr>
+    </td>
+  )
+}
+
+Td.whyDidYouRender = true
+
+Td.propTypes = {
+  cell: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(Td)

package/src/hoc/two_level_header_table_x/thead.js

@@ -0,0 +1,278 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import classNames from 'classnames'
+import Th from '../../base/th'
+import { getColumnStyle, SortHeader } from '../../util'
+
+/**
+ * 二级表头组件
+ * 渲染两级表头：
+ * - 第一行：一级表头（有子列的显示一级表头，没有子列的占两行）
+ * - 第二行：二级表头（只有有子列的一级表头才显示）
+ */
+const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
+  const hasNestedHeaders = headerGroups.length > 1
+  const firstLevelGroup = hasNestedHeaders ? headerGroups[0] : null
+  const secondLevelGroup = hasNestedHeaders ? headerGroups[1] : headerGroups[0]
+
+  // 构建第一级表头的渲染信息
+  const firstLevelCells = []
+  let secondLevelIndex = 0 // 在第二级表头中的索引
+
+  firstLevelHeaders.forEach((firstLevelHeader, idx) => {
+    if (firstLevelHeader.hasSubColumns) {
+      // 有子列：从第二级表头中获取对应的列
+      const subColumnCount = firstLevelHeader.subColumnCount
+      const subColumns = secondLevelGroup.headers.slice(
+        secondLevelIndex,
+        secondLevelIndex + subColumnCount
+      )
+
+      // 获取对应的第一级分组列对象
+      const groupColumn = firstLevelGroup
+        ? firstLevelGroup.headers.find(col => {
+            // 通过 id 或 Header 匹配
+            return (
+              col.id === firstLevelHeader.id ||
+              (col.columns && col.columns.length === subColumnCount)
+            )
+          }) || firstLevelGroup.headers[idx]
+        : null
+
+      // 计算分组列的总宽度（所有子列的宽度之和）
+      let totalSubWidth = 0
+      subColumns.forEach(subCol => {
+        const style = getColumnStyle(subCol)
+        const width = parseFloat(style.width) || subCol.totalWidth || 0
+        totalSubWidth += width
+      })
+
+      firstLevelCells.push({
+        type: 'group',
+        header: firstLevelHeader,
+        colSpan: subColumnCount,
+        subColumns: subColumns,
+        totalWidth: totalSubWidth, // 添加总宽度
+        column: groupColumn,
+        secondLevelStartIndex: secondLevelIndex
+      })
+
+      secondLevelIndex += subColumnCount
+    } else {
+      let singleColumn = null
+
+      // 优先从 firstLevelGroup 中查找单列（用于 getHeaderProps 等）
+      if (firstLevelGroup) {
+        singleColumn = firstLevelGroup.headers.find(col => {
+          // 通过 id 或 accessor 匹配
+          const matchId = col.id === firstLevelHeader.id
+          const matchAccessor =
+            col.accessor === firstLevelHeader.accessor ||
+            (typeof col.accessor === 'function' &&
+              typeof firstLevelHeader.accessor === 'function' &&
+              col.accessor.toString() === firstLevelHeader.accessor.toString())
+          return matchId || matchAccessor
+        })
+      }
+
+      // 如果 firstLevelGroup 中没找到，从 secondLevelGroup 获取
+      if (!singleColumn) {
+        singleColumn = secondLevelGroup.headers[secondLevelIndex]
+      }
+      firstLevelCells.push({
+        type: 'single',
+        header: firstLevelHeader,
+        colSpan: 1,
+        rowSpan: 2, // 明确设置为 2，占两行
+        column: singleColumn,
+        secondLevelIndex: secondLevelIndex
+      })
+
+      secondLevelIndex += 1
+    }
+  })
+
+  return (
+    <thead className='gm-table-x-thead gm-table-x-thead-two-level'>
+      {/* 第一级表头行 */}
+      <tr className='gm-table-x-tr gm-table-x-tr-first-level'>
+        {firstLevelCells.map((cell, idx) => {
+          const { column, header, colSpan, rowSpan, type } = cell
+
+          // 对于分组列，使用分组列对象；对于单列，使用单列对象
+          const headerColumn = column
+          const hp = headerColumn ? headerColumn.getHeaderProps() : {}
+          const { thClassName, style } = headerColumn || {}
+
+          // 计算样式
+          let cellStyle = {
+            ...hp.style,
+            ...style
+          }
+
+          const fixed =
+            type === 'group'
+              ? header.fixed // 分组列直接使用 header.fixed，不 fallback 到 headerColumn
+              : headerColumn?.fixed !== undefined
+              ? headerColumn.fixed
+              : header.fixed
+
+          // 判断是否是最后一列（通过检查是否是 firstLevelCells 的最后一个元素）
+          const isLastCell = idx === firstLevelCells.length - 1
+
+          if (type === 'group') {
+            const { flex, width, minWidth, maxWidth, ...restStyle } = cellStyle
+            cellStyle = restStyle
+          } else if (headerColumn) {
+            const columnStyle = getColumnStyle(headerColumn)
+            const { flex, ...restColumnStyle } = columnStyle
+            cellStyle = {
+              ...cellStyle,
+              ...restColumnStyle // 只使用 width 和 maxWidth，不使用 flex
+            }
+
+            // 如果有固定列，确保宽度不被压缩
+            if (fixed === 'left' || fixed === 'right') {
+              const width = restColumnStyle.width
+              if (width) {
+                cellStyle.minWidth = width
+              }
+            }
+          }
+          if (fixed === 'left') {
+            if (
+              type === 'group' &&
+              cell.subColumns &&
+              cell.subColumns.length > 0
+            ) {
+              cellStyle.left = cell.subColumns[0].totalLeft
+            } else if (headerColumn) {
+              cellStyle.left = headerColumn.totalLeft
+            }
+          } else if (fixed === 'right') {
+            // 对于分组列，使用最后一个子列的位置
+            if (
+              type === 'group' &&
+              cell.subColumns &&
+              cell.subColumns.length > 0
+            ) {
+              const lastSubCol = cell.subColumns[cell.subColumns.length - 1]
+              // 如果是最后一列，直接设置 right: 0
+              if (isLastCell) {
+                cellStyle.right = 0
+              } else {
+                cellStyle.right =
+                  totalWidth - lastSubCol.totalLeft - lastSubCol.totalWidth
+              }
+            } else if (headerColumn) {
+              // 如果是最后一列，直接设置 right: 0
+              if (isLastCell) {
+                cellStyle.right = 0
+              } else {
+                cellStyle.right =
+                  totalWidth - headerColumn.totalLeft - headerColumn.totalWidth
+              }
+            }
+          }
+          const { colSpan: hpColSpan, rowSpan: hpRowSpan, ...restHp } = hp || {}
+          const finalRowSpan =
+            rowSpan !== undefined ? Number(rowSpan) : undefined
+          const finalColSpan =
+            colSpan !== undefined
+              ? Number(colSpan)
+              : hpColSpan !== undefined
+              ? Number(hpColSpan)
+              : undefined
+
+          const thProps = {
+            ...restHp,
+            ...(finalColSpan !== undefined && { colSpan: finalColSpan }),
+            ...(finalRowSpan !== undefined && { rowSpan: finalRowSpan }), // 只有定义了才添加
+            className: classNames(
+              'gm-table-x-th',
+              'gm-table-x-th-first-level',
+              hp?.className,
+              thClassName,
+              {
+                'gm-table-x-fixed-left': fixed === 'left',
+                'gm-table-x-fixed-right': fixed === 'right'
+              }
+            ),
+            style: cellStyle
+          }
+
+          return (
+            <th key={idx} {...thProps}>
+              {typeof header.Header === 'function' ? (
+                <header.Header />
+              ) : (
+                header.Header
+              )}
+              {headerColumn?.canSort && (
+                <SortHeader
+                  {...headerColumn.getSortByToggleProps()}
+                  type={
+                    headerColumn.isSorted
+                      ? headerColumn.isSortedDesc
+                        ? 'desc'
+                        : 'asc'
+                      : null
+                  }
+                />
+              )}
+            </th>
+          )
+        })}
+      </tr>
+
+      {/* 第二级表头行（只有有子列的情况才显示） */}
+      {hasNestedHeaders && secondLevelGroup && (
+        <tr className='gm-table-x-tr gm-table-x-tr-second-level'>
+          {secondLevelGroup.headers.map((column, idx) => {
+            // 找到这个列对应的第一级表头
+            const correspondingFirstLevel = firstLevelCells.find(cell => {
+              if (cell.type === 'single') {
+                return cell.secondLevelIndex === idx
+              } else if (cell.type === 'group') {
+                return (
+                  idx >= cell.secondLevelStartIndex &&
+                  idx < cell.secondLevelStartIndex + cell.colSpan
+                )
+              }
+              return false
+            })
+
+            if (
+              correspondingFirstLevel &&
+              correspondingFirstLevel.type === 'single'
+            ) {
+              return null
+            }
+            return (
+              <Th
+                key={idx}
+                column={{
+                  ...column,
+                  // column.fixed 已经在 transformColumnsForTwoLevel 中正确设置
+                  thClassName: classNames(
+                    column.thClassName,
+                    'gm-table-x-th-second-level'
+                  )
+                }}
+                totalWidth={totalWidth}
+              />
+            )
+          })}
+        </tr>
+      )}
+    </thead>
+  )
+}
+
+TwoLevelTHead.propTypes = {
+  headerGroups: PropTypes.array.isRequired,
+  firstLevelHeaders: PropTypes.array.isRequired,
+  totalWidth: PropTypes.number.isRequired
+}
+
+export default React.memo(TwoLevelTHead)

package/src/hoc/two_level_header_table_x/tr.js

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import Td from './td'
+
+const Tr = ({
+  row,
+  SubComponent,
+  keyField,
+  style,
+  totalWidth,
+  isTrDisable,
+  isTrHighlight
+}) => {
+  const props = {
+    ...row.getRowProps(),
+    style,
+    className: classNames('gm-table-x-tr', {
+      'gm-table-x-tr-disable': isTrDisable(row.original, row.index),
+      'gm-table-x-tr-highlight': isTrHighlight(row.original, row.index),
+      'gm-table-x-tr-odd': row.index % 2 === 0,
+      'gm-table-x-tr-even': row.index % 2 !== 0
+    })
+  }
+
+  // 目前视为了 sortable 用。值可能是 undefined，keyField 没作用的情况
+  const dataId = row.original[keyField]
+
+  return (
+    <>
+      <tr data-id={dataId} {...props}>
+        {row.cells.map((cell, cellIndex) => (
+          <Td key={cellIndex} cell={cell} totalWidth={totalWidth} />
+        ))}
+      </tr>
+      {SubComponent && SubComponent(row)}
+    </>
+  )
+}
+
+Tr.whyDidYouRender = true
+
+Tr.propTypes = {
+  row: PropTypes.object.isRequired,
+  SubComponent: PropTypes.func,
+  keyField: PropTypes.string.isRequired,
+  style: PropTypes.object.isRequired,
+  totalWidth: PropTypes.number.isRequired,
+  isTrDisable: PropTypes.func,
+  isTrHighlight: PropTypes.func
+}
+
+export default React.memo(Tr)

package/src/hoc/two_level_header_table_x/transform_helper.js

@@ -0,0 +1,149 @@
+import {
+  TABLE_X_SELECT_ID,
+  TABLE_X_DIY_ID,
+  TABLE_X_EXPAND_ID
+} from '../../util'
+
+/**
+ * 检查一级表头下的子列 fixed 状态是否一致
+ */
+function validateSubColumnsFixed(column) {
+  if (!column.subColumns || column.subColumns.length === 0) {
+    return { valid: true }
+  }
+
+  const subColumns = column.subColumns
+  // 重要：二级分类的 fixed 应该与一级分类保持一致
+  // 所以验证时，所有子列应该使用一级表头的 fixed（column.fixed）
+  const expectedFixed = column.fixed !== undefined ? column.fixed : undefined
+  const fixedStates = subColumns.map(subCol => {
+    // 子列的 fixed 应该与一级表头一致，如果有不一致的，记录实际的 fixed 用于检查
+    return subCol.fixed !== undefined ? subCol.fixed : expectedFixed
+  })
+
+  const allSame = fixedStates.every(fixed => fixed === expectedFixed)
+
+  if (!allSame) {
+    return {
+      valid: false,
+      error:
+        `一级表头 "${column.Header || column.id}" 下的子列 fixed 状态不一致。` +
+        `为了避免滚动时表头宽度错位，请确保同一一级表头下的所有子列要么全部固定，要么全部不固定。`
+    }
+  }
+
+  return { valid: true }
+}
+
+/**
+ * 将带有 subColumns 的 columns 转换为 react-table 可以理解的嵌套结构
+ * 输入：[{ Header: '菜品信息', subColumns: [...] }]
+ * 输出：[{ Header: '菜品信息', columns: [...] }] (react-table 格式)
+ */
+export function transformColumnsForTwoLevel(columns) {
+  const transformedColumns = []
+  const firstLevelHeaders = []
+  const specialColumnIds = [
+    TABLE_X_SELECT_ID,
+    TABLE_X_DIY_ID,
+    TABLE_X_EXPAND_ID
+  ]
+
+  // 分离普通列和特殊列
+  const normalColumns = []
+  const specialColumns = []
+
+  columns.forEach(column => {
+    if (specialColumnIds.includes(column.id)) {
+      specialColumns.push(column)
+    } else {
+      normalColumns.push(column)
+    }
+  })
+
+  // 先处理普通列
+  normalColumns.forEach((column, index) => {
+    if (column.subColumns && column.subColumns.length > 0) {
+      // 过滤可见的子列
+      const visibleSubCols = column.subColumns.filter(
+        subCol => subCol.show !== false
+      )
+
+      // 如果所有子列都被隐藏，跳过这个一级表头
+      if (visibleSubCols.length === 0) {
+        return
+      }
+
+      // 验证 fixed 状态（使用可见的子列）
+      const validation = validateSubColumnsFixed({
+        ...column,
+        subColumns: visibleSubCols
+      })
+      if (!validation.valid) {
+        console.error(
+          `[TwoLevelTableX] 配置错误 (第 ${index + 1} 个列):`,
+          validation.error
+        )
+        if (process.env.NODE_ENV === 'development') {
+          throw new Error(validation.error)
+        }
+      }
+
+      firstLevelHeaders.push({
+        ...column,
+        hasSubColumns: true,
+        subColumnCount: visibleSubCols.length // 使用可见子列的数量
+      })
+
+      // 确定统一的 fixed 状态
+      // 重要：只使用一级表头的 fixed 属性，二级分类的 fixed 应该与一级分类保持一致
+      const unifiedFixed = column.fixed !== undefined ? column.fixed : undefined
+
+      // 转换为 react-table 的嵌套结构（只使用可见的子列）
+      transformedColumns.push({
+        Header: column.Header,
+        id: column.id || `group_${transformedColumns.length}`,
+        fixed: unifiedFixed,
+        columns: visibleSubCols.map(subCol => {
+          // 移除子列自己的 fixed 属性，强制使用一级表头的 fixed
+          const { fixed: _subColFixed, ...subColWithoutFixed } = subCol
+          return {
+            ...subColWithoutFixed,
+            fixed: unifiedFixed // 二级分类的 fixed 与一级分类保持一致
+          }
+        })
+      })
+    } else {
+      // 没有 subColumns，直接添加（会占两行）
+      firstLevelHeaders.push({
+        ...column,
+        hasSubColumns: false,
+        subColumnCount: 1
+      })
+
+      transformedColumns.push(column)
+    }
+  })
+
+  // 最后处理特殊列（select、diy、expand）放在最后
+  // 注意：移除特殊列的 fixed 属性，让它们按数组顺序显示在最后（不固定）
+  // 如果用户需要特殊列固定在右边，可以手动设置 fixed: 'right'
+  specialColumns.forEach(column => {
+    const { fixed, ...columnWithoutFixed } = column
+    const adjustedColumn = {
+      ...columnWithoutFixed,
+      // 特殊列应该在最后，移除 fixed: 'left'，让它们按数组顺序显示
+      // 如果需要固定在右边，可以改为 fixed: 'right'
+      fixed: fixed === 'left' ? undefined : fixed
+    }
+    transformedColumns.push(adjustedColumn)
+    firstLevelHeaders.push({
+      ...adjustedColumn,
+      hasSubColumns: false,
+      subColumnCount: 1,
+      isSpecialColumn: true
+    })
+  })
+
+  return { transformedColumns, firstLevelHeaders }
+}

package/src/hoc/two_level_header_table_x.js

@@ -0,0 +1,36 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import { flattenColumnsForSelectAndDiy } from './two_level_header_table_x/flatten_helper'
+
+/**
+ * 两级表头 HOC
+ * 功能：将带 subColumns 的 columns 扁平化，传递给内部 Component 处理
+ *
+ * 使用方式：
+ * const TwoLevelTable = twoLevelHeaderTableXHOC(
+ *   selectTableXHOC(
+ *     diyTableXHOC(TwoLevelTableX)
+ *   )
+ * )
+ *
+ * 注意：当存在一级表头相同的列时，在column配置中加id标识区分，避免混乱
+ */
+function twoLevelHeaderTableXHOC(Component) {
+  const TwoLevelHeaderTableXWrapper = props => {
+    const { columns: originalColumns, ...rest } = props
+
+    const flattenedColumns = useMemo(() => {
+      return flattenColumnsForSelectAndDiy(originalColumns)
+    }, [originalColumns])
+
+    return <Component {...rest} columns={flattenedColumns} />
+  }
+
+  TwoLevelHeaderTableXWrapper.propTypes = {
+    columns: PropTypes.array.isRequired
+  }
+
+  return TwoLevelHeaderTableXWrapper
+}
+
+export default twoLevelHeaderTableXHOC

package/src/index.js

@@ -7,6 +7,8 @@ import sortableTableXHOC from './hoc/sortable_table_x'
 import subTableXHOC from './hoc/sub_table_x'
 import editTableXHOC from './hoc/edit_table_x'
 import diyTableXHOC from './hoc/diy_table_x'
+import twoLevelHeaderTableXHOC from './hoc/two_level_header_table_x'
+import TwoLevelTableX from './hoc/two_level_header_table_x/table_x'
 
 import {
   TABLE_X,
@@ -42,6 +44,8 @@ const TableXUtil = {
 export {
   TableXUtil,
   TableX,
+  TwoLevelTableX,
+  twoLevelHeaderTableXHOC,
   TableXVirtualized,
   selectTableXHOC,
   expandTableXHOC,

package/src/index.less

@@ -19,6 +19,70 @@
     transform: translateZ(0);
     display: block; // 覆盖table 默认display
 
+    // 当有两级表头时，表格需要使用表格布局来支持 rowspan
+    &.gm-table-x-table-two-level {
+      display: table !important;
+      .gm-table-x-tbody {
+        display: table-row-group !important;
+        .gm-table-x-tr {
+          display: table-row !important;
+          height: 60px;
+          .gm-table-x-td {
+            display: table-cell !important;
+            flex: none !important;
+            flex-grow: unset !important;
+            flex-shrink: unset !important;
+            flex-basis: unset !important;
+            box-sizing: border-box;
+            padding: 8px;
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: break-all;
+            vertical-align: middle;
+            text-align: center;
+            &:first-child {
+              padding-left: 20px;
+            }
+            &:last-child {
+              padding-right: 20px;
+            }
+            &.gm-table-x-icon-column {
+              padding-right: 5px;
+              padding-left: 5px;
+              .gm-table-x-icon.gm-popover-active {
+                color: @brand-primary;
+              }
+            }
+            img {
+              max-width: 100%;
+              max-height: 60px;
+              object-fit: contain;
+              vertical-align: middle;
+              display: block;
+              margin: 0 auto;
+            }
+
+            // 保持与原版 TableX 一致的 expand 样式
+            .gm-table-x-expand {
+              font-size: 14px;
+              padding-top: 2px;
+            }
+
+            // 二级表头的固定列边框处理（使用 inset box-shadow 创建边框，确保滚动时边框始终可见）
+            &.gm-table-x-fixed-left {
+              border-right: none !important;
+              box-shadow: inset -1px 0 0 0 @gm-table-x-border-color;
+            }
+
+            &.gm-table-x-fixed-right {
+              border-left: none !important;
+              box-shadow: inset 1px 0 0 0 @gm-table-x-border-color;
+            }
+          }
+        }
+      }
+    }
+
     .gm-table-x-tr {
       display: flex;
       min-height: 60px;
@@ -80,6 +144,77 @@
       }
     }
 
+    // 二级表头样式
+    // 注意：为了支持 rowspan，二级表头需要使用原生的表格布局模型
+    .gm-table-x-thead-two-level {
+      display: table-header-group !important;
+
+      .gm-table-x-tr-first-level {
+        display: table-row !important;
+
+        .gm-table-x-th-first-level {
+          // 第一级表头样式
+          display: table-cell !important;
+          border: none !important;
+          vertical-align: middle;
+          text-align: center;
+          padding: 8px;
+          flex: none !important;
+          // 确保固定列有背景色，这样边框才能正确显示
+          background: @gm-table-x-header-bg !important;
+          position: relative;
+
+          // 使用伪元素创建所有边框
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #d8dee7;
+            border-bottom-width: 2px;
+            pointer-events: none;
+            z-index: 1;
+          }
+        }
+      }
+
+      .gm-table-x-tr-second-level {
+        display: table-row !important;
+        .gm-table-x-th-second-level {
+          // 第二级表头样式
+          display: table-cell !important;
+          border: none !important;
+          vertical-align: middle;
+          text-align: center;
+          padding: 8px;
+          flex: none !important;
+          flex-grow: unset !important;
+          flex-shrink: unset !important;
+          flex-basis: unset !important;
+          box-sizing: border-box;
+          // 确保固定列有背景色，这样边框才能正确显示
+          background: @gm-table-x-header-bg !important;
+          position: relative;
+
+          // 使用伪元素创建所有边框（除了顶部，因为顶部由一级表头的底部边框覆盖）
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid #d8dee7;
+            border-top: none;
+            pointer-events: none;
+            z-index: 1;
+          }
+        }
+      }
+    }
+
     .gm-table-x-tbody {
       display: block; // 覆盖tbody 默认display
 
@@ -211,13 +346,30 @@
         position: sticky !important;
         z-index: 1;
       }
+    }
+
+    // 表头固定列需要更高的 z-index
+    .gm-table-x-th {
+      &.gm-table-x-fixed-left,
+      &.gm-table-x-fixed-right {
+        z-index: 11 !important;
+      }
+    }
 
+    // tbody 单元格固定列使用 inset box-shadow
+    .gm-table-x-td {
       &.gm-table-x-fixed-left {
-        border-right: 1px solid @gm-table-x-border-color !important;
+        border-right: none !important;
+        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
+        // inset box-shadow 会创建内部阴影，不会随内容滚动
+        box-shadow: inset -1px 0 0 0 @gm-table-x-border-color !important;
       }
 
       &.gm-table-x-fixed-right {
-        border-left: 1px solid @gm-table-x-border-color !important;
+        border-left: none !important;
+        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
+        // inset box-shadow 会创建内部阴影，不会随内容滚动
+        box-shadow: inset 1px 0 0 0 @gm-table-x-border-color !important;
       }
     }
   }
@@ -432,7 +584,7 @@
     }
   }
 
-  .gm-react-table-x-diy-modal-content{
+  .gm-react-table-x-diy-modal-content {
     border-top: 1px solid @gm-table-x-border-color;
     border-bottom: 1px solid @gm-table-x-border-color;
   }

package/src/util/index.js

@@ -5,8 +5,8 @@ import PropTypes from 'prop-types'
 import _ from 'lodash'
 import SVGEmpty from '../../svg/empty.svg'
 import { Flex, EVENT_TYPE } from '@gmfe/react'
-import BatchActionBar from './batch_action_bar'
-import SortHeader from './sort_header'
+import BatchActionBar from '@gmfe/table-x/src/util/batch_action_bar'
+import SortHeader from '@gmfe/table-x/src/util/sort_header'
 import {
   OperationHeader,
   OperationDelete,
@@ -15,8 +15,8 @@ import {
   OperationCell,
   OperationRowEdit,
   OperationIconTip
-} from './operation'
-import { EditButton, EditOperation } from './edit'
+} from '@gmfe/table-x/src/util/operation'
+import { EditButton, EditOperation } from '@gmfe/table-x/src/util/edit'
 
 const TABLE_X_SELECT_ID = 'table_x_select_id'
 const TABLE_X_EXPAND_ID = 'table_x_expand_id'
@@ -83,12 +83,14 @@ const Empty = () => {
   )
 }
 
-const Loading = () => {
+const Loading = ({ style, ...rest }) => {
   return (
     <Mask
       style={{
-        backgroundColor: 'rgba(255,255,255,0.8)'
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        ...style
       }}
+      {...rest}
     >
       {getLocale('加载数据中...')}
     </Mask>

package/LICENSE

@@ -1,16 +0,0 @@
-ISC License
-
-Copyright (c) 2020-present, gmfe contributors
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
-WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
-ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
-WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
-ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
-OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
-

package/src/hoc/sticky_layout.js

@@ -1,149 +0,0 @@
-/**
- * @author: stanfer
- * @description:
- * @createDate: 2025/11/24 11:05
- * @Version: 1.0
- * @last modify time:
- **/
-import React, { useRef, useEffect } from 'react'
-
-function stickyLayout(Component) {
-  const StickyLayout = ({ ...rest }) => {
-    const currentStickyRef = useRef(null);
-    const topSentinelRef = useRef(null);
-    const bottomSentinelRef = useRef(null);
-    // 统一管理
-    const observerRef = useRef(null);
-
-    useEffect(() => {
-      if (!currentStickyRef.current) return;
-
-      const options = {
-        root: null, // 相对于浏览器视口
-        rootMargin: '0px',
-        threshold: 0, // 只要有一个像素进入/离开视口就触发
-      };
-
-      observerRef.current = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          const target = entry.target;
-
-          if (target === topSentinelRef.current) {
-            if (entry.isIntersecting) {
-              console.log('=======> 顶部进入');
-              let heightSum = 0, tableRoot;
-              const fullTab = document.querySelectorAll('.gm-framework-full-tabs')
-              const commonStickyHeader = document.querySelectorAll('.common-sticky-header')
-              const rtTable = document.querySelectorAll('.rt-table')
-              const rtTheadHeader = document.querySelectorAll('.rt-thead')
-              rtTheadHeader.forEach((el) => {
-                el.style.position = 'sticky';
-                el.style.top = 0;
-                el.style.zIndex = 10;
-                heightSum += el.offsetHeight + 10; // 元素本身高 + 上下 10 padding
-              })
-
-              commonStickyHeader.forEach((item, idx) => {
-                if (fullTab.length) {
-                  currentStickyRef.current.style.zIndex = 101;
-                }
-                // console.log(item.className);
-                if (item.className.includes('gm-box-table-header')) {
-                  heightSum += item.offsetHeight + 10; // 元素本身高 + 上下 10 padding
-                  // console.log(idx, item.getBoundingClientRect(), 'gm-box-table-header: ', item.getBoundingClientRect().height + 20);
-                }
-                if (item.className.includes('gm-table-x-thead')) {
-                  heightSum += item.offsetHeight + 8; // 元素本身高 + 上下 8 padding
-                  tableRoot = item.parentElement.parentElement;
-                  // console.log(idx, item.getBoundingClientRect(), 'gm-table-x-thead: ', item.getBoundingClientRect().height + 16);
-                }
-              })
-
-              if (rtTable.length) {
-                rtTable.forEach((el) => {
-                  if (fullTab.length) {
-                    el.style.maxHeight = `calc(100vh - ${heightSum + (fullTab.length * 40) + 50}px)`; // +50 顶部导航栏
-                    return;
-                  }
-                  el.style.maxHeight = `calc(100vh - ${heightSum + 50}px)`; // +50 顶部导航栏
-                })
-              }
-              if (tableRoot) {
-                if (fullTab.length) {
-                  tableRoot.style.maxHeight = `calc(100vh - ${heightSum + (fullTab.length * 40) + 50}px)`; // +50 顶部导航栏
-                  return;
-                }
-                tableRoot.style.maxHeight = `calc(100vh - ${heightSum + 50}px)`; // +50 顶部导航栏
-              }
-              // currentStickyRef.current.style.maxHeight = 'unset';
-              console.log('currentStickyRef 实例:', currentStickyRef.current.style);
-              return
-            }
-            currentStickyRef.current.style.maxHeight = '50%'; // TODO: 这块需要之后要走外部参数
-            console.log('顶部离开 <========');
-            return;
-          }
-          if (target === bottomSentinelRef.current) {
-            if (entry.isIntersecting) {
-              console.log('=======> 底部进入');
-              return;
-            }
-            console.log('底部离开 <========');
-          }
-        });
-      }, options);
-
-      if (topSentinelRef.current) {
-        observerRef.current.observe(topSentinelRef.current);
-      }
-      if (bottomSentinelRef.current) {
-        observerRef.current.observe(bottomSentinelRef.current);
-      }
-
-      return () => {
-        if (observerRef.current) {
-          observerRef.current.disconnect();
-        }
-      };
-    }, [])
-
-    return (
-      <div ref={currentStickyRef} className='common-sticky-layout'>
-        <div
-          ref={topSentinelRef}
-          sentinel="topSentinel"
-          style={{
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '1px', // 尽量小，不占空间
-            pointerEvents: 'none', // 防止它拦截任何鼠标事件
-            backgroundColor: 'transparent', // 完全透明
-          }}
-        />
-        <Component {...rest} />
-        <div
-          ref={bottomSentinelRef}
-          sentinel="bottomSentinel"
-          style={{
-            position: 'absolute',
-            bottom: '0',
-            left: '0',
-            width: '100%',
-            height: '1px',
-            pointerEvents: 'none',
-            backgroundColor: 'transparent',
-          }}
-        />
-      </div>
-    )
-  }
-
-  StickyLayout.propTypes = StickyLayout.propTypes;
-  StickyLayout.defaultProps = StickyLayout.defaultProps;
-
-  return StickyLayout
-}
-
-export default stickyLayout