@agile-team/mach-table

@agile-team/mach-table

MachTable 0.30.1 的框架无关 TypeScript Core：零运行时依赖，提供行列双虚拟化、领域化 API、单元格/整行编辑、树与分组、随机访问远程数据、区段隔离状态持久化和可诊断扩展系统。本版修正固定列重复扣宽，并让 fit 模式下的内容自适应保留响应能力与列宽记忆。

pnpm add @agile-team/mach-table

import { createGrid, indexColumn } from "@agile-team/mach-table";
import "@agile-team/mach-table/styles/mach-table.css";

const api = createGrid(document.querySelector("#grid")!, {
  columnDefs: [
    indexColumn({ headerName: "序号" }),
    { field: "id", headerName: "ID", width: 120 },
    { field: "name", headerName: "名称", flex: 1, editable: true }
  ],
  rowData: [{ id: "1", name: "MachTable" }],
  rowKey: "id",
  enableColumnResize: true,
  persistence: { key: "tenant:user:customers", sections: ["columns"] }
});

api.batch((grid) => {
  grid.rows.transact({ update: [{ id: "1", name: "Updated" }] });
  grid.columns.setVisible("internalNote", false);
  grid.view.refreshCells({ rowIds: ["1"] });
});

const saved = await api.editing.save(orderApi.saveChanges);
console.table(saved.conflicts);
console.info(api.diagnostics.get());

// 原生宿主卸载时必须销毁；Vue/React 适配器会自动处理。
api.destroy();

persistence.sections 同时约束进入 store 的数据与恢复范围；异步 store 写入有序，晚到加载不会覆盖加载期间的用户操作。

单元格编辑通过内置对勾/取消控件显式结束，普通鼠标和焦点变化不会误提交；Enter、Escape、Tab 仍提供完整键盘路径。筛选、列设置、上下文菜单和操作菜单会继承所属表格实例的主题变量，不受宿主页面全局样式影响。

loading: true 默认展示轻量表格骨架与本地化状态文案，空数据默认展示内置插画；需要品牌化时再通过 overlayLoadingTemplate、overlayNoRowsTemplate 覆盖，基础页面无需重复实现 loading/empty DOM。

公共命令按 rows、columns、selection、editing、filtering、sorting、pagination、hierarchy、view、state、io、diagnostics 划分。完整签名见 GridApi。

大型本地数据 Worker 使用独立入口：

import { createWorkerDataProcessor } from "@agile-team/mach-table/worker";

Vue/React 项目请只安装对应适配包，它会自动安装并重导出 Core：

• @agile-team/mach-table-vue
• @agile-team/mach-table-react

文档：快速开始 · 企业接入 · API

Source-available © ChenyCHENYU (Agile Team). 任何使用均须事先取得书面授权。详见 LICENSE 与授权流程。