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
Review the instructions the agent will receive before you install.
| 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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.