Work with Handsontable row and column positions by distinguishing source data, displayed order, and rendered cells. It guides index conversion and helps investigate misplaced data when sorting, filtering, hiding, or moving rows and columns.
中文简介正在准备中。当前显示英语简介。
Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions
安装前可以查看交给 AI 代理的指令内容。
| System | What it represents | Key behavior |
|---|---|---|
| Physical | Position in the source data array (0 to N) | Never changes under filtering, sorting, trimming, hiding, or moving. |
| Visual | Position after Handsontable's processing | Changes when data is filtered, sorted, trimmed, or moved. Hidden columns/rows keep their visual indexes. |
| Renderable | Position in the DOM | Matters for Walkontable; almost absent from the public API. |
The public API mainly uses visual indexes, sometimes physical. Walkontable receives data already filtered, sorted, and trimmed and renders it 0 to N; it also uses "source index" and "render index" internally for virtualization.
HiddenColumns, HiddenRows): the index stays in visual space but is not rendered. getDataAtCell() still works with visual coordinates.TrimRows, Filters): the index is removed from visual space entirely.Access via hot.rowIndexMapper or hot.columnIndexMapper:
mapper.getPhysicalFromVisualIndex(visualIndex)
mapper.getVisualFromPhysicalIndex(physicalIndex)
mapper.getPhysicalFromRenderableIndex(renderableIndex)
mapper.getRenderableFromVisualIndex(visualIndex)
mapper.createAndRegisterIndexMap(name, type, initialValue)
// type: 'hiding' | 'trimming'
| You are doing | Use |
|---|---|
| Reading or writing source data | Physical |
User-facing positions, selection, getDataAtCol() | Visual |
| DOM nodes, cell elements, Walkontable APIs | Renderable |
| Persistent state (sorting order, filter conditions) | Physical |
The Filters plugin's conditionCollection and conditionUpdateObserver use physical indexes, while getDataAtCol() takes visual indexes. With manualColumnMove active the two orders diverge: convert with getVisualFromPhysicalIndex() / getPhysicalFromVisualIndex() before crossing the boundary.
| Plugin | Map type | Coordinate it manages |
|---|---|---|
HiddenColumns / HiddenRows | HidingMap | Visual to renderable |
TrimRows / Filters | TrimmingMap | Physical to visual |
ManualColumnMove / ColumnSorting | IndexesSequence | Physical to visual |
src/translations/: indexMapper.ts, maps/, mapCollections/. Subsystem reference (map types, translation methods, cache, observers, registration lifecycle): handsontable/.ai/INDEX-MAPPING.md; system context: handsontable/.ai/ARCHITECTURE.md.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Develop and modify the Handsontable Angular wrapper with guidance on component lifecycle, settings updates, and NgZone, which controls change detection. It also covers standalone examples, global configuration, and the build and test workflow.
中文简介正在准备中。当前显示英语简介。
Open local or public web pages in BrowserStack Live for checks on real mobile devices or desktop browsers. The skill prepares temporary access to a local server, launches the requested session, and shares its dashboard link.
中文简介正在准备中。当前显示英语简介。
Prepare user-facing changelog entries for source code changes. The skill determines whether an entry is needed, classifies the change, writes a clear title, and uses the project CLI to create a JSON file tied to the pull request.
中文简介正在准备中。当前显示英语简介。
Explore relationships between functions and files using a prebuilt code graph, a map of code dependencies. Trace bugs, inspect callers and execution paths, and assess the impact of refactoring or proposed changes.
中文简介正在准备中。当前显示英语简介。
Create Handsontable documentation examples for JavaScript, TypeScript, React, Angular, and Vue. The skill explains source files, generated JavaScript, required imports and license settings, embedding examples in guides, and checking that each framework version displays correctly.
中文简介正在准备中。当前显示英语简介。
Build Handsontable demo pages for visual regression tests, which compare screenshots for appearance changes. It guides feature routes, URL-driven display states, sample data, and decisions about testing the same feature across framework wrappers.
中文简介正在准备中。当前显示英语简介。