intable 0.0.39 → 0.0.40
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/README.md +92 -5
- package/dist/plugins/KeyEachPlugin.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,97 @@
|
|
|
1
|
+
# Intable
|
|
2
|
+
|
|
3
|
+
> 🎯 一个组件搞定所有表格场景 — SolidJS / React / Vue 框架通用
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/intable)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](https://github.com/huodoushigemi/intable/stargazers)
|
|
8
|
+
|
|
1
9
|
---
|
|
2
|
-
|
|
3
|
-
|
|
10
|
+
|
|
11
|
+
## [🚀 在线体验 Demo](https://huodoushigemi.github.io/intable)
|
|
12
|
+
|
|
4
13
|
---
|
|
5
14
|
|
|
6
|
-
|
|
15
|
+
## 🎯 核心功能一览
|
|
7
16
|
|
|
8
|
-
|
|
17
|
+
- ✅ **虚拟滚动** — 百万行数据流畅运行
|
|
18
|
+
- ✅ **单元格编辑** — text / number / date / select / checkbox / range / color
|
|
19
|
+
- ✅ **列筛选排序** — 内置 FilterPlugin / SortPlugin
|
|
20
|
+
- ✅ **Excel 复制粘贴** — 多单元格选区 TSV 兼容
|
|
21
|
+
- ✅ **撤销重做** — Ctrl+Z / Ctrl+Y
|
|
22
|
+
- ✅ **Excel 导入导出** — 一键导出 xlsx
|
|
23
|
+
- ✅ **数据校验** — Zod schema 集成
|
|
24
|
+
- ✅ **变更比对** — DiffPlugin 高亮追踪
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## 🤖 AI 时代的工作流
|
|
29
|
+
|
|
30
|
+
**安装 Skill：**
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npx skills add huodoushigemi/intable -y --skill intable
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
**效果：** 描述需求（如"加一个大数据量的可编辑表格"），Copilot 自动给出正确代码。
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
📈 真实项目对比，以「用户管理」模块为例：
|
|
41
|
+
|
|
42
|
+
| 指标 | 使用前 | 使用后 |
|
|
43
|
+
|------|--------|--------|
|
|
44
|
+
| 代码行数 | 500+ | **200-** |
|
|
45
|
+
| AI 消耗 | 100% | **<70%** |
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## 🚀 快速开始
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
# SolidJS
|
|
54
|
+
pnpm add intable
|
|
55
|
+
|
|
56
|
+
# React
|
|
57
|
+
pnpm add @intable/react
|
|
58
|
+
|
|
59
|
+
# Vue 3
|
|
60
|
+
pnpm add @intable/vue
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
**创建一个表格，只需几行代码：**
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import Intable from 'intable'
|
|
67
|
+
// import Intable from '@intable/react'
|
|
68
|
+
// import Intable from '@intable/vue'
|
|
69
|
+
|
|
70
|
+
<Intable
|
|
71
|
+
columns={[
|
|
72
|
+
{ id: 'name', name: '姓名', width: 120 },
|
|
73
|
+
{ id: 'age', name: '年龄', width: 80 },
|
|
74
|
+
]}
|
|
75
|
+
data={[
|
|
76
|
+
{ id: 1, name: 'Alice', age: 28 },
|
|
77
|
+
{ id: 2, name: 'Bob', age: 32 },
|
|
78
|
+
]}
|
|
79
|
+
border
|
|
80
|
+
/>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## 🌟 为什么选择 Intable
|
|
86
|
+
|
|
87
|
+
1. **插件化架构** — 责任链 `rewriteProps` 管道，插件完全可组合、可替换
|
|
88
|
+
2. **框架通用** — SolidJS / React / Vue 共享同一套插件 API
|
|
89
|
+
3. **性能优先** — 虚拟滚动，行/列双向渲染，百万行不卡顿
|
|
90
|
+
4. **AI 集成** — Copilot Skill 让 AI 写出正确用法
|
|
91
|
+
5. **渐进增强** — 从简单表格到复杂企业级需求，平滑升级
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## License
|
|
9
96
|
|
|
10
|
-
|
|
97
|
+
MIT
|
|
@@ -10,7 +10,7 @@ const KeyEachPlugin = {
|
|
|
10
10
|
columns: ({ columns: r }, { store: i }) => {
|
|
11
11
|
if (!i.props.useColKey) return r;
|
|
12
12
|
let a = untrack(() => keyBy(i[COLUMNS] ?? [], (e) => e.id));
|
|
13
|
-
return i[COLUMNS] = r.map((r) => a[r.id] ? change2(a[r.id], r) : { ...r });
|
|
13
|
+
return i[COLUMNS] = r.map((r) => a[r.id] ? change2(a[r.id], r) : { ...r }), i[COLUMNS];
|
|
14
14
|
},
|
|
15
15
|
EachRows: ({ EachRows: e }, { store: o }) => o.props.useRowKey ? (e) => {
|
|
16
16
|
let s = createMemo(() => ({
|