@canvas-components/react-xlsx-table 0.0.0-stage → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +178 -2
- package/dist/index.cjs +5765 -0
- package/dist/index.d.cts +305 -0
- package/dist/index.d.ts +305 -0
- package/dist/index.js +5754 -0
- package/package.json +38 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 canvas-components contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,179 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @canvas-components/react-xlsx-table
|
|
2
|
+
|
|
3
|
+
`@canvas-components/react-xlsx-table` 是 `@canvas-components/xlsx-table` 的 React 适配层，提供：
|
|
4
|
+
|
|
5
|
+
- 表格宿主挂载与 options 同步
|
|
6
|
+
- 公式栏 `XlsxFormulaBar`
|
|
7
|
+
- 公式栏自动补全（函数名 + 命名区域，`showFormulaAutocomplete`，默认开启）
|
|
8
|
+
- 类飞书顶部工具栏 `XlsxToolbar`（职责分组、图标与名称、容器宽度折叠，默认开启）
|
|
9
|
+
- 单元格编辑浮层 `XlsxEditorOverlay`（portal 到 canvas 宿主）
|
|
10
|
+
- 顶部工作表标签栏 `XlsxSheetTabs`（`showSheetTabs`，默认开启）
|
|
11
|
+
- 命名区域管理器 `XlsxNamedRangeManager`（`showNamedRangeManager`，默认关闭）
|
|
12
|
+
- 公式依赖图调试面板 `XlsxFormulaDependencyDebugPanel`（`showFormulaDependencyDebugger`，默认关闭）
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @canvas-components/react-xlsx-table @canvas-components/xlsx-table
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 使用
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { useState } from "react";
|
|
24
|
+
import { ReactXlsxTable } from "@canvas-components/react-xlsx-table";
|
|
25
|
+
import type { XlsxWorkbook } from "@canvas-components/xlsx-table";
|
|
26
|
+
|
|
27
|
+
export function Demo() {
|
|
28
|
+
const [workbook, setWorkbook] = useState<XlsxWorkbook>({
|
|
29
|
+
sheets: [
|
|
30
|
+
{
|
|
31
|
+
id: "sheet1",
|
|
32
|
+
name: "Sheet1",
|
|
33
|
+
rowCount: 100,
|
|
34
|
+
columnCount: 26,
|
|
35
|
+
cells: {
|
|
36
|
+
r0c0: { value: "商品" },
|
|
37
|
+
r0c1: { value: "数量" },
|
|
38
|
+
r1c0: { value: "热敏标签纸" },
|
|
39
|
+
r1c1: { value: 20, type: "number" },
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<ReactXlsxTable
|
|
47
|
+
workbook={workbook}
|
|
48
|
+
onWorkbookChange={setWorkbook}
|
|
49
|
+
showFormulaBar
|
|
50
|
+
showToolbar
|
|
51
|
+
showFormulaAutocomplete
|
|
52
|
+
showSheetTabs
|
|
53
|
+
showNamedRangeManager
|
|
54
|
+
showFormulaDependencyDebugger={import.meta.env.DEV}
|
|
55
|
+
style={{ width: "100%", height: 480 }}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## 能力说明
|
|
62
|
+
|
|
63
|
+
| 能力 | 操作 |
|
|
64
|
+
| ---------- | ----------------------------------------------------------------------- |
|
|
65
|
+
| 选区 | 拖拽 / Shift 扩展 / Cmd·Ctrl+点击多选 / 行头列头 / Cmd·Ctrl+A |
|
|
66
|
+
| 编辑 | 双击、Enter、F2、直接输入 |
|
|
67
|
+
| 公式栏 | 同步活动格，Enter 提交 |
|
|
68
|
+
| 公式补全 | 公式栏输入 `=SU` / `=Sal` 时提示函数与命名区域 |
|
|
69
|
+
| 顶部工具栏 | SVG 图标按钮；加粗、颜色、填充、对齐、金额/百分比、冻结、公式、行列增删 |
|
|
70
|
+
| 公式 | `=A1+1` / `=SUM` / `IF` / 文本函数 / `Sheet1!A1` 跨表 |
|
|
71
|
+
| 依赖图调试 | `showFormulaDependencyDebugger` 查看公式节点、单格边、大区间边 |
|
|
72
|
+
| 命名区域 | `showNamedRangeManager` 管理 `Sales` / `TaxRate` 等 workbook 级名称 |
|
|
73
|
+
| 复制粘贴 | Cmd/Ctrl+C/V/X，Delete 清空 |
|
|
74
|
+
| 填充柄 | 拖选区右下角小方块 |
|
|
75
|
+
| 序列填充 | 数字/日期拖拽按等差扩展；文本仍 copy |
|
|
76
|
+
| 列宽/行高 | 拖列头右边界 / 行头下边界 |
|
|
77
|
+
| 撤销重做 | Cmd/Ctrl+Z / Shift+Z / Y |
|
|
78
|
+
| 多人协同 | `collaboration.adapter` + presence 远端选区 |
|
|
79
|
+
| 多 Sheet | 顶部标签切换 / 新增 / 内联重命名 / 复制 / 左右移动 / 删除 |
|
|
80
|
+
|
|
81
|
+
## 顶部工具栏
|
|
82
|
+
|
|
83
|
+
`ReactXlsxTable` 默认展示顶部工具栏。顶部区域按 `Sheet 标签栏 -> 命令工具栏 -> 公式栏 -> 表格画布` 排列。命令工具栏参考在线表格的高密度布局，按主菜单、历史、快速格式、结构、字体、边框与对齐、数字格式、数据、公式与工具分组；容器宽度不足时根据工具栏自身宽度把低优先级分组折叠到“更多”，不依赖页面或 `body` 宽度。
|
|
84
|
+
工具栏会读取当前活动格的样式与单元格类型，自动高亮加粗、斜体、下划线、删除线、对齐、冻结等按钮，并回显字号、数字格式、文字颜色和填充色。
|
|
85
|
+
|
|
86
|
+
已内置真实命令：
|
|
87
|
+
|
|
88
|
+
- 撤销 / 重做
|
|
89
|
+
- 设置选区字号、加粗、斜体、下划线
|
|
90
|
+
- 设置选区文字颜色、填充色
|
|
91
|
+
- 清除全部格式、清除文字颜色、清除填充色
|
|
92
|
+
- 设置选区左 / 中 / 右对齐
|
|
93
|
+
- 设置选区常规 / 数字 / 金额 / 百分比类型
|
|
94
|
+
- 冻结到当前活动格，或在已冻结时取消冻结
|
|
95
|
+
- 向活动格插入 `=SUM()` / `=AVERAGE()` / `=COUNT()` 公式模板
|
|
96
|
+
- 在活动格上方 / 下方插入行，在左侧 / 右侧插入列
|
|
97
|
+
- 清空选区内容，删除选中行 / 列
|
|
98
|
+
- 打开当前活动列的筛选和排序入口
|
|
2
99
|
|
|
3
|
-
|
|
100
|
+
可以通过 `toolbar` 配置密度、隐藏命令、强制禁用命令，以及显式启用由 `onToolbarCommand` 承接的扩展命令：
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<ReactXlsxTable
|
|
104
|
+
workbook={workbook}
|
|
105
|
+
toolbar={{
|
|
106
|
+
density: "comfortable",
|
|
107
|
+
hiddenCommands: ["multidimensional-table"],
|
|
108
|
+
enabledCommands: ["comment", "ai-formula"],
|
|
109
|
+
}}
|
|
110
|
+
onToolbarCommand={(command) => {
|
|
111
|
+
if (command === "comment") {
|
|
112
|
+
openCommentPanel();
|
|
113
|
+
}
|
|
114
|
+
if (command === "ai-formula") {
|
|
115
|
+
openAiFormulaPanel();
|
|
116
|
+
}
|
|
117
|
+
}}
|
|
118
|
+
/>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
`toolbar={false}` 可隐藏工具栏。缺少核心能力且未通过 `enabledCommands` 显式接管的命令会保持 disabled，不会出现可点击但无行为的入口。
|
|
122
|
+
|
|
123
|
+
## 顶部 Sheet 标签栏
|
|
124
|
+
|
|
125
|
+
`ReactXlsxTable` 默认把 sheet 标签栏放在顶部。标签栏支持：
|
|
126
|
+
|
|
127
|
+
- 点击切换 sheet
|
|
128
|
+
- `+` 新增 sheet
|
|
129
|
+
- 双击 sheet 名称进入内联重命名
|
|
130
|
+
- 右键或点击 sheet 更多按钮打开操作菜单
|
|
131
|
+
- 复制工作表
|
|
132
|
+
- 左移 / 右移工作表
|
|
133
|
+
- 删除工作表（至少保留一张）
|
|
134
|
+
- 鼠标滚轮横向浏览较多 sheet，隐藏滚动条，避免页面出现横向滚动条
|
|
135
|
+
|
|
136
|
+
未内置的字体族、边框、垂直对齐、合并单元格、小数位、条件格式、数据验证、多维表格、查找替换、评论和 AI 写公式会保持 disabled；业务侧可以通过 `enabledCommands` 与 `onToolbarCommand` 显式接管。格式刷为一次性操作，点击后会将当前活动单元格的完整格式应用到下一次完成的选区。
|
|
137
|
+
|
|
138
|
+
## Ref API
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
ref.getSelection();
|
|
142
|
+
ref.getWorkbook();
|
|
143
|
+
ref.getFormulaDependencyDebugSnapshot();
|
|
144
|
+
ref.getNamedRanges();
|
|
145
|
+
ref.upsertNamedRange(named);
|
|
146
|
+
ref.removeNamedRange(name);
|
|
147
|
+
ref.getFormulaBarState();
|
|
148
|
+
ref.getActiveSheetId();
|
|
149
|
+
ref.setActiveSheet(sheetId);
|
|
150
|
+
ref.addSheet(options?);
|
|
151
|
+
ref.duplicateSheet(sheetId, { name?, activate? });
|
|
152
|
+
ref.moveSheet(sheetId, targetIndex);
|
|
153
|
+
ref.renameSheet(sheetId, name);
|
|
154
|
+
ref.removeSheet(sheetId);
|
|
155
|
+
ref.startEditing();
|
|
156
|
+
ref.commitFormulaBarText(text);
|
|
157
|
+
ref.undo();
|
|
158
|
+
ref.redo();
|
|
159
|
+
ref.getHistoryState();
|
|
160
|
+
ref.getRemoteSelections();
|
|
161
|
+
ref.getPresenceRecord();
|
|
162
|
+
ref.acknowledgePatches(patchIds);
|
|
163
|
+
ref.hideRows(rowIndexes);
|
|
164
|
+
ref.hideColumns(columnIndexes);
|
|
165
|
+
ref.clearSelectionValues();
|
|
166
|
+
ref.setSelectionCellStyle(stylePatch);
|
|
167
|
+
ref.toggleSelectionCellStyle(activeStyle, inactiveStyle);
|
|
168
|
+
ref.clearSelectionCellStyle();
|
|
169
|
+
ref.clearSelectionCellStyleKeys(keys);
|
|
170
|
+
ref.setSelectionCellType(type);
|
|
171
|
+
ref.setFrozenPane(frozen);
|
|
172
|
+
ref.freezeToSelection();
|
|
173
|
+
ref.clearFreeze();
|
|
174
|
+
ref.insertFormulaTemplate("=SUM()");
|
|
175
|
+
ref.insertRows(rowIndex, count?);
|
|
176
|
+
ref.insertColumns(columnIndex, count?);
|
|
177
|
+
ref.deleteRows(rowIndex, count?);
|
|
178
|
+
ref.deleteColumns(columnIndex, count?);
|
|
179
|
+
```
|