@agile-team/mach-table-react 0.32.0 → 0.32.1
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 +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
# @agile-team/mach-table-react
|
|
6
6
|
|
|
7
|
-
MachTable 0.32.
|
|
7
|
+
MachTable 0.32.1 的官方 React 18+ 适配包。一个依赖即可获得 Core、泛型 `<MachTable>`、应用/路由配置、按需工作流、StrictMode 安全清理和最新闭包事件处理。
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
pnpm add @agile-team/mach-table-react
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agile-team/mach-table-react",
|
|
3
|
-
"version": "0.32.
|
|
3
|
+
"version": "0.32.1",
|
|
4
4
|
"description": "Official React 18+ adapter for the MachTable enterprise data grid",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
"**/*.css"
|
|
166
166
|
],
|
|
167
167
|
"dependencies": {
|
|
168
|
-
"@agile-team/mach-table": "0.32.
|
|
168
|
+
"@agile-team/mach-table": "0.32.1"
|
|
169
169
|
},
|
|
170
170
|
"peerDependencies": {
|
|
171
171
|
"react": ">=18.0.0",
|
|
@@ -181,5 +181,5 @@
|
|
|
181
181
|
"test": "vitest run",
|
|
182
182
|
"test:coverage": "vitest run --coverage"
|
|
183
183
|
},
|
|
184
|
-
"readme": "<p align=\"center\">\n <img src=\"https://raw.githubusercontent.com/ChenyCHENYU/MachTable/main/assets/mach-table-logo.svg\" alt=\"MachTable\" width=\"760\" />\n</p>\n\n# @agile-team/mach-table-react\n\nMachTable 0.32.
|
|
184
|
+
"readme": "<p align=\"center\">\n <img src=\"https://raw.githubusercontent.com/ChenyCHENYU/MachTable/main/assets/mach-table-logo.svg\" alt=\"MachTable\" width=\"760\" />\n</p>\n\n# @agile-team/mach-table-react\n\nMachTable 0.32.1 的官方 React 18+ 适配包。一个依赖即可获得 Core、泛型 `<MachTable>`、应用/路由配置、按需工作流、StrictMode 安全清理和最新闭包事件处理。\n\n```bash\npnpm add @agile-team/mach-table-react\n```\n\n应用入口只引入一次样式：\n\n```ts\nimport \"@agile-team/mach-table-react/styles.css\";\n```\n\n## 基础接入\n\n```tsx\nimport { useMemo } from \"react\";\nimport { MachTable, indexColumn, useMachTable, type ColDef } from \"@agile-team/mach-table-react\";\n\ninterface Row { id: string; name: string }\n\nexport function Customers({ rows }: { rows: Row[] }) {\n const table = useMachTable<Row>();\n const columns = useMemo<ColDef<Row>[]>(\n () => [indexColumn({ headerName: \"序号\" }), { field: \"name\", flex: 1, editable: true }],\n []\n );\n\n return (\n <div style={{ height: 520 }}>\n <MachTable<Row>\n apiRef={table.apiRef}\n rowData={rows}\n columnDefs={columns}\n rowKey=\"id\"\n enableColumnResize\n persistence={{ key: \"customers:list\", sections: [\"columns\"] }}\n />\n </div>\n );\n}\n```\n\n对象型列和配置建议用 `useMemo` 保持引用稳定。`useMachTable()` 同时提供 `apiRef`、响应式 `api` 与 `ready`。\n\n## 应用配置\n\n```ts\n// src/config/mach-table.config.ts\nimport { defineMachTableConfig, defineMachTablePreset } from \"@agile-team/mach-table-react\";\n\nexport default defineMachTableConfig({\n defaults: {\n size: \"compact\",\n columnLayout: \"fit\",\n enableColumnResize: true,\n defaultColDef: { sortable: true, filter: true, resizable: true }\n },\n defaultPreset: \"list\",\n presets: {\n list: defineMachTablePreset({ stripedRows: true }),\n crud: defineMachTablePreset({ rowSelection: \"multiple\", editType: \"fullRow\" })\n }\n});\n```\n\n```tsx\n<MachTableProvider config={machTableConfig}>\n <App />\n</MachTableProvider>\n```\n\nProvider 可按路由/布局嵌套，最近一层覆盖外层，表格 props 优先级最高。\n\n编辑、粘贴、清空和填充复用已有列与整行校验。`useMachTableEditing()` 隔离重挂载或数据替换前的保存结果、错误和冲突；查询工作流在 StrictMode 下保留 `immediate: false`，重复设置相同搜索值不会重新请求。\n\n## 按需加载\n\nReact 不模拟全局组件注册。路由本身懒加载时普通 import 已自然拆包；需要独立边界时：\n\n```tsx\nconst MachTable = lazy(() => import(\"@agile-team/mach-table-react\"));\n```\n\n可选能力使用子入口：\n\n```tsx\nimport { useMachTableQuery, useMachTableEditing } from \"@agile-team/mach-table-react/workflows\";\nimport { MachTableToolbar } from \"@agile-team/mach-table-react/ui\";\nimport { reactCellRenderer } from \"@agile-team/mach-table-react/adapters\";\nimport { createWorkerDataProcessor } from \"@agile-team/mach-table-react/worker\";\n```\n\n- `/workflows`：请求取消、防过期覆盖、服务端分页、跨页选择、脏数据和冲突保存；`reset()` 清空全部表格过滤且只请求一次。\n- `/ui`：可选标准工具栏。\n- `/adapters`：自定义 React cell/detail renderer 桥接。\n- `/worker`：大型本地过滤/排序的独立 Worker 能力。\n\n```tsx\nconst query = useMachTableQuery({\n query: filters,\n queryKey: filters,\n rowKey: \"id\",\n request: orderApi.page,\n mode: \"manual\"\n});\n\n<MachTable<Row> apiRef={table.apiRef} columnDefs={columns} {...query.bindings} />;\n```\n\n该包自动依赖 `@agile-team/mach-table` 并重导出 Core 类型；宿主只需提供 `react` 和 `react-dom >= 18`。\n\n## 行拖拽与条件整行颜色\n\n```ts\nimport { dragColumn, type GridOptions } from \"@agile-team/mach-table-react\";\n\ninterface Plan { id: string; name: string; status: string }\nconst options: GridOptions<Plan> = {\n rowKey: \"id\",\n columnDefs: [dragColumn(), { field: \"name\" }, { field: \"status\" }],\n rowStyleRules: [\n { when: ({ data }) => data.status === \"pending\", tone: \"warning\" },\n { when: ({ data }) => data.status === \"failed\", tone: \"danger\" },\n { when: ({ data }) => data.status === \"done\", tone: \"success\" }\n ]\n};\n```\n\n状态码由应用定义，包内不识别业务状态。颜色规则取第一条命中结果，未命中时沿用默认样式；支持自定义背景/文字颜色、固定列、明暗主题、选择和虚拟行复用。拖拽提供主题手柄、落点线、位置浮层、边缘滚动、Esc 取消和 Alt + ↑/↓ 移动。扁平外部数据设置 `applyRowDrag: false`，由 `onRowDragEnd` 处理持久化；自动模式先完成移动再发出事件，使用 `targetIndex` 读取最终下标。树、分组及排序等自动模式限制见[完整配方](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/row-presentation.md)。\n\n文档：[React 指南](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/react.md) · [企业接入](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/enterprise-integration.md) · [SSR](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/ssr.md)\n\n## 按需高级入口（0.32）\n\n仍从本包导入，无需另装高级功能包。普通根入口不加载这些实现或附加 CSS。\n\n| 子路径 | 功能 |\n| --- | --- |\n| `/workbench` | 高级过滤草稿与应用、修改差异/部分保存/冲突审阅、手动诊断 |\n| `/preferences` | 复合身份隔离、CAS、有序写入、历史版本及列 ID/类型迁移报告 |\n| `/ordering` | 多行/树移动、防环与业务约束、失败回滚、持久化撤销/重做 |\n| `/server-side` | 服务端分组/聚合、route 分页、缓存/刷新/事务及层级选择 |\n| `/multi-range` | Ctrl/Cmd 追加范围、格式化复制、校验清空及撤销 |\n| `/analysis` | Pivot、安全公式、柱/折线图和数据表回退 |\n\n```ts\nimport { mountAdvancedFilterBuilder } from \"@agile-team/mach-table-react/workbench\";\nimport \"@agile-team/mach-table-react/styles/workbench.css\";\n\nconst filters = mountAdvancedFilterBuilder(host, { api });\n// 宿主卸载时调用；表格销毁也会释放工作台。\nfilters.destroy();\n```\n\n服务端分组控件使用 `/styles/server-side.css`，分析与多范围使用 `/styles/workbench.css`。排序、偏好和纯分析计算无需附加 CSS。服务端 Store 按 route 分页，不提供全树任意显示 offset；分析只处理当前已加载数据并显示范围。排序 undo/redo 的 transport 必须一次 CAS 保存 `context.operations` 的完整批次或 `context.plan.after`，只保存首参数无法完整恢复非连续/跨父级位置。\n\n完整示例与限制：[工作台](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/workbench.md) · [排序](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/row-presentation.md) · [企业偏好](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/enterprise-preferences.md) · [服务端 Store](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/server-side-store.md) · [多范围](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/multi-range.md) · [分析](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/analysis.md)。\n\nSource-available © ChenyCHENYU (Agile Team). 任何使用均须事先取得书面授权。详见 [LICENSE](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSE) 与[授权流程](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSING.md)。\n"
|
|
185
185
|
}
|