react-extjs 0.0.1

package/src/components/Grid.tsx

@@ -0,0 +1,2173 @@
+import React from 'react';
+import { resolveThemeImageUrl } from '../util/theme';
+import { Panel } from './Panel';
+import { Menu } from './Menu';
+import type { MenuItem } from './Menu';
+import { Button } from './Button';
+import {
+  FilterWidget,
+  GridFilterConfig,
+  inferFilterType,
+  validateFilter,
+  isFilterActivatable,
+  defaultEmpty,
+} from './GridFilters';
+
+// 与原版 Ext.BLANK_IMAGE_URL 等价：1x1 透明 gif，避免网络请求
+const BLANK =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+// 与 Ext.getScrollBarWidth() 一致：运行时测量纵向滚动条布局宽。
+// 关键：覆盖式滚动条浏览器（现代 Chromium / 多数 Mac）返回 0，经典 17px 滚动条浏览器返回 17。
+// 之前写死 19 → 覆盖式浏览器里真 Ext 预留 0（无空隙），本组件却预留 19（末列右侧凭空多 19px 空隙）。
+// 改为运行时测量值，与真 Ext 行为对齐：覆盖式环境无空隙，经典环境仍预留 17 以杜绝编辑聚焦时的列偏移。
+let _scrollBarWidth: number | null = null;
+function getScrollBarWidth(): number {
+  if (_scrollBarWidth != null) return _scrollBarWidth;
+  if (typeof document === 'undefined') return 17;
+  const probe = document.createElement('div');
+  probe.style.cssText =
+    'position:absolute;top:-9999px;left:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden';
+  document.body.appendChild(probe);
+  _scrollBarWidth = probe.offsetWidth - probe.clientWidth;
+  document.body.removeChild(probe);
+  return _scrollBarWidth;
+}
+
+export interface GridColumn {
+  /** 数据字段名（同时作为列 id，对应 DOM 类 x-grid3-td-{dataIndex}） */
+  dataIndex: string;
+  /** 列 id（默认等于 dataIndex；checker 列为 'checker'） */
+  id?: string;
+  /** 表头文字 */
+  header: string;
+  /** 列宽（px），默认 100 */
+  width?: number;
+  /** 内容对齐（默认 left） */
+  align?: 'left' | 'right' | 'center';
+  /** 是否可排序（默认 true，对齐 Ext 列 sortable） */
+  sortable?: boolean;
+  /** 是否可拖拽改列宽（默认 true，对齐 Ext enableColumnResize） */
+  resizable?: boolean;
+  /** 自定义单元格渲染（返回 React 节点） */
+  renderer?: (value: unknown, row: Record<string, unknown>) => React.ReactNode;
+  /** 是否禁用该列表头菜单按钮（对齐 Ext ColumnModel menuDisabled；PropertyGrid 用） */
+  menuDisabled?: boolean;
+  /** 特殊列类型：'rownumberer' 行号列（id 固定 'numberer'、宽 23、不可排序/缩放）；'checkcolumn' 复选框列（对齐 Ext.ux.grid.CheckColumn，渲染可勾选复选框，点击切换该行 dataIndex 布尔值，不可排序/缩放）。普通文本列不设 type。 */
+  type?: 'rownumberer' | 'checkcolumn';
+  /** 初始隐藏该列（对齐 Ext ColumnModel hidden:true；列菜单可重新显示） */
+  hidden?: boolean;
+  /** 分组汇总类型（对齐 Ext.ux.grid.GroupSummary.summaryType）：仅当 Grid 启用 groupField 时生效。
+   *  对该分组内本列数值做聚合，渲染到分组底部汇总行对应单元格。取值 sum/count/average/min/max。 */
+  summaryType?: 'sum' | 'count' | 'average' | 'min' | 'max';
+  /** 分组汇总自定义渲染（对齐 Ext.ux.grid.GroupSummary.summaryRenderer）：参数 (聚合值, 该分组数据行[], dataIndex)。缺省直接显示聚合值。 */
+  summaryRenderer?: (value: number | string, groupRows: Record<string, unknown>[], dataIndex: string) => React.ReactNode;
+  /** 行编辑器字段类型（对齐 Ext ColumnModel 列 editor）：'text' 文本框 / 'number' 数字框。仅当 Grid 启用 rowEditor 时作为该行编辑字段；省略时按当前值类型推断（数字→number，其余→text）。与 EditorGrid 的 editor（boolean | { type }）共用同一属性名，故类型取并集。 */
+  editor?: 'text' | 'number' | boolean | { type?: 'text' | 'number' };
+  /** 锁定列（对齐 Ext.ux.grid.LockingGridView + LockingColumnModel：列 config.locked=true 即锁定）。
+   * 锁定列渲染在左侧固定面板（x-grid3-locked，不随水平滚动移动、纵向滚动与右侧解锁面板同步）；
+   * 其余为解锁列，渲染在右侧可水平滚动面板（x-grid3-unlocked）。至少 1 锁定 + 1 解锁才会触发分栏渲染，
+   * 否则退化为普通 Grid，行为不变（零回归）。样式复用原版 examples/ux/css/LockingGridView.css（零新增手写 CSS）。 */
+  locked?: boolean;
+  /** 列过滤配置（对齐 Ext.ux.grid.GridFilters：列定义式 filter 属性）。
+   *  传 true 等价于 {}，type 缺省时按该列数据值推断（string/numeric/date/list/boolean）。
+   *  支持的子字段见 GridFilterConfig：value/active/options(列表)/菜单文案等。 */
+  filter?: GridFilterConfig | boolean;
+}
+
+/**
+ * 列分组表头单元（对齐 Ext.ux.grid.ColumnHeaderGroup 的 cm.rows 元素）：
+ * 把连续若干列在表头顶部合并为一个跨列分组标题（如「Client」跨 2 列、「Product」跨 3 列）。
+ * 每行分组为 HeaderGroup[]；Grid.headerGroups 为这样的行数组（可多层）。
+ * 分组单元本身不可排序/缩放/打开菜单，仅做视觉分组；宽度 = 所跨列宽之和（末列吸收 slack）。
+ */
+export interface HeaderGroup {
+  /** 分组标题文字（React 节点，可含 HTML） */
+  header: React.ReactNode;
+  /** 跨列数（默认 1） */
+  colspan?: number;
+  /** 标题对齐（默认 left） */
+  align?: 'left' | 'right' | 'center';
+  /** 关联列 dataIndex（用于生成 x-grid3-td-{id}，缺省用首个被跨列 id） */
+  dataIndex?: string;
+  /** 悬浮提示（对齐 Ext grid tooltip） */
+  tooltip?: string;
+}
+
+/**
+ * 行展开器配置（对齐 Ext.ux.grid.RowExpander 插件）：在 Grid 前置一列展开/收起按钮，
+ * 点击/双击/回车可切换显示该行下方的「行体」详情区（由 getRowBody 渲染任意内容）。
+ * 复刻自 examples/ux/RowExpander.js 的 getBody / expandOnDblClick / expandOnEnter / expandedField。
+ */
+export interface RowExpanderConfig {
+  /** 返回展开行体的内容（对齐 Ext.ux.grid.RowExpander.getBody，可为 React 节点 / HTML 字符串） */
+  getRowBody: (row: Record<string, unknown>, rowIndex: number) => React.ReactNode;
+  /** 初始展开的 dataIndex 字段名（对齐 Ext expandedField，默认 'expanded'）；其值为真表示初始展开 */
+  expandedField?: string;
+  /** 双击行切换展开（默认 true，对齐 expandOnDblClick） */
+  expandOnDblClick?: boolean;
+  /** 回车键切换展开（默认 true，对齐 expandOnEnter） */
+  expandOnEnter?: boolean;
+  /** 展开列宽（默认 20，对齐 Ext expander column width） */
+  width?: number;
+}
+
+/**
+ * 行编辑器配置（对齐 Ext.ux.grid.RowEditor 插件）：双击（或单击，见 clicksToEdit）某行进入
+ * 行内编辑，每行底部浮出编辑条（x-row-editor：字段按列对齐 + 居中 Save/Cancel 按钮，样式复用
+ * 原版 examples/ux/css/RowEditor.css），保存回写整行、取消丢弃。复刻自 examples/ux/RowEditor.js
+ * 的 startEditing / stopEditing(true|false) / positionButtons 行为。
+ */
+export interface RowEditorConfig {
+  /** 进入编辑所需点击次数（对齐 Ext clicksToEdit）：2=双击行进入（默认），1=单击行进入。 */
+  clicksToEdit?: 1 | 2;
+  /** 保存按钮文字（默认 'Save'，对齐 saveText） */
+  saveText?: string;
+  /** 取消按钮文字（默认 'Cancel'，对齐 cancelText） */
+  cancelText?: string;
+  /** 编辑提交回调：参数为（原始数据索引 origIdx, 编辑后的整行对象）。外部据此更新数据源（对齐 Ext afteredit 提交到 store record）。 */
+  onCommit?: (origIdx: number, newRow: Record<string, unknown>) => void;
+}
+
+export interface GridProps {
+  /** 列模型（TableGrid 模式下可由 fromMarkup 推导，可省略） */
+  columns?: GridColumn[];
+  /** 数据行（TableGrid 模式下可由 fromMarkup 推导，可省略） */
+  data?: Record<string, unknown>[];
+  title?: string;
+  width?: number | string;
+  /** 固定高度（px）触发滚动区；不传则 autoHeight */
+  height?: number;
+  /** 斑马纹（默认 true） */
+  stripeRows?: boolean;
+  /** 自动撑满剩余宽度的列 id（对齐 Ext autoExpandColumn）：网格整宽铺满时，该列吸收 slack 而非末列。 */
+  autoExpandColumn?: string;
+  /** 高亮行索引（对应 x-grid3-row-selected），受控单选 */
+  selectedRow?: number;
+  /** 选择模式：'row' 点击行单选；'checkbox' 前置勾选列，支持多选/全选；'radio' 前置单选框列，单行单选（对齐 Ext RadioSelectionModel）。默认无交互选择。 */
+  selectionMode?: 'row' | 'checkbox' | 'radio';
+  /** 分组字段（对齐 Ext.grid.GroupingView + store.groupBy）：按该字段相邻分组并渲染分组头栏。
+   *  未设置时退化为普通 Grid，行为不变（零回归）。 */
+  groupField?: string;
+  /** 是否启用表头列菜单（对齐 Ext enableColumnHide，默认 true）：hd-btn 点击打开列显示菜单 */
+  enableColumnHide?: boolean;
+  /** 是否允许拖拽表头重排列（对齐 Ext enableColumnMove，默认 false） */
+  enableColumnReorder?: boolean;
+  /** 是否允许拖拽数据行重排（对齐 Ext 行 DnD：拖动行改变底层数据顺序，默认 false） */
+  enableRowReorder?: boolean;
+  /** 行展开器插件（对齐 Ext.ux.grid.RowExpander）：前置展开列，点击/双击/回车切换行体详情区。未设置则网格退化为普通表格，行为不变（零回归）。 */
+  expander?: RowExpanderConfig;
+  /** 行编辑器插件（对齐 Ext.ux.grid.RowEditor）：双击/单击行进入行内编辑，浮出按列对齐的编辑条 + Save/Cancel。未设置则网格不变（零回归）。 */
+  rowEditor?: RowEditorConfig;
+  /** 列分组表头（对齐 Ext.ux.grid.ColumnHeaderGroup）：在表头顶部叠加一层/多层跨列分组标题。
+   *  每层为 HeaderGroup[]（colspan 之和须等于可见列数，未设置则网格退化为普通表格，行为不变（零回归）。
+   *  样式复用原版 examples/ux/css/ColumnHeaderGroup.css（零新增手写 CSS）。 */
+  headerGroups?: HeaderGroup[][];
+  /** 复选框列勾选变化回调（对齐 Ext.ux.grid.CheckColumn 点击切换 record 字段值）：参数为（原始数据索引 origIdx, dataIndex, 新布尔值）。仅当某列 type='checkcolumn' 时触发。 */
+  onCheckColumnChange?: (origIdx: number, dataIndex: string, newValue: boolean) => void;
+  /** TableGrid 保真（对齐 Ext.ux.grid.TableGrid）：直接传入一段 HTML <table> 标记，内部解析 thead/tbody
+   *  生成 columns/data（列名 'tcol-{i}'、sortable=true，原版会移除源表格）。指定时覆盖 columns/data 入参；
+   *  仍允许外层用 columns 补充分列字段（如 renderer），或传 height 控制是否 autoHeight（原版默认 autoHeight:true）。 */
+  fromMarkup?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /** 透传 ref：暴露 addColumn / removeColumn / showColumn / hideColumn / getColumns（对齐 Ext ColumnModel 运行时增删）。 */
+  ref?: React.Ref<GridHandle>;
+}
+
+/**
+ * Grid 命令句柄（对齐 Ext ColumnModel/GridPanel 运行时列增删）：
+ *  - addColumn(col, id?)：追加一列到当前列列表尾部，返回稳定 id（便于后续 removeColumn）。
+ *  - removeColumn(id)：按 id 移除一列（动态追加列走 dynamicCols；静态列走 removedStatic，不破坏 columns prop 受控契约）。
+ *  - showColumn(id) / hideColumn(id)：切换列显示/隐藏（对齐 colModel.setHidden）。
+ *  - getColumns()：返回当前列列表（含 id + 原始列定义），顺序为 [静态列剔隐藏, 动态追加列]。
+ */
+export interface GridHandle {
+  addColumn: (col: GridColumn, id?: string) => string;
+  removeColumn: (id: string) => void;
+  showColumn: (id: string) => void;
+  hideColumn: (id: string) => void;
+  getColumns: () => Array<{ id: string; column: GridColumn }>;
+  /** GridFilters 保真：清空所有过滤器（对齐 Ext.ux.grid.GridFilters.clearFilters）。 */
+  clearFilters: () => void;
+  /** GridFilters 保真：返回当前激活过滤器的序列化数据（对齐 Ext.ux.grid.GridFilters.getFilterData）。 */
+  getFilterData: () => Array<{ field: string; data: { type: string; value: any } }>;
+}
+
+/**
+ * 保真映射（来源 src/widgets/grid/GridView.js：initTemplates 267-329、doRender 673-741、renderUI 796-806）：
+ * - 内核 DOM：x-grid3 > x-grid3-viewport > (x-grid3-header > x-grid3-header-inner > x-grid3-header-offset + x-clear)
+ *             + (x-grid3-scroller > x-grid3-body + a.x-grid3-focus) + resize-marker + resize-proxy
+ * - 表头单元格：td.x-grid3-hd.x-grid3-cell.x-grid3-td-{id} > div.x-grid3-hd-inner.x-grid3-hd-{id}
+ *             > a.x-grid3-hd-btn（enableHdMenu 默认 true）+ {value} + img.x-grid3-sort-icon（默认 display:none）
+ * - 数据行：div.x-grid3-row (+x-grid3-row-alt) > table.x-grid3-row-table > tbody > tr > td.x-grid3-col.x-grid3-td-{id}
+ *             > div.x-grid3-cell-inner.x-grid3-col-{id}
+ * - 宽度：表头窗口(header-inner)与 body 均按 scroller 真实可见宽(clientWidth，自动含滚动条位)对齐；
+ *   header-offset 在无横向滚动时铺满可见宽(列左对齐、右侧背景铺满)，有横向滚动时=Σ列宽+竖向滚动条位(对齐 body gutter)。
+ */
+/**
+ * TableGrid 保真解析（对齐 Ext.ux.grid.TableGrid）：
+ * 输入一段 HTML <table> 标记，解析 thead th → 列定义、tbody tr/td → 数据行。
+ * - 列（对齐 TableGrid 的 cf/ch 推导）：name = 'tcol-{i}'；header = th 文本；dataIndex = name；
+ *   width 优先取内联 style.width（原版读 offsetWidth，此处对标记字符串取等价内联宽）；
+ *   tooltip = th.title；sortable = true。
+ * - 行：每条 tbody tr 生成 { 'tcol-{i}': td 文本 }（对齐原版 XmlReader mapping 'td:nth(i+1)/@innerHTML'）。
+ * 原版会把源表格从 DOM 移除（config.remove !== false）；本实现仅以标记生成，调用方不再渲染源表格。
+ */
+export function parseTableGrid(markup: string): { columns: GridColumn[]; data: Record<string, unknown>[] } {
+  const doc = typeof DOMParser !== 'undefined'
+    ? new DOMParser().parseFromString(markup, 'text/html')
+    : (() => { const d = document.implementation.createHTMLDocument(''); d.body.innerHTML = markup; return d; })();
+  const table = doc.querySelector('table');
+  if (!table) return { columns: [], data: [] };
+  const headers = Array.from(table.querySelectorAll('thead th'));
+  const columns: GridColumn[] = headers.map((th, i) => {
+    const name = `tcol-${i}`;
+    const widthAttr = (th.getAttribute('width') || '').trim();
+    const styleW = (th.getAttribute('style') || '').match(/width\s*:\s*(\d+)(?:\.\d+)?\s*px/i);
+    const width = styleW ? Number(styleW[1]) : widthAttr ? Number(widthAttr) : 100;
+    return {
+      header: th.textContent?.trim() ?? '',
+      dataIndex: name,
+      width,
+      tooltip: th.getAttribute('title') || undefined,
+      sortable: true,
+    };
+  });
+  const rows = Array.from(table.querySelectorAll('tbody tr'));
+  const data = rows.map((tr) => {
+    const tds = Array.from(tr.querySelectorAll('td'));
+    const row: Record<string, unknown> = {};
+    tds.forEach((td, i) => { row[`tcol-${i}`] = td.textContent?.trim() ?? ''; });
+    return row;
+  });
+  return { columns, data };
+}
+
+export const Grid = React.forwardRef<GridHandle, GridProps>(({
+  columns: propsColumns,
+  data: propsData,
+  fromMarkup,
+  title,
+  width,
+  height,
+  stripeRows = true,
+  autoExpandColumn,
+  selectedRow,
+  selectionMode,
+  groupField,
+  className,
+  style,
+  /** 是否启用表头列菜单（对齐 Ext enableColumnHide，默认 true）：hd-btn 点击打开列显示菜单 */
+  enableColumnHide = true,
+  /** 是否允许拖拽表头重排列（默认 false） */
+  enableColumnReorder = false,
+  /** 是否允许拖拽数据行重排（默认 false） */
+  enableRowReorder = false,
+  /** 行展开器插件（对齐 Ext.ux.grid.RowExpander） */
+  expander,
+  /** 行编辑器插件（对齐 Ext.ux.grid.RowEditor） */
+  rowEditor,
+  /** 列分组表头（对齐 Ext.ux.grid.ColumnHeaderGroup） */
+  headerGroups,
+  /** 复选框列勾选变化回调（对齐 Ext.ux.grid.CheckColumn 点击切换 record 字段值） */
+  onCheckColumnChange,
+}: GridProps, ref) => {
+  // TableGrid 保真（对齐 Ext.ux.grid.TableGrid）：fromMarkup 优先，解析标记覆盖 columns/data。
+  const markupParsed = React.useMemo(
+    () => (fromMarkup ? parseTableGrid(fromMarkup) : null),
+    [fromMarkup],
+  );
+  const columns = markupParsed ? markupParsed.columns : (propsColumns ?? []);
+  const data = markupParsed ? markupParsed.data : (propsData ?? []);
+  // checker 列（对齐 Ext.grid.CheckboxSelectionModel 的列定义）
+  type ColWithId = GridColumn & { id: string; isNumberer?: boolean };
+  const checkerCol: ColWithId = React.useMemo(
+    () => ({
+      dataIndex: '',
+      id: 'checker',
+      header: '',
+      width: 20,
+      sortable: false,
+      resizable: false,
+    }),
+    [],
+  );
+  // radio 列（对齐 Ext.grid.RadioSelectionModel 的列定义）
+  const radioCol: ColWithId = React.useMemo(
+    () => ({
+      dataIndex: '',
+      id: 'radio',
+      header: '',
+      width: 20,
+      sortable: false,
+      resizable: false,
+    }),
+    [],
+  );
+  const baseCols: ColWithId[] = React.useMemo(
+    () =>
+      columns.map((c) => {
+        if (c.type === 'rownumberer') {
+          // 对齐 Ext.grid.RowNumberer：id 固定 'numberer'、宽 23、不可排序/缩放、menuDisabled
+          return {
+            ...c,
+            dataIndex: '__numberer__',
+            id: 'numberer',
+            header: c.header ?? '',
+            width: c.width ?? 23,
+            sortable: false,
+            resizable: false,
+            menuDisabled: true,
+            isNumberer: true,
+          } as ColWithId;
+        }
+        if (c.type === 'checkcolumn') {
+          // 对齐 Ext.ux.grid.CheckColumn：id 取 dataIndex、不可排序/缩放、menuDisabled
+          return {
+            ...c,
+            id: c.dataIndex,
+            width: c.width ?? 40,
+            sortable: false,
+            resizable: false,
+            menuDisabled: true,
+          } as ColWithId;
+        }
+        return { ...c, id: c.dataIndex, width: c.width ?? 100 };
+      }),
+    [columns],
+  );
+  // 稳定引用 cols：依赖 prop 列与 selectionMode，避免每次渲染都重建导致 managedCols/colOrder 副作用死循环
+  // 行展开器列（对齐 Ext.ux.grid.RowExpander 的前置展开列）：始终是首个列，宽度默认 20。
+  const hasExpander = !!expander;
+  const expanderCol: ColWithId = React.useMemo(
+    () => ({
+      dataIndex: '',
+      id: 'expander',
+      header: '',
+      width: expander?.width ?? 20,
+      sortable: false,
+      resizable: false,
+    }),
+    [expander?.width, hasExpander],
+  );
+  const cols: ColWithId[] = React.useMemo(
+    () => {
+      let base: ColWithId[];
+      if (selectionMode === 'checkbox') base = [checkerCol, ...baseCols];
+      else if (selectionMode === 'radio') base = [radioCol, ...baseCols];
+      else base = baseCols;
+      return hasExpander ? [expanderCol, ...base] : base;
+    },
+    [selectionMode, checkerCol, radioCol, baseCols, hasExpander, expanderCol],
+  );
+  // 展开行集合（存原始 data 索引 origIdx，与行拖拽/排序无关，始终稳定指向同一行数据）。
+  // 分组折叠态（用于 groupField 行分组时按组折叠/展开）。提前声明，供下方 vScroll 重算 effect 依赖。
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set());
+  // 初始展开由 expander.expandedField 决定（对齐 Ext expandedField，默认 'expanded'）。
+  const [expandedRows, setExpandedRows] = React.useState<Set<number>>(() => {
+    const s = new Set<number>();
+    const field = expander?.expandedField;
+    if (field) data.forEach((r, i) => { if (r[field]) s.add(i); });
+    return s;
+  });
+  const toggleExpand = React.useCallback((origIdx: number) => {
+    setExpandedRows((prev) => {
+      const n = new Set(prev);
+      if (n.has(origIdx)) n.delete(origIdx);
+      else n.add(origIdx);
+      return n;
+    });
+  }, []);
+  // 复选框列（CheckColumn）勾选覆盖态：key = `${origIdx}:${dataIndex}`，值为当前勾选布尔。
+  // 渲染时若 key 不存在则回退到 data 行的原始布尔值；点击切换只更新本 Map，并回调 onCheckColumnChange
+  // （对齐 Ext.ux.grid.CheckColumn 点击切换 record 字段值，store 层由外部回调更新）。
+  const [checks, setChecks] = React.useState<Record<string, boolean>>({});
+  const toggleCheck = React.useCallback(
+    (origIdx: number, dataIndex: string) => {
+      const key = `${origIdx}:${dataIndex}`;
+      const base = data[origIdx]?.[dataIndex] as boolean | undefined;
+      const cur = key in checks ? checks[key] : !!base;
+      const next = !cur;
+      onCheckColumnChange?.(origIdx, dataIndex, next);
+      setChecks((prev) => ({ ...prev, [key]: next }));
+    },
+    [data, checks, onCheckColumnChange],
+  );
+  // 列动态增删（双轨：columns prop 恒为静态列来源，dynamicCols 为独立态；未增删时 managedCols≡cols，DOM 完全一致，保真零回归）
+  const [dynamicCols, setDynamicCols] = React.useState<ColWithId[]>([]);
+  const [removedStatic, setRemovedStatic] = React.useState<Set<string>>(new Set());
+  const seqRef = React.useRef(0);
+  const managedCols = React.useMemo<ColWithId[]>(() => {
+    const staticItems = cols.filter((c) => !removedStatic.has(c.id));
+    return [...staticItems, ...dynamicCols];
+  }, [cols, removedStatic, dynamicCols]);
+  // 隐藏列状态（对齐 Ext colModel.setHidden / enableColumnHide）：hidden 列从渲染中剔除。
+  const [hiddenCols, setHiddenCols] = React.useState<Set<string>>(
+    () => new Set(columns.filter((c) => c.hidden).map((c) => c.dataIndex)),
+  );
+  // 列菜单（表头 x-grid3-hd-btn 点击打开，check item 切换列隐藏/显示）
+  const [menuCol, setMenuCol] = React.useState<string | null>(null);
+  const [menuStyle, setMenuStyle] = React.useState<React.CSSProperties>({});
+  // 表头行高度（对齐 Ext GridView 运行时 JS 给 x-grid3-hd-btn 内联设置的高度：
+  // ext-all.css 只给 width:14px 无 height，静态渲染高度塌缩为 0 导致箭头不可见——与 TabPanel scroller 同款坑）
+  const hdRowRef = React.useRef<HTMLTableRowElement>(null);
+  const [hdH, setHdH] = React.useState(0);
+  React.useLayoutEffect(() => {
+    if (hdRowRef.current) setHdH(hdRowRef.current.offsetHeight);
+  }, [managedCols.length, hiddenCols.size]);
+  // 列显示顺序（对齐 Ext ColumnModel/GridView 的列重排）：visible 顺序由本数组决定，
+  // 隐藏列保留在数组尾部以便取消隐藏时回到原相对位置。重排只调整该数组顺序。
+  const [colOrder, setColOrder] = React.useState<string[]>(() => cols.map((c) => c.id));
+  React.useEffect(() => {
+    // columns / selectionMode / 动态增删变化时的合并：保留既有列顺序（含手动重排结果），
+    // 仅丢弃已移除的列、追加新增列到末尾。绝不能按 managedCols 原始顺序重建，否则会冲掉拖拽重排结果。
+    setColOrder((prev) => {
+      const mSet = new Set(managedCols.map((c) => c.id));
+      const prevSet = new Set(prev);
+      const next = prev.filter((id) => mSet.has(id));
+      managedCols.forEach((c) => {
+        if (!prevSet.has(c.id)) next.push(c.id);
+      });
+      return next;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [managedCols]);
+  const colsById = React.useMemo(() => {
+    const m: Record<string, ColWithId> = {};
+    managedCols.forEach((c) => (m[c.id] = c));
+    return m;
+  }, [managedCols]);
+  // ===== GridFilters（保真复刻 Ext.ux.grid.GridFilters，本地过滤）=====
+  // 列定义式：从 managedCols 上读取 filter 配置，按 dataIndex 收集过滤器定义。
+  // 前置声明于此（在 GridHandle useImperativeHandle 之前），以便 clearFilters/getFilterData 句柄可引用。
+  const MENU_FILTER_TEXT = 'Filters';
+  const filterDefs = React.useMemo<Record<string, GridFilterConfig>>(() => {
+    const map: Record<string, GridFilterConfig> = {};
+    managedCols.forEach((c) => {
+      if (c.filter && c.dataIndex) {
+        const f: GridFilterConfig =
+          c.filter === true ? {} : { ...(c.filter as GridFilterConfig) };
+        if (!f.type) f.type = inferFilterType(data, c.dataIndex);
+        if (!f.dataIndex) f.dataIndex = c.dataIndex;
+        map[c.dataIndex] = f;
+      }
+    });
+    return map;
+  }, [managedCols, data]);
+
+  // 过滤器运行态：dataIndex -> { active, value }
+  const [filterState, setFilterState] = React.useState<
+    Record<string, { active: boolean; value: any }>
+  >({});
+  // 依据 filterDefs 初始化/清理运行态（首次出现建默认态，移除的列清掉对应态）
+  React.useEffect(() => {
+    setFilterState((prev) => {
+      let changed = false;
+      const next: Record<string, { active: boolean; value: any }> = {};
+      for (const di of Object.keys(filterDefs)) {
+        if (prev[di]) {
+          next[di] = prev[di];
+        } else {
+          const initVal = filterDefs[di].value ?? defaultEmpty(filterDefs[di]);
+          next[di] = {
+            active: !!filterDefs[di].active && isFilterActivatable(filterDefs[di], initVal),
+            value: initVal,
+          };
+          changed = true;
+        }
+      }
+      if (Object.keys(prev).length !== Object.keys(next).length) changed = true;
+      return changed ? next : prev;
+    });
+  }, [filterDefs]);
+
+  // Grid 命令句柄（列运行时增删；对齐 Ext ColumnModel/GridPanel reconfigure）
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      addColumn: (col: GridColumn, id?: string) => {
+        const cid = id ?? col.id ?? col.dataIndex ?? `gc-${++seqRef.current}`;
+        const colWithId: ColWithId = {
+          ...col,
+          id: cid,
+          width: col.width ?? 100,
+        } as ColWithId;
+        setDynamicCols((prev) => [...prev, colWithId]);
+        return cid;
+      },
+      removeColumn: (id: string) => {
+        const isDynamic = dynamicCols.some((c) => c.id === id);
+        if (isDynamic) {
+          setDynamicCols((prev) => prev.filter((c) => c.id !== id));
+        } else {
+          setRemovedStatic((prev) => {
+            const n = new Set(prev);
+            n.add(id);
+            return n;
+          });
+        }
+      },
+      showColumn: (id: string) =>
+        setHiddenCols((prev) => {
+          const n = new Set(prev);
+          n.delete(id);
+          return n;
+        }),
+      hideColumn: (id: string) =>
+        setHiddenCols((prev) => {
+          const n = new Set(prev);
+          n.add(id);
+          return n;
+        }),
+      getColumns: () => managedCols.map((c) => ({ id: c.id, column: c })),
+      // 对齐 Ext.ux.grid.GridFilters.clearFilters：把所有过滤器 active 置否、value 复位默认，
+      // 不删除 filterDefs（列仍在），等价于示例里「Clear Filter Data」按钮。
+      clearFilters: () => {
+        setFilterState((prev) => {
+          const next: Record<string, { active: boolean; value: any }> = {};
+          for (const di of Object.keys(prev)) {
+            next[di] = { active: false, value: defaultEmpty(filterDefs[di] || {}) };
+          }
+          return next;
+        });
+      },
+      // 对齐 Ext.ux.grid.GridFilters.getFilterData：仅返回当前激活的过滤器，
+      // 每项 { field, data: { type, value } }（value 取控件当前值）。
+      getFilterData: () => {
+        const out: Array<{ field: string; data: { type: string; value: any } }> = [];
+        for (const di of Object.keys(filterState)) {
+          const st = filterState[di];
+          const def = filterDefs[di];
+          if (st && st.active && def) {
+            out.push({ field: di, data: { type: def.type || 'string', value: st.value } });
+          }
+        }
+        return out;
+      },
+    }),
+    [managedCols, dynamicCols, filterDefs, filterState],
+  );
+  // 行显示顺序（对齐 Ext 行 DnD / store 记录顺序）：rowOrder 存「原始 data 索引」的当前显示顺序，
+  // 拖拽行重排只调整该数组，sort/group 均作用于按 rowOrder 还原后的有序数据，互不冲突。
+  const [rowOrder, setRowOrder] = React.useState<number[]>(() => data.map((_, i) => i));
+  React.useEffect(() => {
+    // data 变化（引用/长度改变）时重置为原始顺序，丢弃手动行重排结果（与列重排保持一致的合并策略：
+    // 仅当结构真正变化时重建，避免选中态/交互触发的无关 data 引用变化冲掉重排）。
+    setRowOrder((prev) => {
+      if (prev.length !== data.length) return data.map((_, i) => i);
+      return prev;
+    });
+  }, [data]);
+  // 数据长度变化（增删行）时，rowOrder 旧索引会越界产生 undefined 行；render 阶段即按长度重建顺序，
+  // 避免「useEffect 重置滞后一帧」导致的崩溃/空渲染（与列重排一致的合并策略：仅结构变化时重建）。
+  const orderedData = React.useMemo(() => {
+    const order = rowOrder.length === data.length ? rowOrder : data.map((_, i) => i);
+    return order.map((i) => data[i]);
+  }, [data, rowOrder]);
+  // 行对象（来自 data，引用稳定）→ 原始索引，供拖拽时定位「被拖/目标行」的原始索引
+  const idxByRow = React.useMemo(() => {
+    const m = new Map<Record<string, unknown>, number>();
+    data.forEach((r, i) => m.set(r, i));
+    return m;
+  }, [data]);
+
+  // 单过滤器值更新（控件 onChange）
+  const updateFilterValue = React.useCallback(
+    (di: string, value: any) => {
+      setFilterState((prev) => {
+        const cur = prev[di] || { active: false, value: defaultEmpty(filterDefs[di] || {}) };
+        const active = isFilterActivatable(filterDefs[di] || {}, value);
+        return { ...prev, [di]: { value, active: cur.active || active } };
+      });
+    },
+    [filterDefs],
+  );
+  // 表头菜单「Filters」勾选项：手动切换激活（对齐 onCheckChange：仅当 isActivatable 才允许激活）
+  const toggleFilterActive = React.useCallback(
+    (di: string) => {
+      setFilterState((prev) => {
+        const cur = prev[di];
+        if (!cur) return prev;
+        const wantActive = !cur.active;
+        const canActive = isFilterActivatable(filterDefs[di] || {}, cur.value);
+        return {
+          ...prev,
+          [di]: { ...cur, active: wantActive ? (canActive ? true : cur.active) : false },
+        };
+      });
+    },
+    [filterDefs],
+  );
+
+  // 本地过滤：在 orderedData 之后、排序/分组之前应用（对齐 Ext store.filterBy 影响排序/分组数据源）
+  const filteredData = React.useMemo(() => {
+    const active = Object.keys(filterState).filter(
+      (di) => filterState[di].active && filterDefs[di],
+    );
+    if (active.length === 0) return orderedData;
+    return orderedData.filter((row) =>
+      active.every((di) => validateFilter(filterDefs[di], filterState[di].value, row)),
+    );
+  }, [orderedData, filterState, filterDefs]);
+  const visibleCols = colOrder
+    .map((id) => colsById[id])
+    .filter(Boolean)
+    .filter((c) => !hiddenCols.has(c.id)) as ColWithId[];
+  // 列宽状态：拖拽改列宽后覆盖默认值（对齐 Ext colModel.setColumnWidth）
+  const [colWidths, setColWidths] = React.useState<Record<string, number>>({});
+  // 网格可见宽度（由 ResizeObserver 测量 .x-grid3 的 clientWidth，即面板内容宽），
+  // 用于让行 div 拉满整格、行内 table 仅等于列总宽，右侧多余宽度由「行背景」铺满
+  // （对齐 Ext：行 div 满宽、行内 table 仅列总宽，无带边框的 filler 空列）。
+  // 网格整宽（ResizeObserver 测量 .x-grid3 clientWidth）。仅随容器尺寸变化，
+  // 不随内部滚动条出现/消失而变 —— 这是杜绝「滚动条闪动 / 反馈循环」的关键：
+  // 下面所有列宽 / gutter 决策都基于此稳定值与内容量，绝不反测 scroller 的 clientWidth。
+  const [gridW, setGridW] = React.useState(0);
+  // 垂直滚动条是否存在：用【垂直】指标 scrollHeight > clientHeight 判定。
+  // 该指标只取决于行数与容器高度，与列宽 / 横向滚动完全无关，因此绝不会因我们的布局改动而反跳，
+  // 从根本上切断「滚动条出现 → 宽度变 → 重算 → 滚动条消失 → …」的死循环。
+  const [vScroll, setVScroll] = React.useState(false);
+  const widths = visibleCols.map((c) => colWidths[c.id] ?? c.width);
+  const totalWidth = widths.reduce((s, w) => s + w, 0);
+  // 纵向滚动条布局宽：对齐 Ext.getScrollBarWidth()（覆盖式浏览器 0 / 经典 17），
+  // 不写死 19，否则覆盖式滚动条浏览器下末列右侧会凭空多出 19px 空隙（真 Ext 在该环境预留 0）。
+  const vScrollW = getScrollBarWidth();
+  const SHRINK_CAP = 30; // 末列最多可收缩的像素，用于「差一点点铺满」时避免冒出横向滚动条
+  // 纵向滚动条 gutter 仅在「数据行确实出现纵向滚动条」时预留——vScroll 由下方 useEffect 实测
+  // scroller 的 scrollHeight > clientHeight 得到（即 user 方案：先判断数据列是否有滚动条，有才预留）。
+  // 不再以 fixedHeight 提前预留：固定高度但内容不溢出（如基础表格 3 行 < 160px）时数据列本无滚动条，
+  // 就不应留那 19px，否则末列右侧凭空一段空隙。gutter 实际像素 = 运行时测量的滚动条宽 vScrollW
+  // （覆盖式 0 / 经典 17）；仅 vScroll 为真时才取它，无滚动条时为 0、零空隙。
+  const needGutter = vScroll;
+  const gutter = needGutter ? vScrollW : 0;
+  // 横向滚动：仅由「列总宽 vs 网格整宽」决定（两者皆不随滚动条变化），稳定不反跳。
+  // body 可用宽 = 网格整宽 − 垂直滚动条 gutter（垂直滚动条占用的右侧空间单独预留，不蚕食列宽判定）。
+  const bodyAvail = gridW > 0 ? gridW - (needGutter ? vScrollW : 0) : totalWidth;
+  // 是否「恰好铺满」：列总宽落在 (gridW − SHRINK_CAP) ~ (gridW + fitEps) 区间内即视为可铺满：
+  //  - 列偏窄 → 末列撑宽填满（正 slack）；
+  //  - 列偏宽（余量 <= SHRINK_CAP）→ 末列收缩吸收（负 slack），不产生横向滚动条；
+  //  - 列明显超出 → 进入横向滚动分支。
+  // 注意：判定只针对【横向内容】用稳定的 gridW，绝不包含纵向滚动条宽 vScrollW —— 纵向滚动条
+  // 的空间由下方 header/body 的 gutter 机制单独预留（不蚕食列宽判定），否则展开行导致纵向滚动条
+  // 出现时会多吞 19px，使本已「勉强铺满」的列越过 SHRINK_CAP 而错误地冒出横向滚动条。
+  const fits = gridW > 0 && totalWidth <= gridW + SHRINK_CAP;
+  // autoExpandColumn：网格整宽铺满时，由该列吸收 slack（而非末列），对齐 Ext autoExpandColumn。
+  const expandColIdx = React.useMemo(() => {
+    if (!autoExpandColumn) return -1;
+    return visibleCols.findIndex((c) => c.id === autoExpandColumn);
+  }, [autoExpandColumn, visibleCols]);
+  // 给定当前渲染子集 cols，返回吸收 slack 的列下标（非锁定主路径且设了 autoExpandColumn 时指向该列，否则末列）。
+  const slackIndexOf = (cols: ColWithId[]): number => {
+    if (expandColIdx >= 0 && cols === visibleCols) return expandColIdx;
+    return cols.length - 1;
+  };
+  if (fits) {
+    // 恰好铺满（无横向滚动）：表体可视宽 = bodyAvail = gridW - gutter（纵向滚动条落在其右 gutter 位）。
+    // 表头 100% 铺满整宽 gridW，并让「吸收 slack 的末列」再延伸 gutter —— 表头列总宽 = gridW，
+    // 末列右侧那段正好覆盖纵向滚动条所在的 gutter 位，表头与表体列 0..n-2 完全对齐、末列无可见空隙。
+    // （gutter=0 即无滚动条时末列不延伸，表头仍铺满 gridW，零空隙。）
+    var headerInnerW = gridW > 0 ? gridW : bodyAvail;
+    var headerOffsetW = gridW;
+    var rowW = bodyAvail;
+    var slack = Math.round(bodyAvail - totalWidth);
+    // 行内表宽必须等于 bodyAvail（= gridW − gutter），而非整宽 gridW：gutter 已被末列 slack 吸收进
+    // 列总宽（列组和 = bodyAvail），若表宽仍取 gridW，则固定的 table-layout 会把剩余的 gutter 宽
+    // 平摊到各列（表现为"每列被拉宽"），且 438 宽的表在 421 宽的经典滚动条数据区里横向溢出
+    // （表现为"横向滚动宽度增加"）。行 div 已是 bodyAvail，表宽与之对齐才不溢、列不被拉宽。
+    var tableW = bodyAvail;
+  } else {
+    // 真·横向滚动：
+    //  - 表头「窗口」(header-inner) = bodyAvail（= gridW − vScrollW，与 body scroller 可视宽一致）；
+    //    这样 header-inner 与 body 的可视宽/可滚范围完全相同，syncScroll 的 1:1 scrollLeft 赋值
+    //    在全程（含接近底部时）都精确同步。此前用 gridW 作 headerInnerW 导致 header 视口比 body 宽
+    //    vScrollW，滚动到底部时 header 先到终点而 body 还需再滚一小段（即"header和body滚动不同"）。
+    //  - offset / 表宽 / 行宽 = 列总宽（不加 vScrollW gutter——gutter 已通过缩小视口体现）。
+    //  - 行区同宽，由 scroller 横向滚动。
+    var headerInnerW = gridW > 0 ? bodyAvail : bodyAvail;
+    var headerOffsetW = totalWidth;
+    var rowW = totalWidth;
+    var slack = 0;
+    var tableW = totalWidth;
+  }
+
+  // 锁定列分栏（对齐 Ext.ux.grid.LockingGridView + LockingColumnModel）：
+  // 把 visibleCols 按 c.locked 拆成「锁定列」与「解锁列」两半，分别渲染进左侧固定面板 x-grid3-locked
+  // 与右侧可横向滚动面板 x-grid3-unlocked；两面板纵向滚动同步（syncScroll）。
+  // 仅当「至少 1 锁定 + 1 解锁」才触发分栏渲染，否则退化为普通 Grid（零回归）。
+  const colWOf = (c: ColWithId): number => colWidths[c.id] ?? c.width;
+  const lockedCols = visibleCols.filter((c) => c.locked);
+  const unlockedCols = visibleCols.filter((c) => !c.locked);
+  const hasLock = lockedCols.length > 0 && unlockedCols.length > 0;
+  const lockedTotal = lockedCols.reduce((s, c) => s + colWOf(c), 0);
+  const unlockedTotal = unlockedCols.reduce((s, c) => s + colWOf(c), 0);
+  let lockedPaneW = lockedTotal;
+  let unlockedPaneW = unlockedTotal;
+  let unlockedSlack = 0;
+  if (hasLock) {
+    if (fits) {
+      // 网格整宽铺满：解锁面板占右侧剩余宽，末列吸收 slack 撑满（对齐 Ext 写死 lockedWidth、解锁侧填满）。
+      unlockedPaneW = Math.max(unlockedTotal, gridW - lockedTotal - gutter);
+      unlockedSlack = Math.max(0, unlockedPaneW - unlockedTotal);
+    } else {
+      // 真·横向滚动：解锁面板 = 解除列总宽 + 滚动条 gutter，面板内横向滚动。
+      unlockedPaneW = unlockedTotal + gutter;
+    }
+  }
+  const lockedWidths = lockedCols.map((c) => colWOf(c));
+  const unlockedWidths = unlockedCols.map((c, i) =>
+    i === unlockedCols.length - 1 ? colWOf(c) + unlockedSlack : colWOf(c),
+  );
+  // 解锁面板表头窗口/偏移宽（对齐 Ext getOffsetWidth = totalWidth - lockedWidth + scrollOffset）：
+  // - 铺满无横向滚动 → 窗口=偏移=解锁面板可视宽=unlockedPaneW，scrollLeft 恒 0；
+  // - 真·横向滚动 → 窗口须等于「解锁面板可视宽」（= 整宽−锁定面宽−纵向滚动条位），使 header-inner
+  //   比内容窄、可 scrollLeft 且与 body 滚动范围一致（关键：此前窗口=内容宽−gutter，仅比内容窄 17px，
+  //   导致 header 滚动范围远小于 body，同步时 header 卡死、不跟随）。偏移=内容宽承载整表。
+  const uHeaderInnerW = hasLock
+    ? (fits ? unlockedPaneW : Math.max(0, gridW - lockedPaneW - (vScroll ? vScrollW : 0)))
+    : headerInnerW;
+  const uHeaderOffsetW = hasLock ? unlockedPaneW : headerOffsetW;
+
+  // 列宽拖拽（对齐 Ext.grid.GridView.SplitDragZone）：拖拽时显示 1px .x-grid3-resize-proxy 线，
+  // mouseup 提交新列宽。split 手柄透明（无 CSS 规则），不影响静态像素。
+  const MIN_COL_WIDTH = 25; // Ext 默认 minColumnWidth
+  const gridRef = React.useRef<HTMLDivElement>(null);
+  // 横向滚动同步（对齐 Ext GridView.syncScroll：scroller 滚动时把 scrollLeft 写给
+  // header-inner，使表头跟随 body 一起横向滚动。原生 ExtJS 3.2.1 正是靠此保持对齐）。
+  const scrollerRef = React.useRef<HTMLDivElement>(null);
+  const innerHdRef = React.useRef<HTMLDivElement>(null);
+  // 锁定分栏：解锁面板纵向滚动时，把 scrollTop 同步给锁定面板（对齐 Ext.ux.grid.LockingGridView.syncScroll）。
+  const lockedScrollerRef = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const sc = scrollerRef.current;
+    const hd = innerHdRef.current;
+    if (!sc || !hd) return;
+    const onScroll = () => {
+      hd.scrollLeft = sc.scrollLeft;
+    };
+    sc.addEventListener('scroll', onScroll);
+    return () => sc.removeEventListener('scroll', onScroll);
+  }, []);
+  // 测量：仅观察「网格整宽 gridW」（外层 .x-grid3 的 clientWidth）。
+  // 刻意【不】观察滚动容器 sc——以往闪烁就源于观察 sc 后，vScroll 变化改了布局又触发 sc 的
+  // resize 回调，形成「滚动条出现→宽度变→重算→滚动条消失」的反馈循环。
+  // gridW 只随容器尺寸变化，与内部滚动条无关，因此绝不会反跳。
+  // 用 useLayoutEffect（而非 useEffect）：首帧绘制前就量到 gridW，否则初始 gridW=0 会让首屏
+  // 走「横向滚动」分支、表头按 totalWidth 渲染（< 容器宽）→ 右侧闪一下空带，下一帧量到 gridW
+  // 才铺满。改为 layout effect 后首屏即用真实 gridW 计算，无闪隙。
+  React.useLayoutEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    const measure = () => setGridW(el.clientWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  // 垂直滚动条是否存在（vScroll）：用【垂直】指标 scrollHeight > clientHeight 判定，
+  // 该指标只取决于行数 / 容器高度，与列宽、横向滚动完全无关，因此不会因我们的布局改动而反跳。
+  // 当内容量（data / 分组 / 列总宽 / 容器宽高）变化时需重算——这些依赖都是「输入」而非「布局结果」，
+  // 不会发生自我回写的循环。
+  // 同样用 useLayoutEffect（与 gridW 一致）：确保首屏绘制前已拿到正确 vScroll，否则首帧
+  // vScroll=false（gutter=0）会让溢出网格的表体先按 318 宽渲染、下一帧才缩到 318-17，轻微抖一下。
+  React.useLayoutEffect(() => {
+    const sc = scrollerRef.current;
+    if (!sc) return;
+    setVScroll(sc.scrollHeight > sc.clientHeight);
+  }, [data, totalWidth, gridW, height, groupField, expandedRows, collapsed]);
+  const resizeRef = React.useRef<{ col: string; startX: number; startW: number } | null>(null);
+  const resizingRef = React.useRef(false); // 拖拽后抑制误触排序 click
+  const [proxy, setProxy] = React.useState<{ left: number; height: number } | null>(null);
+
+  React.useEffect(() => {
+    if (!resizeRef.current) return;
+    const onMove = (e: MouseEvent) => {
+      const r = resizeRef.current!;
+      const diff = e.clientX - r.startX;
+      const newW = Math.max(MIN_COL_WIDTH, r.startW + diff);
+      const gridRect = gridRef.current?.getBoundingClientRect();
+      const left = gridRect ? e.clientX - gridRect.left : 0;
+      const height = gridRef.current?.offsetHeight ?? 0;
+      setProxy({ left, height });
+      // 实时预览：直接改列宽（与 Ext「仅 proxy 线、mouseup 提交」不同，但视觉等价且更顺滑）
+      setColWidths((prev) => ({ ...prev, [r.col]: newW }));
+    };
+    const onUp = () => {
+      resizeRef.current = null;
+      setProxy(null);
+      resizingRef.current = true;
+      window.setTimeout(() => (resizingRef.current = false), 0);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [proxy !== null]);
+
+  const startResize = (e: React.MouseEvent, colIdx: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const col = visibleCols[colIdx];
+    resizeRef.current = { col: col.id, startX: e.clientX, startW: widths[colIdx] };
+    const gridRect = gridRef.current?.getBoundingClientRect();
+    const left = gridRect ? e.clientX - gridRect.left : 0;
+    const height = gridRef.current?.offsetHeight ?? 0;
+    setProxy({ left, height });
+  };
+
+  // 列拖拽重排（对齐 Ext.grid.GridView ColumnDragZone / enableColumnMove）：
+  // 在表头非 split/非 hd-btn 区域按下并移动即触发，mouseup 按光标落在某列中点左侧/右侧提交新顺序。
+  const dragColRef = React.useRef<{ id: string } | null>(null);
+  const movedRef = React.useRef(false);
+  const suppressReorderClickRef = React.useRef(false);
+  const [reordering, setReordering] = React.useState(false);
+  const [proxyLeft, setProxyLeft] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    if (!dragColRef.current) return;
+    const onMove = (e: MouseEvent) => {
+      const gridRect = gridRef.current?.getBoundingClientRect();
+      if (!gridRect) return;
+      movedRef.current = true;
+      setProxyLeft(e.clientX - gridRect.left);
+    };
+    const onUp = (e: MouseEvent) => {
+      const from = dragColRef.current!;
+      const gridRect = gridRef.current?.getBoundingClientRect();
+      if (gridRect && movedRef.current) {
+        const tds = Array.from(
+          gridRef.current!.querySelectorAll('td[data-col-id]'),
+        ) as HTMLElement[];
+        // 仅数据列参与重排（checker / numberer 固定不动）
+        const dataTds = tds.filter(
+          (td) => !['checker', 'numberer', 'radio'].includes(td.getAttribute('data-col-id') || ''),
+        );
+        // 落在某列左半区 → 插到该列之前；右半区 → 继续向后；越过后仍无命中 → 追加到末尾。
+        let targetIndex = dataTds.length;
+        for (let i = 0; i < dataTds.length; i++) {
+          const r = dataTds[i].getBoundingClientRect();
+          if (e.clientX < r.left + r.width / 2) {
+            targetIndex = i;
+            break;
+          }
+        }
+        const visibleIds = visibleCols
+          .filter((c) => c.id !== 'checker' && c.id !== 'radio' && !c.isNumberer)
+          .map((c) => c.id);
+        const fromIndex = visibleIds.indexOf(from.id);
+        if (fromIndex !== -1 && targetIndex !== fromIndex) {
+          const newVisible = visibleIds.slice();
+          newVisible.splice(fromIndex, 1);
+          const insertAt = targetIndex > fromIndex ? targetIndex - 1 : targetIndex;
+          newVisible.splice(insertAt, 0, from.id);
+          const fixed = colOrder.filter(
+            (id) => id === 'checker' || id === 'radio' || colsById[id]?.isNumberer,
+          );
+          const hidden = colOrder.filter((id) => hiddenCols.has(id));
+          setColOrder([...fixed, ...newVisible, ...hidden]);
+          // 重排后抑制随后可能触发的表头 onClick（排序）
+          suppressReorderClickRef.current = true;
+          window.setTimeout(() => (suppressReorderClickRef.current = false), 0);
+        }
+      }
+      dragColRef.current = null;
+      movedRef.current = false;
+      setProxyLeft(null);
+      setReordering(false);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [reordering]);
+
+  const startReorder = (e: React.MouseEvent, colId: string) => {
+    if (!enableColumnReorder) return;
+    if (e.button !== 0) return;
+    const t = e.target as HTMLElement;
+    if (t.closest('.x-grid-split') || t.closest('.x-grid3-hd-btn')) return;
+    e.preventDefault();
+    dragColRef.current = { id: colId };
+    movedRef.current = false;
+    setReordering(true);
+  };
+
+  // 行拖拽重排（对齐 Ext 行 DnD：拖动数据行改变底层 data 顺序）：
+  // 在行体按下并移动即触发，mouseup 按光标落在某行中点上方/下方提交新顺序。
+  const rowDragRef = React.useRef<{ origIdx: number } | null>(null);
+  const rowMovedRef = React.useRef(false); // 拖拽后抑制误触行点击
+  const [rowDragging, setRowDragging] = React.useState(false);
+  const [rowGhost, setRowGhost] = React.useState<{ text: string; x: number; y: number } | null>(null);
+  const [rowDropLine, setRowDropLine] = React.useState<number | null>(null);
+
+  React.useEffect(() => {
+    if (!rowDragging) return;
+    const onMove = (e: MouseEvent) => {
+      const gridRect = gridRef.current?.getBoundingClientRect();
+      if (!gridRect) return;
+      rowMovedRef.current = true;
+      setRowGhost((g) => (g ? { ...g, x: e.clientX, y: e.clientY } : g));
+      // 计算插入线：落在某行上半区 → 插到该行之前；越过全部 → 末尾
+      const rowEls = Array.from(
+        gridRef.current!.querySelectorAll('[data-row-index]'),
+      ) as HTMLElement[];
+      let top: number | null = null;
+      for (const el of rowEls) {
+        const r = el.getBoundingClientRect();
+        if (e.clientY < r.top + r.height / 2) {
+          top = r.top - gridRect.top;
+          break;
+        }
+      }
+      if (top === null && rowEls.length) {
+        const last = rowEls[rowEls.length - 1].getBoundingClientRect();
+        top = last.bottom - gridRect.top;
+      }
+      setRowDropLine(top);
+    };
+    const onUp = (e: MouseEvent) => {
+      const from = rowDragRef.current?.origIdx;
+      if (from != null) {
+        const rowEls = Array.from(
+          gridRef.current!.querySelectorAll('[data-row-index]'),
+        ) as HTMLElement[];
+        let targetOrig: number | null = null;
+        let insertAfter = false;
+        for (const el of rowEls) {
+          const r = el.getBoundingClientRect();
+          if (e.clientY < r.top + r.height / 2) {
+            targetOrig = Number(el.getAttribute('data-row-index'));
+            insertAfter = false;
+            break;
+          }
+          targetOrig = Number(el.getAttribute('data-row-index'));
+          insertAfter = true;
+        }
+        if (targetOrig !== null && targetOrig !== from) {
+          setRowOrder((prev) => {
+            const next = prev.filter((i) => i !== from);
+            let pos = next.indexOf(targetOrig as number);
+            if (pos === -1) pos = next.length;
+            else if (insertAfter) pos = pos + 1;
+            next.splice(pos, 0, from);
+            return next;
+          });
+        }
+      }
+      rowDragRef.current = null;
+      setRowGhost(null);
+      setRowDropLine(null);
+      setRowDragging(false);
+      // 延迟清除 moved 标记，使随后的行 onClick 仍判定为拖拽（避免误触选中）
+      window.setTimeout(() => (rowMovedRef.current = false), 0);
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+  }, [rowDragging]);
+
+  const startRowDrag = (e: React.MouseEvent, origIdx: number) => {
+    if (!enableRowReorder) return;
+    if (e.button !== 0) return;
+    const t = e.target as HTMLElement;
+    if (t.closest('.x-grid3-row-checker') || t.closest('a, input, button')) return;
+    e.preventDefault();
+    const firstCol =
+      visibleCols.find((c) => c.id !== 'checker' && c.id !== 'radio' && !c.isNumberer) ??
+      visibleCols[0];
+    const rowText = firstCol ? String(data[origIdx]?.[firstCol.dataIndex] ?? '') : '';
+    rowDragRef.current = { origIdx };
+    rowMovedRef.current = false;
+    setRowGhost({ text: rowText, x: e.clientX, y: e.clientY });
+    setRowDragging(true);
+  };
+
+  // 列菜单：点击表头 hd-btn 打开列显示菜单（对齐 Ext 默认 enableHdMenu + enableColumnHide）
+  const onHdBtnClick = (e: React.MouseEvent, colId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (enableColumnHide === false) return;
+    const td = (e.currentTarget as HTMLElement).closest('td');
+    const gridRect = gridRef.current?.getBoundingClientRect();
+    const tdRect = td?.getBoundingClientRect();
+    const style: React.CSSProperties = {};
+    if (gridRect && tdRect) {
+      style.left = tdRect.left - gridRect.left;
+      style.top = tdRect.bottom - gridRect.top;
+    }
+    setMenuStyle(style);
+    setMenuCol(colId);
+  };
+  const toggleColumn = (colId: string) => {
+    setHiddenCols((prev) => {
+      const n = new Set(prev);
+      if (n.has(colId)) n.delete(colId);
+      else n.add(colId);
+      return n;
+    });
+    setMenuCol(null);
+  };
+  // 点击表格外部关闭列菜单
+  React.useEffect(() => {
+    if (menuCol === null) return;
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as HTMLElement;
+      if (t.closest('.x-menu') || t.closest('.x-grid3-hd-btn')) return;
+      setMenuCol(null);
+    };
+    document.addEventListener('mousedown', onDown);
+    return () => document.removeEventListener('mousedown', onDown);
+  }, [menuCol]);
+
+  // 列排序状态（对齐 Ext 默认 sortable 行为：首击 asc，再击 desc，往复切换）
+  const [sort, setSort] = React.useState<{ col: string; dir: 'asc' | 'desc' } | null>(null);
+  const sortedData = React.useMemo(() => {
+    if (!sort) return filteredData;
+    const col = managedCols.find((c) => c.id === sort.col);
+    if (!col) return filteredData;
+    const key = col.dataIndex;
+    const arr = [...filteredData];
+    arr.sort((a, b) => {
+      const av = a[key];
+      const bv = b[key];
+      // 对齐 Ext 'auto' sortType：数值按大小、其余按大写字符串比较
+      let cmp: number;
+      if (typeof av === 'number' && typeof bv === 'number') cmp = av - bv;
+      else cmp = String(av).toUpperCase().localeCompare(String(bv).toUpperCase());
+      return sort.dir === 'asc' ? cmp : -cmp;
+    });
+    return arr;
+  }, [filteredData, sort, managedCols]);
+
+  // 分组模式（对齐 Ext.grid.GroupingView + store.groupBy）：按 groupField 升序排列并相邻分组。
+  // 分组不忽略手动 sort——以已手动排序的 sortedData 为源，再按 groupField 稳定排序：
+  // 组间顺序由 groupField 决定，组内保留手动排序（V8 Array.sort 稳定，等 groupField 值不会重排组内行）。
+  const displayData = React.useMemo(() => {
+    if (!groupField) return sortedData;
+    const gcol = managedCols.find((c) => c.dataIndex === groupField);
+    if (!gcol) return sortedData;
+    const arr = [...sortedData];
+    arr.sort((a, b) => {
+      const av = a[groupField];
+      const bv = b[groupField];
+      if (typeof av === 'number' && typeof bv === 'number') return av - bv;
+      return String(av).toUpperCase().localeCompare(String(bv).toUpperCase());
+    });
+    return arr;
+  }, [filteredData, groupField, managedCols, sortedData]);
+
+  // 分组折叠状态：groupId（= 字段值）-> 是否折叠
+  const groupHeader =
+    groupField && cols.find((c) => c.dataIndex === groupField)?.header;
+  // 计算分组结构（displayData 已按 groupField 排序，相邻相同值归一组）
+  const groups = React.useMemo(() => {
+    if (!groupField || !groupHeader) return [] as { key: string; label: string; rows: number[] }[];
+    const out: { key: string; label: string; rows: number[] }[] = [];
+    let cur: { key: string; label: string; rows: number[] } | null = null;
+    displayData.forEach((row, ri) => {
+      const key = String(row[groupField]);
+      if (!cur || cur.key !== key) {
+        cur = { key, label: `${groupHeader}: ${key}`, rows: [] };
+        out.push(cur);
+      }
+      cur.rows.push(ri);
+    });
+    return out;
+  }, [displayData, groupField, groupHeader]);
+
+  // 分组汇总（对齐 Ext.ux.grid.GroupSummary.summaryType）：对分组内某列做聚合。
+  // 仅当该列声明 summaryType 时返回内容，否则返回 null（对应单元格留空）。
+  const computeSummary = (
+    c: GridColumn,
+    groupRows: Record<string, unknown>[],
+  ): React.ReactNode => {
+    if (!c.summaryType) return null;
+    const di = c.dataIndex;
+    const vals = groupRows
+      .map((r) => r[di])
+      .filter((v) => v !== undefined && v !== null && v !== '');
+    const numVals = vals.map(Number).filter((n) => !Number.isNaN(n));
+    let value: number | string = '';
+    switch (c.summaryType) {
+      case 'count':
+        value = groupRows.length;
+        break;
+      case 'sum':
+        value = numVals.reduce((a, b) => a + b, 0);
+        break;
+      case 'average':
+        value = numVals.length
+          ? numVals.reduce((a, b) => a + b, 0) / numVals.length
+          : 0;
+        break;
+      case 'min':
+        value = numVals.length ? Math.min(...numVals) : 0;
+        break;
+      case 'max':
+        value = numVals.length ? Math.max(...numVals) : 0;
+        break;
+    }
+    if (c.summaryRenderer) return c.summaryRenderer(value, groupRows, di);
+    // 无自定义 summaryRenderer 时，对浮点聚合结果收敛精度（去掉 JS 浮点噪声、最多 4 位小数），
+    // 避免 average 等非整除结果（如 29.666666666666668）超长溢出窄列单元格。整数原样输出。
+    if (typeof value === 'number' && !Number.isInteger(value)) {
+      return String(Math.round(value * 1e4) / 1e4);
+    }
+    return String(value);
+  };
+  // 是否存在任意汇总列（决定是否渲染汇总行，零汇总列时退化为普通分组，零回归）
+  const hasSummary = visibleCols.some((c) => c.summaryType);
+
+  // 行编辑器（对齐 Ext.ux.grid.RowEditor）：editing 记录正在编辑的原始数据索引；editValues 为编辑中副本。
+  const [editing, setEditing] = React.useState<{ origIdx: number } | null>(null);
+  const [editValues, setEditValues] = React.useState<Record<string, unknown>>({});
+  const startEdit = (origIdx: number) => {
+    if (!rowEditor) return;
+    setEditing({ origIdx });
+    setEditValues({ ...(data[origIdx] as Record<string, unknown>) });
+  };
+  const updateEdit = (di: string, v: string) =>
+    setEditValues((prev) => ({ ...prev, [di]: v }));
+  const saveEdit = (origIdx: number) => {
+    const base = data[origIdx] as Record<string, unknown>;
+    const next: Record<string, unknown> = { ...base };
+    for (const c of visibleCols) {
+      if (c.id === 'expander' || c.isNumberer || c.id === 'checker' || c.id === 'radio' || c.type === 'checkcolumn') continue;
+      const di = c.dataIndex;
+      if (!(di in editValues)) continue;
+      const raw = editValues[di];
+      // 原值为数字则把输入字符串转回 number（对齐 Ext postEditValue 的字段类型），其余保持字符串
+      next[di] = typeof base[di] === 'number' && raw !== '' && raw !== null ? Number(raw) : raw;
+    }
+    rowEditor?.onCommit?.(origIdx, next);
+    setEditing(null);
+    setEditValues({});
+  };
+  const cancelEdit = () => {
+    setEditing(null);
+    setEditValues({});
+  };
+
+  // 选中状态：selectionMode 时内部维护（受 selectedRow 初始化）；否则仅受控 selectedRow
+  const [internalSelected, setInternalSelected] = React.useState<Set<number>>(() => {
+    const s = new Set<number>();
+    if (selectedRow != null) s.add(selectedRow);
+    return s;
+  });
+  const selected = selectionMode
+    ? internalSelected
+    : selectedRow != null
+    ? new Set<number>([selectedRow])
+    : new Set<number>();
+  const allSelected = data.length > 0 && selected.size === data.length;
+  const hdOn = allSelected;
+
+  const onRowClick = (ri: number) => {
+    if (rowMovedRef.current) return; // 行拖拽后抑制误触选择
+    if (!selectionMode) return;
+    // 行体点击：单选替换（对齐 Ext RowSelectionModel 普通点击 keepExisting=false）
+    setInternalSelected(new Set<number>([ri]));
+  };
+  const onCheckerClick = (ri: number) => {
+    if (!selectionMode) return;
+    setInternalSelected((prev) => {
+      const n = new Set(prev);
+      if (n.has(ri)) n.delete(ri);
+      else n.add(ri);
+      return n;
+    });
+  };
+  const onRadioClick = (ri: number) => {
+    if (!selectionMode) return;
+    // 单选：直接替换（对齐 Ext RadioSelectionModel，始终单选）
+    setInternalSelected(new Set<number>([ri]));
+  };
+  const onHdCheckerClick = () => {
+    if (!selectionMode) return;
+    if (allSelected) setInternalSelected(new Set<number>());
+    else setInternalSelected(new Set(data.map((_, i) => i)));
+  };
+
+  // 表头单元格（对齐 Ext.ux.grid.LockingGridView.renderHeaders：同一套单元格渲染，按列子集 cols 拆到
+  // 锁定/解锁两个面板各自的表头表；wArr/sSlack 为该子集的逐列宽与末列 slack，保证与各自 body 对齐）。
+  const buildHeaderCells = (
+    cols: ColWithId[],
+    wArr: number[],
+    sSlack: number,
+  ): React.ReactNode[] =>
+    cols.map((c, i) => {
+      // 行展开器列表头（对齐 Ext.ux.grid.RowExpander 前置展开列：空表头占位）
+      if (c.id === 'expander') {
+        return (
+          <td
+            key={c.id}
+            data-col-id={c.id}
+            className={['x-grid3-hd', 'x-grid3-cell', 'x-grid3-td-expander', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: wArr[i] }}
+          >
+            <div className="x-grid3-hd-inner x-grid3-hd-expander" unselectable="on">
+              {c.header}
+            </div>
+          </td>
+        );
+      }
+      const cellCls = [
+        'x-grid3-hd',
+        'x-grid3-cell',
+        `x-grid3-td-${c.id}`,
+        i === 0 ? 'x-grid3-cell-first' : i === cols.length - 1 ? 'x-grid3-cell-last' : '',
+        sort && sort.col === c.id ? (sort.dir === 'asc' ? 'sort-asc' : 'sort-desc') : '',
+        c.dataIndex && filterState[c.dataIndex]?.active ? 'ux-filtered-column' : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+      const sortable = c.sortable !== false;
+      const resizable = c.resizable !== false;
+      // 末列吸收 slack 撑满到网格右边缘（无横向滚动且列未铺满时）
+      const w = wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0);
+
+      // 行号列表头（对齐 Ext.grid.RowNumberer：空文本 + hd-btn + sort-icon，无排序）
+      if (c.isNumberer) {
+        return (
+          <td
+            key={c.id}
+            data-col-id={c.id}
+            className={['x-grid3-hd', 'x-grid3-cell', 'x-grid3-td-numberer', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: w }}
+          >
+            <div className="x-grid3-hd-inner x-grid3-hd-numberer" unselectable="on">
+              <a className="x-grid3-hd-btn" href="#" onClick={(e) => e.stopPropagation()}></a>
+              {c.header}
+              <img className="x-grid3-sort-icon" src={BLANK} alt="" />
+            </div>
+          </td>
+        );
+      }
+      // checker 列表头（对齐 Ext CheckboxSelectionModel：x-grid3-hd-checker 内层）
+      if (c.id === 'checker') {
+        return (
+          <td
+            key={c.id}
+            data-col-id={c.id}
+            className={['x-grid3-hd', 'x-grid3-cell', 'x-grid3-td-checker', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: w }}
+            onClick={() => onHdCheckerClick()}
+          >
+            <div
+              className={['x-grid3-hd-inner', hdOn ? 'x-grid3-hd-checker-on' : '']
+                .filter(Boolean)
+                .join(' ')}
+              unselectable="on"
+              style={{ width: w }}
+            >
+              <div className="x-grid3-hd-checker">&#160;</div>
+            </div>
+          </td>
+        );
+      }
+      // radio 列表头（对齐 Ext RadioSelectionModel：空表头，无全选）
+      if (c.id === 'radio') {
+        return (
+          <td
+            key={c.id}
+            data-col-id={c.id}
+            className={['x-grid3-hd', 'x-grid3-cell', 'x-grid3-td-radio', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: w }}
+          >
+            <div className="x-grid3-hd-inner x-grid3-hd-radio" unselectable="on" style={{ width: w }}>
+              &#160;
+            </div>
+          </td>
+        );
+      }
+      return (
+        <td
+          key={c.id}
+          data-col-id={c.id}
+          className={cellCls}
+          style={{ width: w }}
+          onMouseDown={(e) => startReorder(e, c.id)}
+          onClick={() => {
+            if (suppressReorderClickRef.current) return; // 重排后抑制误触排序
+            if (resizingRef.current) return; // 拖拽改宽后抑制误触排序
+            if (!sortable) return;
+            setSort((prev) => {
+              if (!prev || prev.col !== c.id) return { col: c.id, dir: 'asc' };
+              if (prev.dir === 'asc') return { col: c.id, dir: 'desc' };
+              return { col: c.id, dir: 'asc' };
+            });
+          }}
+        >
+          <div
+            className={`x-grid3-hd-inner x-grid3-hd-${c.id}`}
+            unselectable="on"
+            style={{ width: w }}
+          >
+            {!c.menuDisabled && (
+              <a
+                className="x-grid3-hd-btn"
+                href="#"
+                style={hdH ? { height: `${hdH}px` } : undefined}
+                onClick={(e) => onHdBtnClick(e, c.id)}
+              ></a>
+            )}
+            {c.header}
+            <img className="x-grid3-sort-icon" src={BLANK} alt="" />
+            {resizable && (
+              <div
+                className="x-grid-split"
+                unselectable="on"
+                onMouseDown={(e) => startResize(e, visibleCols.findIndex((x) => x.id === c.id))}
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  top: 0,
+                  width: 5,
+                  height: '100%',
+                  cursor: 'col-resize',
+                  zIndex: 3,
+                }}
+              />
+            )}
+          </div>
+        </td>
+      );
+    });
+  const headerCells = buildHeaderCells(visibleCols, widths, slack);
+
+  // 列分组表头行（对齐 Ext.ux.grid.ColumnHeaderGroup.renderHeaders：与列头共用同一张 fixed-layout 表，
+  // 借助 <colgroup> 锁定每列宽度，分组单元用 colspan 跨列，自动精确对齐下方列头/数据；单元
+  // td.x-grid3-hd.x-grid3-gcell.ux-grid-hd-group-cell + 行类 ux-grid-hd-group-row-{row}，宽度由所跨列
+  // 宽之和自动得出（末列吸收 slack）；样式复用原版 examples/ux/css/ColumnHeaderGroup.css，零新增手写 CSS）。
+  const renderGroupHeaderRows = (): React.ReactNode[] => {
+    if (!headerGroups || headerGroups.length === 0) return [];
+    return headerGroups.map((row, ri) => {
+      let gcol = 0;
+      const cells = row.map((gp, gi) => {
+        const cs = gp.colspan ?? 1;
+        const firstCol = visibleCols[gcol];
+        const id = firstCol ? firstCol.id : `grp-${ri}-${gi}`;
+        const cls = [
+          'x-grid3-hd',
+          'x-grid3-gcell',
+          `x-grid3-td-${id}`,
+          `ux-grid-hd-group-row-${ri}`,
+          'ux-grid-hd-group-cell',
+        ]
+          .filter(Boolean)
+          .join(' ');
+        const td = (
+          <td key={`grp-${ri}-${gi}`} className={cls} colSpan={cs} data-col-id={id}>
+            <div
+              className={`x-grid3-hd-inner x-grid3-hd-${id}`}
+              unselectable="on"
+              style={gp.align === 'right' ? { paddingRight: 16 } : undefined}
+            >
+              {gp.tooltip ? <span title={gp.tooltip}>{gp.header}</span> : gp.header}
+            </div>
+          </td>
+        );
+        gcol += cs;
+        return td;
+      });
+      return (
+        <tr key={`grp-row-${ri}`} className="x-grid3-hd-row">
+          {cells}
+        </tr>
+      );
+    });
+  };
+
+  // 行编辑器浮条（对齐 Ext.ux.grid.RowEditor 的 x-row-editor：表头/底部分隔条 + 蓝色编辑体 +
+  // 按列对齐的字段 + 居中 Save/Cancel 按钮；样式复用原版 examples/ux/css/RowEditor.css）。
+  // 锁定分栏时按 cols 子集渲染（默认全列，行为不变；降级为解锁面板内编辑条）。
+  const renderEditor = (
+    eOrig: number,
+    cols: ColWithId[] = visibleCols,
+    wArr: number[] = widths,
+    sSlack: number = slack,
+    paneTableW: number = tableW,
+  ): React.ReactNode => {
+    const row = data[eOrig];
+    const saveText = rowEditor?.saveText ?? 'Save';
+    const cancelText = rowEditor?.cancelText ?? 'Cancel';
+    const editorType = (c: GridColumn): 'text' | 'number' => {
+      if (c.editor === 'number') return 'number';
+      if (c.editor === 'text') return 'text';
+      return typeof row[c.dataIndex] === 'number' ? 'number' : 'text';
+    };
+    return (
+      <div
+        className="x-row-editor"
+        style={{
+          position: 'relative',
+          width: paneTableW,
+          marginTop: 2,
+          borderLeft: '1px solid #99bbe8',
+          borderRight: '1px solid #99bbe8',
+        }}
+      >
+        <div className="x-row-editor-header" />
+        <div className="x-row-editor-body">
+          <table
+            className="x-row-editor-fields"
+            border={0}
+            cellSpacing={0}
+            cellPadding={0}
+            style={{ tableLayout: 'fixed', width: paneTableW }}
+          >
+            <tbody>
+              <tr>
+                {cols.map((c, i) => {
+                  const w = wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0);
+                  const special =
+                    c.id === 'expander' ||
+                    !!c.isNumberer ||
+                    c.id === 'checker' ||
+                    c.id === 'radio' ||
+                    c.type === 'checkcolumn';
+                  const raw = editValues[c.dataIndex] ?? row[c.dataIndex];
+                  const val = raw === undefined || raw === null ? '' : raw;
+                  return (
+                    <td
+                      key={c.id}
+                      className={`x-grid3-td-${c.id}`}
+                      style={{ width: w, padding: '2px', verticalAlign: 'top' }}
+                    >
+                      {special ? (
+                        <div className="x-grid3-row-editor-cell" style={{ padding: '3px 4px' }}>
+                          {c.isNumberer
+                            ? eOrig + 1
+                            : c.type === 'checkcolumn'
+                            ? val
+                              ? '✓'
+                              : ''
+                            : String(val)}
+                        </div>
+                      ) : (
+                        <input
+                          className="x-form-text x-form-field"
+                          type={editorType(c) === 'number' ? 'number' : 'text'}
+                          value={String(val)}
+                          onChange={(e) => updateEdit(c.dataIndex, e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              saveEdit(eOrig);
+                            } else if (e.key === 'Escape') {
+                              cancelEdit();
+                            }
+                          }}
+                          style={{ width: '100%', boxSizing: 'border-box' }}
+                        />
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="x-row-editor-footer" />
+        <div
+          className="x-btns"
+          style={{ position: 'relative', top: 'auto', left: 'auto', margin: '4px auto 2px', transform: 'none' }}
+        >
+          <div className="x-plain-bwrap">
+            <div className="x-plain-body">
+              <table className="x-table-layout">
+                <tbody>
+                  <tr>
+                    <td className="x-table-layout-cell">
+                      <Button scale="small" text={saveText} onClick={(e) => { e.stopPropagation(); saveEdit(eOrig); }} />
+                    </td>
+                    <td className="x-table-layout-cell">
+                      <Button scale="small" text={cancelText} onClick={(e) => { e.stopPropagation(); cancelEdit(); }} />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // 数据行渲染（锁定分栏时按 cols 子集拆分到锁定/解锁两个面板；默认全列，行为不变）。
+  // wArr/sSlack 为该子集逐列宽与末列 slack；paneRowW/paneTableW 为该面板行区/表宽（用于行 div、展开体、行表）。
+  const renderRow = (
+    ri: number,
+    cols: ColWithId[] = visibleCols,
+    wArr: number[] = widths,
+    sSlack: number = slack,
+    paneRowW: number = rowW,
+    paneTableW: number = tableW,
+  ) => {
+    const row = displayData[ri];
+    const origIdx = idxByRow.get(row)!;
+    const altCls = stripeRows && (ri + 1) % 2 === 0 ? ' x-grid3-row-alt' : '';
+    const selCls = selected.has(ri) ? ' x-grid3-row-selected' : '';
+    const cells = cols.map((c, i) => {
+      // 列宽：末列吸收 slack 撑满到网格右边缘，保证与表头（同样末列吸收 slack）严格对齐。
+      // 配合 .x-grid3-row-table 的 table-layout:fixed，避免浏览器按内容自动分配列宽导致错位。
+      const cellW = wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0);
+      // 行展开器列 body（对齐 Ext.ux.grid.RowExpander.renderer：x-grid3-row-expander 切换按钮）
+      if (c.id === 'expander') {
+        const isExpanded = expandedRows.has(origIdx);
+        return (
+          <td
+            key={c.id}
+            className={['x-grid3-col', 'x-grid3-cell', 'x-grid3-td-expander', i === 0 ? 'x-grid3-cell-first' : '', i === cols.length - 1 ? 'x-grid3-cell-last' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: cellW, boxSizing: 'border-box' }}
+            tabIndex={0}
+          >
+            <div className="x-grid3-cell-inner" unselectable="on">
+              <div
+                className="x-grid3-row-expander"
+                role="button"
+                aria-label={isExpanded ? '收起行' : '展开行'}
+                aria-expanded={isExpanded}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleExpand(origIdx);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleExpand(origIdx);
+                  }
+                }}
+              />
+            </div>
+          </td>
+        );
+      }
+      // 行号列 body（对齐 Ext.grid.RowNumberer.renderer：内容 = 行索引+1，右对齐）
+      if (c.isNumberer) {
+        return (
+          <td
+            key={c.id}
+            className={['x-grid3-col', 'x-grid3-cell', 'x-grid3-td-numberer', i === 0 ? 'x-grid3-cell-first' : '', i === cols.length - 1 ? 'x-grid3-cell-last' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: cellW, boxSizing: 'border-box' }}
+            tabIndex={0}
+          >
+            <div
+              className="x-grid3-cell-inner x-grid3-col-numberer"
+              unselectable="on"
+              style={{ textAlign: 'right' }}
+            >
+              {ri + 1}
+            </div>
+          </td>
+        );
+      }
+      // checker 列 body（对齐 Ext CheckboxSelectionModel.renderer：x-grid3-row-checker 内层）
+      if (c.id === 'checker') {
+        return (
+          <td
+            key={c.id}
+            className={['x-grid3-col', 'x-grid3-cell', 'x-grid3-td-checker', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: cellW, boxSizing: 'border-box' }}
+            tabIndex={0}
+          >
+            <div className="x-grid3-cell-inner">
+              <div
+                className="x-grid3-row-checker"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCheckerClick(ri);
+                }}
+              >
+                &#160;
+              </div>
+            </div>
+          </td>
+        );
+      }
+      // radio 列 body（对齐 Ext RadioSelectionModel.renderer：x-grid3-row-radio 内层渲染 radio）
+      if (c.id === 'radio') {
+        const checked = selected.has(ri);
+        return (
+          <td
+            key={c.id}
+            className={['x-grid3-col', 'x-grid3-cell', 'x-grid3-td-radio', i === 0 ? 'x-grid3-cell-first' : '']
+              .filter(Boolean)
+              .join(' ')}
+            style={{ width: cellW, boxSizing: 'border-box' }}
+            tabIndex={0}
+          >
+            <div className="x-grid3-cell-inner">
+              <div
+                className="x-grid3-row-radio"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRadioClick(ri);
+                }}
+              >
+                <input
+                  type="radio"
+                  readOnly
+                  checked={checked}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRadioClick(ri);
+                  }}
+                />
+              </div>
+            </div>
+          </td>
+        );
+      }
+      // 复选框列 body（对齐 Ext.ux.grid.CheckColumn.renderer：x-grid3-checkcol 可勾选框 + 勾选态 x-grid3-checkcol-on）
+      if (c.type === 'checkcolumn') {
+        const key = `${origIdx}:${c.dataIndex}`;
+        const checked = key in checks ? checks[key] : !!row[c.dataIndex];
+        return (
+          <td
+            key={c.id}
+        className={['x-grid3-col', 'x-grid3-cell', 'x-grid3-td-checkcolumn', i === 0 ? 'x-grid3-cell-first' : i === cols.length - 1 ? 'x-grid3-cell-last' : '']
+          .filter(Boolean)
+          .join(' ')}
+        style={{ width: cellW, boxSizing: 'border-box' }}
+        tabIndex={0}
+      >
+        <div className="x-grid3-cell-inner" unselectable="on" style={{ textAlign: 'center' }}>
+              <div
+                className={`x-grid3-checkcol${checked ? ' x-grid3-checkcol-on' : ''}`}
+                role="checkbox"
+                aria-checked={checked}
+                aria-label={c.header}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleCheck(origIdx, c.dataIndex);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleCheck(origIdx, c.dataIndex);
+                  }
+                }}
+              >
+                {checked && (
+                  <svg className="x-grid3-checkcol-icon" width="11" height="11" viewBox="0 0 11 11" aria-hidden>
+                    <path
+                      d="M2 5.5L4.2 7.8L9 2.5"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.6"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                )}
+              </div>
+            </div>
+          </td>
+        );
+      }
+      const cellCls = [
+        'x-grid3-col',
+        'x-grid3-cell',
+        `x-grid3-td-${c.id}`,
+        i === 0 ? 'x-grid3-cell-first' : i === cols.length - 1 ? 'x-grid3-cell-last' : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+      const raw = row[c.dataIndex];
+      const value = c.renderer ? c.renderer(raw, row) : raw;
+      const display: React.ReactNode =
+        value === undefined || value === null || value === '' ? ' ' : (value as React.ReactNode);
+      return (
+        <td
+          key={c.id}
+          className={cellCls}
+          style={{ width: wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0), textAlign: c.align || 'left', boxSizing: 'border-box' }}
+          tabIndex={0}
+        >
+          <div
+            className={`x-grid3-cell-inner x-grid3-col-${c.id}`}
+            unselectable="on"
+            style={{ textAlign: c.align || 'left' }}
+          >
+            {display}
+          </div>
+        </td>
+      );
+    });
+    const isExpanded = expandedRows.has(origIdx);
+    return (
+      <React.Fragment key={ri}>
+        <div
+          key={ri}
+          data-row-index={origIdx}
+          className={`x-grid3-row${altCls}${selCls}${isExpanded ? ' x-grid3-row-expanded' : ' x-grid3-row-collapsed'}`}
+          style={{ width: paneRowW, cursor: enableRowReorder ? 'move' : undefined, display: editing && editing.origIdx === origIdx ? 'none' : undefined }}
+          tabIndex={0}
+          onMouseDown={(e) => startRowDrag(e, origIdx)}
+          onClick={() => {
+            onRowClick(ri);
+            // 行编辑器：clicksToEdit===1 时单击行进入编辑（对齐 Ext RowEditor 的 rowclick→startEditing）
+            if (rowEditor && (rowEditor.clicksToEdit ?? 2) === 1) startEdit(origIdx);
+          }}
+          onDoubleClick={() => {
+            // 行编辑器优先：clicksToEdit===2（默认）双击进入编辑，否则按展开器逻辑处理
+            if (rowEditor && (rowEditor.clicksToEdit ?? 2) === 2) {
+              startEdit(origIdx);
+            } else if (expander?.expandOnDblClick !== false) {
+              toggleExpand(origIdx);
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              // 行编辑器激活时回车进入编辑；否则按展开器逻辑处理
+              if (rowEditor) {
+                e.preventDefault();
+                startEdit(origIdx);
+              } else if (expander?.expandOnEnter !== false) {
+                e.preventDefault();
+                toggleExpand(origIdx);
+              }
+            }
+          }}
+        >
+          <table
+            className="x-grid3-row-table"
+            border={0}
+            cellSpacing={0}
+            cellPadding={0}
+            style={{ width: paneTableW }}
+          >
+            <colgroup>
+              {cols.map((c, i) => (
+                <col key={c.id} style={{ width: wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0) }} />
+              ))}
+            </colgroup>
+            <tbody>
+              <tr>
+                {cells}
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        {isExpanded && expander && (
+          <div
+            className="x-grid3-row-body"
+            style={{ width: paneRowW }}
+            data-row-body={origIdx}
+          >
+            <div className="x-grid3-row-body-inner">
+              {expander.getRowBody(row, ri)}
+            </div>
+          </div>
+        )}
+        {editing && editing.origIdx === origIdx ? renderEditor(origIdx, cols, wArr, sSlack, paneTableW) : null}
+      </React.Fragment>
+    );
+  };
+
+  // 主体内容（分组头 + 数据行 / 分组汇总）。锁定分栏时按 cols 子集渲染到对应面板；默认全列，行为不变。
+  // 注意：锁定 + 分组（groupField）组合不在保真范围内（Ext 官方亦无内置 Locking+Grouping 组合视图），
+  // 故锁定面板内的分组/汇总仅作用于解锁列子集，仅作降级渲染。
+  const renderBodyContent = (
+    cols: ColWithId[] = visibleCols,
+    wArr: number[] = widths,
+    sSlack: number = slack,
+    paneRowW: number = rowW,
+    paneTableW: number = tableW,
+  ) =>
+    groupField && groupHeader
+      ? groups.map((g) => (
+          <div
+            key={g.key}
+            className={'x-grid-group' + (collapsed.has(g.key) ? ' x-grid-group-collapsed' : '')}
+          >
+            <div
+              className="x-grid-group-hd"
+              style={{ width: paneRowW }}
+              onClick={() =>
+                setCollapsed((prev) => {
+                  const n = new Set(prev);
+                  if (n.has(g.key)) n.delete(g.key);
+                  else n.add(g.key);
+                  return n;
+                })
+              }
+            >
+              <div className="x-grid-group-title">{g.label}</div>
+            </div>
+            <div className="x-grid-group-body">
+              {g.rows.map((ri) => renderRow(ri, cols, wArr, sSlack, paneRowW, paneTableW))}
+              {hasSummary && (
+                <div className="x-grid3-summary-row" style={{ width: paneRowW }}>
+                  <table
+                    className="x-grid3-summary-table"
+                    border={0}
+                    cellSpacing={0}
+                    cellPadding={0}
+                    style={{ width: paneTableW, tableLayout: 'fixed' }}
+                  >
+                    <colgroup>
+                      {cols.map((c, i) => (
+                        <col
+                          key={c.id}
+                          style={{ width: wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0) }}
+                        />
+                      ))}
+                    </colgroup>
+                    <tbody>
+                      <tr>
+                        {cols.map((c, i) => {
+                          const sw = wArr[i] + (i === slackIndexOf(cols) ? sSlack : 0);
+                          const content = computeSummary(c, g.rows.map((ri) => displayData[ri]));
+                          return (
+                            <td
+                              key={c.id}
+                              className={`x-grid3-grid-summary x-grid3-td-${c.id}`}
+                              style={{ width: sw, boxSizing: 'border-box', overflow: 'hidden' }}
+                            >
+                              <div className="x-grid3-summary-cell" unselectable="on">
+                                {content ?? ''}
+                              </div>
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          </div>
+        ))
+      : displayData.map((_, ri) => renderRow(ri, cols, wArr, sSlack, paneRowW, paneTableW));
+
+  return (
+    <Panel
+      cls="x-grid-panel"
+      title={title}
+      width={width}
+      height={height}
+      bodyFlex={!!height}
+      style={style}
+    >
+      <div
+        ref={gridRef}
+        className={['x-grid3', className].filter(Boolean).join(' ')}
+        style={{
+          width: width ? '100%' : totalWidth,
+          height: height ? '100%' : undefined,
+          position: 'relative',
+          display: 'flex',
+          flexDirection: hasLock ? 'row' : 'column',
+        }}
+        unselectable="on"
+      >
+        {!hasLock && (
+        <div
+          className="x-grid3-viewport"
+          style={{ display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0 }}
+        >
+          <div
+            className="x-grid3-header"
+            style={{ flex: '0 0 auto', width: '100%', overflow: 'hidden' }}
+          >
+            <div
+              className="x-grid3-header-inner"
+              ref={innerHdRef}
+              style={{ width: headerInnerW, overflow: 'hidden' }}
+            >
+              <div className="x-grid3-header-offset" style={{ width: headerOffsetW }}>
+                <table
+                  border={0}
+                  cellSpacing={0}
+                  cellPadding={0}
+                  style={{ tableLayout: 'fixed', width: tableW }}
+                >
+                    <colgroup>
+                    {visibleCols.map((c, i) => (
+                      <col
+                        key={c.id}
+                        style={{
+                          width:
+                            widths[i] +
+                            (i === slackIndexOf(visibleCols) ? slack + (gutter > 0 ? gutter : 0) : 0),
+                        }}
+                      />
+                    ))}
+                  </colgroup>
+                  <thead>
+                    {renderGroupHeaderRows()}
+                    <tr className="x-grid3-hd-row" ref={hdRowRef}>
+                      {headerCells}
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+            </div>
+            <div className="x-clear" />
+          </div>
+          <div
+            className="x-grid3-scroller"
+            ref={scrollerRef}
+            style={{ flex: '1 1 auto', minHeight: 0, width: '100%' }}
+          >
+            <div className="x-grid3-body" style={{ width: rowW }}>
+              {renderBodyContent()}
+            </div>
+            <a href="#" className="x-grid3-focus" tabIndex={-1}>
+              &#160;
+            </a>
+          </div>
+        </div>
+        )}
+        {hasLock && (
+          <>
+            {/* 锁定面板（x-grid3-locked）：左侧固定，纵向随解锁面板同步滚动，自身不横向滚动 */}
+            <div
+              className="x-grid3-locked"
+              style={{
+                flex: `0 0 ${lockedPaneW}px`,
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'relative',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                className="x-grid3-header"
+                style={{ flex: '0 0 auto', width: lockedPaneW, overflow: 'hidden' }}
+              >
+                <div
+                  className="x-grid3-header-inner"
+                  style={{ width: lockedPaneW, overflow: 'hidden' }}
+                >
+                  <div className="x-grid3-header-offset" style={{ width: lockedPaneW }}>
+                    <table
+                      border={0}
+                      cellSpacing={0}
+                      cellPadding={0}
+                      style={{ tableLayout: 'fixed', width: lockedPaneW }}
+                    >
+                      <colgroup>
+                        {lockedCols.map((c, i) => (
+                          <col key={c.id} style={{ width: lockedWidths[i] }} />
+                        ))}
+                      </colgroup>
+                      <thead>
+                        <tr className="x-grid3-hd-row">{buildHeaderCells(lockedCols, lockedWidths, 0)}</tr>
+                      </thead>
+                    </table>
+                  </div>
+                </div>
+                <div className="x-clear" />
+              </div>
+              <div
+                className="x-grid3-scroller"
+                ref={lockedScrollerRef}
+                style={{ flex: '1 1 auto', minHeight: 0, width: '100%', overflow: 'hidden' }}
+              >
+                <div className="x-grid3-body" style={{ width: lockedPaneW }}>
+                  {renderBodyContent(lockedCols, lockedWidths, 0, lockedPaneW, lockedPaneW)}
+                </div>
+                <div className="x-grid3-scroll-spacer" />
+              </div>
+            </div>
+            {/* 解锁面板（x-grid3-viewport x-grid3-unlocked）：右侧可横向滚动，纵向滚动同步锁定面板 */}
+            <div
+              className="x-grid3-viewport x-grid3-unlocked"
+              style={{ position: 'relative', display: 'flex', flexDirection: 'column', flex: '1 1 0%', minWidth: 0, minHeight: 0, height: '100%' }}
+            >
+              <div
+                className="x-grid3-header"
+                style={{ flex: '0 0 auto', width: '100%', overflow: 'hidden' }}
+              >
+                <div
+                  className="x-grid3-header-inner"
+                  ref={innerHdRef}
+                  style={{ width: uHeaderInnerW, overflow: 'hidden' }}
+                >
+                  <div className="x-grid3-header-offset" style={{ width: uHeaderOffsetW }}>
+                    <table
+                      border={0}
+                      cellSpacing={0}
+                      cellPadding={0}
+                      style={{ tableLayout: 'fixed', width: unlockedPaneW }}
+                    >
+                      <colgroup>
+                        {unlockedCols.map((c, i) => (
+                          <col
+                            key={c.id}
+                            style={{
+                              width: unlockedWidths[i] + (i === unlockedCols.length - 1 ? unlockedSlack : 0),
+                            }}
+                          />
+                        ))}
+                      </colgroup>
+                      <thead>
+                        {renderGroupHeaderRows()}
+                        <tr className="x-grid3-hd-row" ref={hdRowRef}>
+                          {buildHeaderCells(unlockedCols, unlockedWidths, unlockedSlack)}
+                        </tr>
+                      </thead>
+                    </table>
+                  </div>
+                </div>
+                <div className="x-clear" />
+              </div>
+              <div
+                className="x-grid3-scroller"
+                ref={scrollerRef}
+                style={{ flex: '1 1 auto', minHeight: 0, width: '100%' }}
+                onScroll={(e) => {
+                  if (lockedScrollerRef.current) {
+                    lockedScrollerRef.current.scrollTop = (e.currentTarget as HTMLDivElement).scrollTop;
+                  }
+                }}
+              >
+                <div className="x-grid3-body" style={{ width: unlockedPaneW }}>
+                  {renderBodyContent(unlockedCols, unlockedWidths, unlockedSlack, unlockedPaneW, unlockedPaneW)}
+                </div>
+                <a href="#" className="x-grid3-focus" tabIndex={-1}>
+                  &#160;
+                </a>
+              </div>
+            </div>
+          </>
+        )}
+        <div className="x-grid3-resize-marker">&#160;</div>
+        <div
+          className="x-grid3-resize-proxy"
+          style={
+            proxy
+              ? { visibility: 'visible', left: proxy.left, height: proxy.height }
+              : undefined
+          }
+        >
+          &#160;
+        </div>
+        {proxyLeft !== null && (
+          <div
+            className="x-grid3-resize-proxy x-grid3-col-move-proxy"
+            style={{
+              visibility: 'visible',
+              left: proxyLeft,
+              height: gridRef.current?.offsetHeight ?? 0,
+            }}
+          >
+            &#160;
+          </div>
+        )}
+        {rowDropLine !== null && (
+          <div
+            className="x-grid3-row-drop-proxy"
+            style={{
+              position: 'absolute',
+              left: 0,
+              width: rowW,
+              height: 16,
+              top: rowDropLine - 7,
+              backgroundImage: `url("${resolveThemeImageUrl('tree/drop-between.gif')}")`,
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'left center',
+              zIndex: 20000,
+              pointerEvents: 'none',
+            }}
+          >
+            &#160;
+          </div>
+        )}
+        {rowGhost && (
+          <div
+            className="x-dd-drag-proxy x-dd-drag-ghost"
+            style={{
+              position: 'fixed',
+              left: rowGhost.x + 14,
+              top: rowGhost.y + 10,
+              zIndex: 20000,
+              pointerEvents: 'none',
+            }}
+          >
+            {rowGhost.text}
+          </div>
+        )}
+        {menuCol !== null && (() => {
+          const menuColDef = managedCols.find((c) => c.id === menuCol);
+          const menuFilterDef = menuColDef?.dataIndex ? filterDefs[menuColDef.dataIndex] : undefined;
+          const baseItems: MenuItem[] = managedCols
+            .filter(
+              (c) =>
+                c.dataIndex &&
+                !c.menuDisabled &&
+                c.id !== 'checker' &&
+                c.id !== 'radio' &&
+                !c.isNumberer,
+            )
+            .map((c) => ({
+              text: c.header,
+              checked: !hiddenCols.has(c.id),
+              handler: () => toggleColumn(c.id),
+            }));
+          const columnMenuItems: MenuItem[] = menuFilterDef
+            ? [
+                ...baseItems,
+                { separator: true },
+                {
+                  text: MENU_FILTER_TEXT,
+                  checked: !!filterState[menuFilterDef.dataIndex!]?.active,
+                  handler: () => toggleFilterActive(menuFilterDef.dataIndex!),
+                  menu: [
+                    {
+                      render: (
+                        <FilterWidget
+                          def={menuFilterDef}
+                          value={filterState[menuFilterDef.dataIndex!]?.value}
+                          onChange={(val) => updateFilterValue(menuFilterDef.dataIndex!, val)}
+                        />
+                      ),
+                    },
+                  ],
+                },
+              ]
+            : baseItems;
+          return (
+            <Menu
+              style={{ ...menuStyle, position: 'absolute', zIndex: 15000 }}
+              items={columnMenuItems}
+            />
+          );
+        })()}
+      </div>
+    </Panel>
+  );
+});
+
+export default Grid;