@gmfe/table

简介

@gmfe/table 是基于 react-table-v6 封装的高级表格组件包，提供丰富的表格功能扩展。包含基础表格、可编辑表格以及多个 HOC（高阶组件），支持选择、展开、固定列、排序、子表格、自定义列等功能。

注意： 此包基于 react-table v6，推荐使用 @gmfe/table-x（基于 react-table v7）。

安装

npm install @gmfe/table

使用

基础表格

import React from 'react'
import { Table } from '@gmfe/table'

const columns = [
  { Header: '名称', accessor: 'name' },
  { Header: '年龄', accessor: 'age' }
]

const data = [
  { name: '张三', age: 28 },
  { name: '李四', age: 32 }
]

function App() {
  return <Table data={data} columns={columns} />
}

带选择功能的表格

import React, { useState } from 'react'
import { selectTableV2HOC } from '@gmfe/table'

const SelectTable = selectTableV2HOC(Table)

function App() {
  const [selected, setSelected] = useState([])

  return (
    <SelectTable
      data={data}
      columns={columns}
      selected={selected}
      onSelect={(selected) => setSelected(selected)}
      onSelectAll={(selected) => setSelected(selected)}
    />
  )
}

组合多个 HOC

import { fixedColumnsTableHOC, selectTableV2HOC, expandTableHOC } from '@gmfe/table'

// HOC 可以组合使用
const EnhancedTable = fixedColumnsTableHOC(selectTableV2HOC(expandTableHOC(Table)))

API

Table

基础表格组件。

| 属性 | 说明 | 类型 | 默认值 | 必填 | |------|------|------|--------|------| | data | 表格数据 | array | - | 是 | | columns | 列定义 | array | - | 是 | | loading | 是否加载中 | boolean | false | 否 | | tiled | 是否平铺（不使用分页） | boolean | false | 否 | | showPagination | 是否显示分页 | boolean | false | 否 | | defaultPageSize | 默认每页条数 | number | - | 否 | | className | 自定义类名 | string | - | 否 | | style | 自定义样式 | object | - | 否 |

EditTable

可编辑表格组件，继承 Table 的所有属性，添加 .gm-react-edit-table 样式类。

HOC 组件

fixedColumnsTableHOC(Table)

固定列表格 HOC。

• 列定义中通过 fixed: 'left' 或 fixed: 'right' 指定固定方向。
• 固定列必须设置 width 属性。
• 内部会重新排列列顺序：左固定 → 普通 → 右固定。

fixedFirstColumnsTableHOC(Table)

固定前几列表格 HOC。

selectTableV2HOC(Table)

选择功能表格 HOC。

| 额外属性 | 说明 | 类型 | 默认值 | 必填 | |----------|------|------|--------|------| | selectType | 选择类型 | 'checkbox' \| 'radio' | 'checkbox' | 否 | | selected | 已选中项数组 | array | - | 是 | | onSelect | 单行选中回调 | function(selected: array) | - | 是 | | onSelectAll | 全选/取消全选回调 | function(selected: array) | - | 是 | | isSelectorDisable | 行选择禁用函数 | function(row): boolean | - | 否 | | keyField | 行唯一标识字段 | string | 'value' | 否 | | batchActionBar | 自定义批量操作栏 | ReactElement | - | 否 |

expandTableHOC(Table)

展开行表格 HOC。

| 额外属性 | 说明 | 类型 | 默认值 | 必填 | |----------|------|------|--------|------| | SubComponent | 展开内容渲染函数 | function(row) | - | 是 | | keyField | 行唯一标识字段 | string | - | 是 | | expanded | 展开行数组（受控模式） | array | - | 否 | | onExpand | 展开/折叠回调 | function(expanded: array) | - | 否 | | showRowExpan | 是否显示展开图标 | function(original, index): boolean | - | 否 | | expandHeader | 是否显示全选展开 | boolean | true | 否 |

subTableHOC(Table)

子表格 HOC，添加空白缩进列。

diyTableHOC(Table)

自定义列管理 HOC。

| 额外属性 | 说明 | 类型 | 默认值 | 必填 | |----------|------|------|--------|------| | id | 唯一标识，用于保存列配置到 localStorage | string | - | 是 | | diyGroupSorting | 分组排序配置 | array | - | 是 |

• 列定义中需要 diyGroupName 和 Header（或 diyItemText）字段。

sortableTable

可拖拽排序表格 HOC，集成 SortableJS。

TableUtil

表格工具集。

| 属性/方法 | 说明 | |-----------|------| | OperationHeader | 操作列表头组件 | | OperationDelete | 删除操作组件 | | OperationDetail | 详情操作组件 | | OperationCell | 操作单元格组件 | | OperationRowEdit | 行编辑操作组件 | | OperationIconTip | 图标提示操作组件 | | SortHeader | 排序表头组件 | | EditTableOperation | 可编辑表格操作组件 | | EditContentInputNumber | 可编辑数字输入组件 | | EditContentInput | 可编辑文本输入组件 | | EditButton | 编辑按钮组件 | | BatchActionBar | 批量操作栏组件 | | referOfWidth | 列宽引用常量 |

示例

固定列 + 选择功能

import { fixedColumnsTableHOC, selectTableV2HOC } from '@gmfe/table'

const EnhancedTable = fixedColumnsTableHOC(selectTableV2HOC(Table))

const columns = [
  { Header: '名称', accessor: 'name', fixed: 'left', width: 200 },
  { Header: '描述', accessor: 'desc' },
  { Header: '操作', accessor: 'action', fixed: 'right', width: 150 }
]

注意事项

• 此包基于 react-table v6，已标记为 deprecated，推荐使用 @gmfe/table-x。
• 空值单元格会自动显示 -。
• 可排序列表头会自动转换为 SortHeader 组件。
• showPagination 默认为 false，需要分页时请手动开启或使用 @gmfe/business 的分页组件。
• HOC 组合顺序有影响，建议先 selectTableV2HOC 再 fixedColumnsTableHOC。