@agile-team/mach-table-react 0.18.1 → 0.19.1

package/README.md

@@ -4,7 +4,7 @@
 
 # @agile-team/mach-table-react
 
-Official React 18+ adapter for MachTable 0.18. It provides a generic `<MachTable>`, full app/route configuration, advanced-filter aware remote query, conflict-aware editing workflows, persistent named views, a cohesive controller, optional and persistent column resizing, a standard toolbar, in-place React cell refresh, latest-closure event handling and StrictMode-safe cleanup. `RobotGrid` remains a deprecated 0.x alias.
+Official React 18+ adapter for MachTable 0.19. It provides a generic `<MachTable>`, full app/route configuration, advanced-filter aware remote query, conflict-aware editing workflows, persistent named views, a cohesive controller, optional and persistent column resizing, random-access remote blocks, batched/domain APIs, optional Worker processing, a standard toolbar, in-place React cell refresh, latest-closure event handling and StrictMode-safe cleanup. `RobotGrid` remains a deprecated 0.x alias.
 
 ## Install
 
@@ -12,6 +12,12 @@ Official React 18+ adapter for MachTable 0.18. It provides a generic `<MachTable
 pnpm add @agile-team/mach-table-react
 ```
 
+Optional large local-data Worker helpers use the same installed package but a separate chunk:
+
+```ts
+import { createWorkerDataProcessor } from "@agile-team/mach-table-react/worker";
+```
+
 Import the stylesheet once from your application entry:
 
 ```ts

package/dist/mach-table.css

@@ -65,6 +65,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-variant-numeric: tabular-nums;
+  contain: layout style;
 }
 
 .mach-root.mach-dom-layout--auto-height {
@@ -562,6 +563,29 @@
   line-height: calc(var(--mach-row-h) - 2px);
 }
 
+.mach-cell--loading {
+  pointer-events: none;
+}
+
+.mach-cell-loading-bar {
+  display: block;
+  height: 8px;
+  max-width: 132px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--mach-row-hover-bg), var(--mach-border-color), var(--mach-row-hover-bg));
+  background-size: 200% 100%;
+  animation: mach-cell-loading 1.25s ease-in-out infinite;
+}
+
+@keyframes mach-cell-loading {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mach-cell-loading-bar { animation: none; }
+}
+
 .mach-cell--num {
   justify-content: flex-end;
 }

package/dist/worker.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _createStarExport(obj) { Object.keys(obj) .filter((key) => key !== "default" && key !== "__esModule") .forEach((key) => { if (exports.hasOwnProperty(key)) { return; } Object.defineProperty(exports, key, {enumerable: true, configurable: true, get: () => obj[key]}); }); }var _worker = require('@agile-team/mach-table/worker'); _createStarExport(_worker);
+//# sourceMappingURL=worker.cjs.map

package/dist/worker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["d:\\office-project\\wl\\MachTable\\packages\\react\\dist\\worker.cjs"],"names":[],"mappings":"AAAA,obAA0C","file":"D:\\office-project\\wl\\MachTable\\packages\\react\\dist\\worker.cjs","sourcesContent":[null]}

package/dist/worker.d.cts

@@ -0,0 +1 @@
+export * from '@agile-team/mach-table/worker';

package/dist/worker.d.ts

@@ -0,0 +1 @@
+export * from '@agile-team/mach-table/worker';

package/dist/worker.js

@@ -0,0 +1,2 @@
+export*from"@agile-team/mach-table/worker";
+//# sourceMappingURL=worker.js.map

package/dist/worker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/worker.ts"],"sourcesContent":["export * from \"@agile-team/mach-table/worker\";\n"],"mappings":"AAAA,WAAc","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/mach-table-react",
-  "version": "0.18.1",
+  "version": "0.19.1",
   "description": "Official React 18+ adapter for the MachTable enterprise data grid",
   "keywords": [
     "react",
@@ -51,6 +51,16 @@
         "default": "./dist/workflows.cjs"
       }
     },
+    "./worker": {
+      "import": {
+        "types": "./dist/worker.d.ts",
+        "default": "./dist/worker.js"
+      },
+      "require": {
+        "types": "./dist/worker.d.cts",
+        "default": "./dist/worker.cjs"
+      }
+    },
     "./styles.css": {
       "types": "./dist/mach-table.css.d.ts",
       "default": "./dist/mach-table.css"
@@ -67,7 +77,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@agile-team/mach-table": "0.18.1"
+    "@agile-team/mach-table": "0.19.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -82,5 +92,6 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage"
-  }
+  },
+  "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\nOfficial React 18+ adapter for MachTable 0.19. It provides a generic `<MachTable>`, full app/route configuration, advanced-filter aware remote query, conflict-aware editing workflows, persistent named views, a cohesive controller, optional and persistent column resizing, random-access remote blocks, batched/domain APIs, optional Worker processing, a standard toolbar, in-place React cell refresh, latest-closure event handling and StrictMode-safe cleanup. `RobotGrid` remains a deprecated 0.x alias.\n\n## Install\n\n```bash\npnpm add @agile-team/mach-table-react\n```\n\nOptional large local-data Worker helpers use the same installed package but a separate chunk:\n\n```ts\nimport { createWorkerDataProcessor } from \"@agile-team/mach-table-react/worker\";\n```\n\nImport the stylesheet once from your application entry:\n\n```ts\nimport \"@agile-team/mach-table-react/styles.css\";\n```\n\n## Direct import\n\n```tsx\nimport { useMemo } from \"react\";\nimport { MachTable, useMachGrid, type ColDef } from \"@agile-team/mach-table-react\";\n\ninterface Row { id: string; name: string }\n\nexport function App({ rows }: { rows: Row[] }) {\n  const grid = useMachGrid<Row>();\n  const columns = useMemo<ColDef<Row>[]>(\n    () => [{ field: \"name\", headerName: \"Name\", flex: 1 }],\n    []\n  );\n\n  return (\n    <div style={{ height: 520 }}>\n      <MachTable<Row>\n        apiRef={grid.apiRef}\n        rowData={rows}\n        columnDefs={columns}\n        rowKey=\"id\"\n        stateKey=\"customer-list\"\n        enableColumnResize\n      />\n    </div>\n  );\n}\n```\n\n## Route-level lazy loading\n\nReact intentionally has no global component registry. MachTable provides a default component export so the standard `React.lazy` API works without a mapping wrapper:\n\n```tsx\nimport { lazy, Suspense } from \"react\";\n\nconst MachTable = lazy(() => import(\"@agile-team/mach-table-react\"));\n\nexport function OrdersPage() {\n  return (\n    <Suspense fallback={<div>Loading table...</div>}>\n      <MachTable columnDefs={columns} rowData={rows} />\n    </Suspense>\n  );\n}\n```\n\nWhen the page itself is route-lazy, a normal named import inside that page already produces the same route-level split. Use `React.lazy` when the grid should be split independently from the page.\n\n## Application and route defaults\n\nKeep table conventions in one file. Providers can be nested; the nearest configuration is merged, named presets are reusable, and explicit table props win:\n\n```tsx\n// mach-table.config.ts\nimport { defineMachTableConfig, defineMachTablePreset } from \"@agile-team/mach-table-react\";\nexport default defineMachTableConfig({\n  defaults: {\n    size: \"compact\",\n    enableColumnResize: true,\n    defaultColDef: { sortable: true, resizable: true, filter: true }\n  },\n  defaultPreset: \"list\",\n  presets: {\n    list: defineMachTablePreset({ pagination: false }),\n    crud: defineMachTablePreset({ rowSelection: \"multiple\", editType: \"fullRow\" })\n  }\n});\n\n// main.tsx\n<MachTableProvider config={machTableConfig}>\n  <App />\n</MachTableProvider>\n```\n\nThe adapter installs the matching `@agile-team/mach-table` core automatically and re-exports its complete API and types. Only `react >= 18` and `react-dom >= 18` remain peer dependencies supplied by the host application.\n\n## Remote lists and standard workflows\n\nImport heavier page workflows from the tree-shakeable subpath:\n\n```tsx\nimport { useMachTableQuery, useMachTableController } from \"@agile-team/mach-table-react/workflows\";\nimport { MachTable, MachTableToolbar } from \"@agile-team/mach-table-react\";\n\nconst query = useMachTableQuery({\n  query: filters,\n  queryKey: filters,\n  rowKey: \"id\",\n  request: orderApi.page,\n  mode: \"manual\"\n});\nconst controller = useMachTableController({ query });\n\n<MachTableToolbar\n  api={controller.table.api}\n  commands={controller.commands}\n  search={controller.search}\n  onSearchChange={controller.setSearch}\n  loading={controller.busy}\n/>;\n<MachTable apiRef={controller.table.apiRef} {...controller.bindings} />;\n```\n\nThe query hook cancels superseded requests, ignores stale responses, forwards nested advanced filters, exposes an error overlay and supports cross-page or select-all-matching selection. `useMachTableEditing()` adds dirty state, detailed partial-save/conflict results, guarded saves, conflict resolution, rollback and reveal helpers.\n\n```tsx\nconst editing = useMachTableEditing(grid, { guardBeforeUnload: true });\nconst result = await editing.saveDetailed(orderApi.saveChanges);\nif (result.conflicts.length) editing.reveal(result.conflicts[0].rowId);\n\nasync function saveCurrentView() {\n  const api = grid.apiRef.current;\n  if (!api) return;\n  const views = createGridViewManager(api, {\n    scope: `${tenantId}:${userId}:orders`\n  });\n  await views.save(\"My pending orders\");\n}\n```\n\nSee the [advanced filter](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/advanced-filter.md), [named views](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/saved-views.md), and [batch save](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/recipes/batch-save.md) guides.\n\n## Cell and full-row editing\n\n```tsx\nimport { MachTable, rowActionsColumn } from \"@agile-team/mach-table-react\";\n\nconst columns = [\n  { field: \"name\", editable: true },\n  { field: \"age\", editable: true, cellEditor: \"number\" },\n  rowActionsColumn({ onView, onDelete, overflow: \"drawer\" })\n];\n\n<MachTable editType=\"fullRow\" columnDefs={columns} rowData={rows} />;\n```\n\nCell mode is the default and provides a pencil plus inline confirm/cancel controls. Use `editableIndicator=\"always\" | \"hover\" | \"none\"` to match the page density.\n\nDocumentation: [React guide](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/react.md) · [Enterprise integration](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/enterprise-integration.md) · [Next.js / SSR](https://github.com/ChenyCHENYU/MachTable/blob/main/docs/guide/ssr.md)\n\nSource-available © ChenyCHENYU (Agile Team). Any use requires prior written authorization. See the [license](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSE) and [authorization process](https://github.com/ChenyCHENYU/MachTable/blob/main/LICENSING.md).\n"
 }