leaferjs-variable-table

React + Vite + LeaferJS 的高性能可变行高表格组件库。表格主体使用 LeaferJS Canvas 绘制，DOM overlay 负责分页、Tooltip、编辑器、拖拽辅助线和可访问性语义表格，适合 10 万行级别工程清单、监测台账等大数据展示场景。

安装

npm install leaferjs-variable-table leafer-ui react react-dom

import { LeaferTable } from 'leaferjs-variable-table';
import 'leaferjs-variable-table/style.css';

本地运行

npm install
npm run dev

demo 首屏展示 10 万行不同高度工程项目表，包含固定列、多级表头、分页、选择、展开树、排序筛选、编辑、拖拽、列宽调整、合并单元格、Canvas 标签和状态点。

基础示例

const columns = [
  { title: '序号', dataIndex: 'id', width: 72, fixed: 'left', align: 'right' },
  { title: '线路', dataIndex: 'line', width: 96, fixed: 'left' },
  { title: '项目名称', dataIndex: 'projectName', width: 360, ellipsis: false, editable: true },
  { title: '等级', dataIndex: 'level', width: 88, fixed: 'right' }
];

export function Page() {
  return (
    <LeaferTable
      columns={columns}
      dataSource={rows}
      rowKey="id"
      rowHeight={(record, index) => (index % 6 === 0 ? 112 : 52)}
      scroll={{ x: 1600, y: 620 }}
      height={720}
    />
  );
}

JSX Columns

<LeaferTable dataSource={rows} rowKey="id">
  <LeaferTable.ColumnGroup title="基础信息">
    <LeaferTable.Column title="序号" dataIndex="id" width={72} />
    <LeaferTable.Column title="线路" dataIndex="line" width={96} />
  </LeaferTable.ColumnGroup>
  <LeaferTable.Column title="项目名称" dataIndex="projectName" width={360} />
</LeaferTable>

主要能力

• Canvas 主体渲染：表头、主体、summary、固定列、固定表头区域、横向虚拟列。
• 大数据：10 万行、可变行高、滚动定位、scrollTo({ index | key | top | left })。
• Ant Design Table 风格 API：columns、dataSource、rowKey、scroll、pagination、summary、title、footer、rowSelection、expandable。
• 布局：多级表头、隐藏列、响应式列、固定左右列、未设置宽度列自动分配。
• 交互：行选择、展开/树形、排序、筛选、行/表头/单元格事件、单元格编辑、行拖拽、列拖拽、列宽拖拽和双击自适应。
• 绘制扩展：render 支持普通 ReactNode 文本化，也支持 Canvas 协议 text、tag、badge、status、custom。
• 合并单元格：表头 colSpan/rowSpan，主体 onCell().colSpan/rowSpan。
• 可访问性：根节点 role="grid"，隐藏语义 table 同步当前可读的表头、行、单元格、caption、footer。

关键 API

LeaferTableProps

| 属性 | 说明 | | --- | --- | | columns / children | 列定义或 JSX Column API | | dataSource | 数据数组 | | rowKey | 字符串字段或函数 | | rowHeight | 固定行高或按行返回高度 | | scroll | 横向/纵向滚动配置 | | pagination | DOM 分页器，支持页码、pageSize、位置和 size changer | | rowSelection | checkbox/radio 选择列，支持禁用、固定、全选、回调 | | expandable | 展开行、树形数据、展开列配置 | | editable | DOM input overlay 编辑配置 | | drag | 行拖拽、列拖拽、列宽调整 | | summary | Canvas summary 行 | | theme | Ant Design Table token 和组件自有 token | | onChange | paginate/sort/filter 统一回调 | | onRenderStats | 返回可视行列范围、绘制 cell 数和绘制耗时 |

LeaferTableColumn

常用字段包括 title、dataIndex、key、width、minWidth、fixed、align、ellipsis、hidden、responsive、children、render、onCell、onHeaderCell、sorter、filters、editable。

Canvas render 协议

{
  title: '等级',
  dataIndex: 'level',
  render: (value) => ({
    type: 'tag',
    text: String(value),
    color: value === '一级' ? '#cf1322' : '#0958d9',
    background: value === '一级' ? '#fff1f0' : '#e6f4ff'
  })
}

主题 Token

theme 覆盖 Ant Design Table 常用 token：bodySortBg、borderColor、cellFontSize、cellPaddingInline、footerBg、headerBg、headerColor、headerSortActiveBg、rowHoverBg、rowSelectedBg、rowSelectedHoverBg、selectionColumnWidth、stickyScrollBarBg、stickyScrollBarBorderRadius 等。

组件自有 token：canvasBackground、cellRadius、cellGap、columnGap、fixedShadow、scrollbarSize、textBaselineOffset。

验证

npm run typecheck
npm run test
npm run build
npm run test:e2e
npm run verify

test:e2e 会启动 Vite，并通过本机 Chrome/Edge 无头模式检查 demo DOM、Canvas、ARIA grid、隐藏语义 table 和截图体积。

发布产物

构建后 dist/ 包含：

• leaferjs-variable-table.js：ESM
• leaferjs-variable-table.umd.cjs：UMD/CJS
• index.d.ts：类型声明
• style.css：样式

package.json 已配置 exports、main、module、types、files 和 React/LeaferJS peer dependencies。