@agile-team/mach-table-react 0.30.0 → 0.30.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/dist/mach-table.css +31 -31
- 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.30.
|
|
7
|
+
MachTable 0.30.1 的官方 React 18+ 适配包。一个依赖即可获得 Core、泛型 `<MachTable>`、应用/路由配置、按需工作流、StrictMode 安全清理和最新闭包事件处理。
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
pnpm add @agile-team/mach-table-react
|
package/dist/mach-table.css
CHANGED
|
@@ -580,36 +580,36 @@
|
|
|
580
580
|
overscroll-behavior: contain;
|
|
581
581
|
}
|
|
582
582
|
|
|
583
|
-
.mach-body-viewport--scroll {
|
|
584
|
-
scrollbar-width: thin;
|
|
585
|
-
scrollbar-color: var(--mach-scrollbar-thumb) transparent;
|
|
586
|
-
}
|
|
587
|
-
|
|
588
|
-
.mach-body-viewport--scroll::-webkit-scrollbar {
|
|
589
|
-
width: 10px;
|
|
590
|
-
height: 10px;
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-track {
|
|
594
|
-
background: transparent;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb {
|
|
598
|
-
background: var(--mach-scrollbar-thumb);
|
|
599
|
-
border-radius: 999px;
|
|
600
|
-
border: 3px solid transparent;
|
|
601
|
-
background-clip: padding-box;
|
|
602
|
-
transition: background-color var(--mach-transition);
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover {
|
|
606
|
-
background: color-mix(in srgb, var(--mach-scrollbar-thumb) 60%, var(--mach-primary));
|
|
607
|
-
background-clip: padding-box;
|
|
608
|
-
}
|
|
609
|
-
|
|
610
|
-
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:active {
|
|
611
|
-
background: var(--mach-primary);
|
|
612
|
-
background-clip: padding-box;
|
|
583
|
+
.mach-body-viewport--scroll {
|
|
584
|
+
scrollbar-width: thin;
|
|
585
|
+
scrollbar-color: var(--mach-scrollbar-thumb) transparent;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
.mach-body-viewport--scroll::-webkit-scrollbar {
|
|
589
|
+
width: 10px;
|
|
590
|
+
height: 10px;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-track {
|
|
594
|
+
background: transparent;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb {
|
|
598
|
+
background: var(--mach-scrollbar-thumb);
|
|
599
|
+
border-radius: 999px;
|
|
600
|
+
border: 3px solid transparent;
|
|
601
|
+
background-clip: padding-box;
|
|
602
|
+
transition: background-color var(--mach-transition);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover {
|
|
606
|
+
background: color-mix(in srgb, var(--mach-scrollbar-thumb) 60%, var(--mach-primary));
|
|
607
|
+
background-clip: padding-box;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.mach-body-viewport--scroll::-webkit-scrollbar-thumb:active {
|
|
611
|
+
background: var(--mach-primary);
|
|
612
|
+
background-clip: padding-box;
|
|
613
613
|
}
|
|
614
614
|
|
|
615
615
|
.mach-body-viewport--scroll::-webkit-scrollbar-corner {
|
|
@@ -2160,7 +2160,7 @@ input.mach-select-all {
|
|
|
2160
2160
|
.mach-context-menu-item:disabled {
|
|
2161
2161
|
opacity: 0.45;
|
|
2162
2162
|
cursor: not-allowed;
|
|
2163
|
-
}
|
|
2163
|
+
}
|
|
2164
2164
|
|
|
2165
2165
|
.mach-pagination {
|
|
2166
2166
|
display: flex;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agile-team/mach-table-react",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.1",
|
|
4
4
|
"description": "Official React 18+ adapter for the MachTable enterprise data grid",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
"**/*.css"
|
|
98
98
|
],
|
|
99
99
|
"dependencies": {
|
|
100
|
-
"@agile-team/mach-table": "0.30.
|
|
100
|
+
"@agile-team/mach-table": "0.30.1"
|
|
101
101
|
},
|
|
102
102
|
"peerDependencies": {
|
|
103
103
|
"react": ">=18.0.0",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"test": "vitest run",
|
|
114
114
|
"test:coverage": "vitest run --coverage"
|
|
115
115
|
},
|
|
116
|
-
"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.30.
|
|
116
|
+
"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.30.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## 按需加载\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文档：[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\nSource-available © ChenyCHENYU (Agile Team). 任何使用均须事先取得书面授权。详见 [LICENSE](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSE) 与[授权流程](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSING.md)。\n"
|
|
117
117
|
}
|