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

package/README.md

@@ -1,3 +1,229 @@
+# @gmfe/table-x
+
+## 简介
+
+`@gmfe/table-x` 是基于 [react-table v7](https://github.com/tannerlinsley/react-table)（7.0.0-rc.11）封装的高级表格组件包，是 `@gmfe/table` 的升级版本。采用 Hooks API 和 Context API，提供更现代的表格功能扩展。支持虚拟滚动、选择、展开、固定列、排序、子表格、自定义列和可编辑表格等功能。
+
+## 安装
+
+```bash
+npm install @gmfe/table-x
+```
+
+## 使用
+
+### 基础表格
+
+```jsx
+import React from 'react'
+import { TableX } from '@gmfe/table-x'
+
+const columns = [
+  { Header: '名称', accessor: 'name' },
+  { Header: '年龄', accessor: 'age' }
+]
+
+const data = [
+  { value: 1, name: '张三', age: 28 },
+  { value: 2, name: '李四', age: 32 }
+]
+
+function App() {
+  return <TableX columns={columns} data={data} />
+}
+```
+
+### 带选择功能的表格
+
+```jsx
+import React, { useState } from 'react'
+import { TableX, selectTableXHOC } from '@gmfe/table-x'
+
+const SelectTableX = selectTableXHOC(TableX)
+
+function App() {
+  const [selected, setSelected] = useState([])
+
+  return (
+    <SelectTableX
+      columns={columns}
+      data={data}
+      selected={selected}
+      onSelect={(selected) => setSelected(selected)}
+    />
+  )
+}
+```
+
+### 虚拟滚动表格
+
+```jsx
+import { TableXVirtualized } from '@gmfe/table-x'
+
+function App() {
+  return (
+    <TableXVirtualized
+      columns={columns}
+      data={largeData}
+      virtualizedHeight={600}
+      virtualizedItemSize={40}
+    />
+  )
+}
+```
+
+## API
+
+### TableX
+
+基础表格组件。
+
+| 属性 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|--------|------|
+| columns | 列定义 | `array` | - | 是 |
+| data | 表格数据 | `array` | - | 是 |
+| loading | 是否加载中 | `boolean` | `false` | 否 |
+| keyField | 行唯一标识字段 | `string` | `'value'` | 否 |
+| tiled | 是否平铺 | `boolean` | `false` | 否 |
+| isTrDisable | 行禁用判断函数 | `function(row): boolean` | `() => false` | 否 |
+| isTrHighlight | 行高亮判断函数 | `function(row): boolean` | `() => false` | 否 |
+| SubComponent | 展开行渲染函数 | `function(row)` | - | 否 |
+| onScroll | 滚动回调 | `function` | - | 否 |
+| className | 自定义类名 | `string` | - | 否 |
+| style | 自定义样式 | `object` | - | 否 |
+
+### TableXVirtualized
+
+虚拟滚动表格组件，继承 TableX 的所有属性，额外支持：
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| virtualizedHeight | 表格容器高度 | `number` | - | 是 |
+| virtualizedItemSize | 行高（数字或函数） | `number \| function` | - | 是 |
+| refVirtualized | 虚拟列表 ref | `object \| function` | - | 否 |
+
+### HOC 组件
+
+#### selectTableXHOC(TableX)
+
+选择功能表格 HOC。
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| selected | 已选中项数组 | `array` | - | 是 |
+| onSelect | 选中回调 | `function(selected: array)` | - | 是 |
+| selectType | 选择类型 | `'checkbox' \| 'radio'` | `'checkbox'` | 否 |
+| keyField | 行唯一标识字段 | `string` | `'value'` | 否 |
+| isSelectorDisable | 行选择禁用函数 | `function(row): boolean` | `() => false` | 否 |
+| batchActionBar | 自定义批量操作栏 | `ReactElement` | - | 否 |
+| fixedSelect | 是否固定选择列 | `boolean` | `false` | 否 |
+
+#### expandTableXHOC(TableX)
+
+展开行表格 HOC。
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| SubComponent | 展开内容渲染函数 | `function(row)` | - | 是 |
+| expanded | 展开行对象（受控模式） | `object` | - | 否 |
+| onExpand | 展开/折叠回调 | `function(expanded: object)` | - | 否 |
+| fixedExpand | 是否固定展开列 | `boolean` | `false` | 否 |
+
+#### fixedColumnsTableXHOC(TableX)
+
+固定列 HOC。列定义中通过 `fixed: 'left'` 或 `fixed: 'right'` 指定固定方向。固定列需要设置 `width` 属性。
+
+#### sortableTableXHOC(TableX)
+
+可拖拽排序表格 HOC。
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| onSortChange | 排序变化回调 | `function(data: array)` | - | 是 |
+| keyField | 行唯一标识字段 | `string` | `'value'` | 否 |
+
+#### editTableXHOC(TableX)
+
+可编辑表格 HOC，添加 `.gm-table-x-edit-table` 样式类。
+
+#### subTableXHOC(TableX)
+
+子表格 HOC，添加缩进列。
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| subTableIndent | 子表格缩进宽度 | `number` | `TABLE_X.WIDTH_FUN` | 否 |
+
+#### diyTableXHOC(TableX)
+
+自定义列管理 HOC。
+
+| 额外属性 | 说明 | 类型 | 默认值 | 必填 |
+|----------|------|------|--------|------|
+| id | 唯一标识，用于保存列配置到 localStorage | `string` | - | 是 |
+| diyGroupSorting | 分组排序配置 | `array` | - | 是 |
+
+- 列定义中需要 `diyGroupName` 和 `Header`（或 `diyItemText`）字段。
+
+### TableXUtil
+
+表格工具集。
+
+| 属性/方法 | 说明 |
+|-----------|------|
+| `TABLE_X` | 表格常量配置（宽度、高度等） |
+| `BatchActionBar` | 批量操作栏组件 |
+| `OperationHeader` | 操作列表头组件 |
+| `OperationDelete` | 删除操作组件 |
+| `OperationRecover` | 恢复操作组件 |
+| `OperationDetail` | 详情操作组件 |
+| `OperationCell` | 操作单元格组件 |
+| `OperationRowEdit` | 行编辑操作组件 |
+| `OperationIconTip` | 图标提示操作组件 |
+| `EditButton` | 编辑按钮组件 |
+| `EditOperation` | 编辑操作组件 |
+| `SortHeader` | 排序表头组件 |
+
+## 示例
+
+### 多功能组合
+
+```jsx
+import { TableX, selectTableXHOC, expandTableXHOC, fixedColumnsTableXHOC } from '@gmfe/table-x'
+
+// HOC 组合：选择 + 展开 + 固定列
+const EnhancedTable = fixedColumnsTableXHOC(selectTableXHOC(expandTableXHOC(TableX)))
+
+const columns = [
+  { Header: '名称', accessor: 'name', fixed: 'left', width: 200 },
+  { Header: '描述', accessor: 'desc' },
+  { Header: '操作', accessor: 'action', fixed: 'right', width: 150 }
+]
+
+function App() {
+  return (
+    <EnhancedTable
+      columns={columns}
+      data={data}
+      selected={selected}
+      onSelect={setSelected}
+      SubComponent={(row) => <div>展开内容：{row.original.name}</div>}
+    />
+  )
+}
+```
+
+## 注意事项
+
+- `keyField` 默认为 `'value'`，确保数据中有该字段作为行唯一标识。
+- 固定列必须设置 `width` 属性，否则会报错。
+- `show: false` 的列会被自动过滤。
+- 虚拟列表（`TableXVirtualized`）适用于大数据量场景，需要指定 `virtualizedHeight` 和 `virtualizedItemSize`。
+- `selectTableXHOC` 不再提供 `onSelectAll` 回调，选中全部的逻辑通过 `isSelectorDisable` 和内部计算实现。
+- 此包需要 `styled-components ^5.1.0` 作为 peer dependency。
+
+---
+
 ## tableX 踩的坑，阅读后改代码更自信
 
 - 注意不要随意升级版本，目前使用 7.0.0-rc.11

package/package.json

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

package/src/base/td.js

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

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 '@gmfe/table-x/src/base/td'
+import Td from './td'
 
 const Tr = ({
   row,
@@ -10,7 +10,7 @@ const Tr = ({
   style,
   totalWidth,
   isTrDisable,
-  isTrHighlight
+  isTrHighlight,
 }) => {
   const props = {
     ...row.getRowProps(),

package/src/index.js

@@ -7,8 +7,6 @@ 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,
@@ -44,8 +42,6 @@ const TableXUtil = {
 export {
   TableXUtil,
   TableX,
-  TwoLevelTableX,
-  twoLevelHeaderTableXHOC,
   TableXVirtualized,
   selectTableXHOC,
   expandTableXHOC,

package/src/index.less

@@ -19,70 +19,6 @@
     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;
@@ -144,77 +80,6 @@
       }
     }
 
-    // 二级表头样式
-    // 注意：为了支持 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
 
@@ -346,30 +211,13 @@
         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: none !important;
-        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
-        // inset box-shadow 会创建内部阴影，不会随内容滚动
-        box-shadow: inset -1px 0 0 0 @gm-table-x-border-color !important;
+        border-right: 1px solid @gm-table-x-border-color !important;
       }
 
       &.gm-table-x-fixed-right {
-        border-left: none !important;
-        // 使用 box-shadow 创建边框，确保在滚动时边框始终可见
-        // inset box-shadow 会创建内部阴影，不会随内容滚动
-        box-shadow: inset 1px 0 0 0 @gm-table-x-border-color !important;
+        border-left: 1px solid @gm-table-x-border-color !important;
       }
     }
   }
@@ -584,7 +432,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 '@gmfe/table-x/src/util/batch_action_bar'
-import SortHeader from '@gmfe/table-x/src/util/sort_header'
+import BatchActionBar from './batch_action_bar'
+import SortHeader from './sort_header'
 import {
   OperationHeader,
   OperationDelete,
@@ -15,8 +15,8 @@ import {
   OperationCell,
   OperationRowEdit,
   OperationIconTip
-} from '@gmfe/table-x/src/util/operation'
-import { EditButton, EditOperation } from '@gmfe/table-x/src/util/edit'
+} from './operation'
+import { EditButton, EditOperation } from './edit'
 
 const TABLE_X_SELECT_ID = 'table_x_select_id'
 const TABLE_X_EXPAND_ID = 'table_x_expand_id'
@@ -83,14 +83,12 @@ const Empty = () => {
   )
 }
 
-const Loading = ({ style, ...rest }) => {
+const Loading = () => {
   return (
     <Mask
       style={{
-        backgroundColor: 'rgba(255,255,255,0.8)',
-        ...style
+        backgroundColor: 'rgba(255,255,255,0.8)'
       }}
-      {...rest}
     >
       {getLocale('加载数据中...')}
     </Mask>

package/src/hoc/two_level_header_table_x/flatten_helper.js

@@ -1,29 +0,0 @@
-/**
- * 扁平化 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

@@ -1,95 +0,0 @@
-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)
-  )
-  
-  // 分离 fixed: 'left' 的特殊列和其他特殊列
-  const leftFixedSpecialCols = specialCols.filter(col => col.fixed === 'left')
-  const otherSpecialCols = specialCols.filter(col => col.fixed !== 'left')
-  
-  // 按顺序：fixed: 'left' 的特殊列 -> 普通列 -> 其他特殊列
-  return [...leftFixedSpecialCols, ...nested, ...otherSpecialCols]
-}