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
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
| 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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.