Use when developing or modifying the @handsontable/angular-wrapper package - Angular components with decorators, NgZone performance optimization, and ng-packagr build system
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
無料GitHub で公開
coordinate-systems
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
含まれるファイル（1）
- SKILL.md2.8 KB
SKILL.md（原文）
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Coordinate systems
| 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.
HidingMap vs TrimmingMap
- HidingMap (
HiddenColumns,HiddenRows): the index stays in visual space but is not rendered.getDataAtCell()still works with visual coordinates. - TrimmingMap (
TrimRows,Filters): the index is removed from visual space entirely.
IndexMapper API
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'
Which coordinate to use
| 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 |
Gotcha: Filters + ManualColumnMove
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 reference
| Plugin | Map type | Coordinate it manages |
|---|---|---|
HiddenColumns / HiddenRows | HidingMap | Visual to renderable |
TrimRows / Filters | TrimmingMap | Physical to visual |
ManualColumnMove / ColumnSorting | IndexesSequence | Physical to visual |
Source files
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.
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
同じリポジトリのスキル
概要と使いどころ
Use when testing a local or public URL on a real device via BrowserStack, opening a live browser session on Android, iOS, or desktop browsers, or when the user mentions BrowserStack, real device testing, mobile testing, cross-browser testing, touch testing, or wants to verify behavior on a specific phone, tablet, or browser version. Also trigger when the user says "test this on Android/iPhone/Safari/Chrome mobile", asks to open a live session, or mentions demo-mobile.html, even if they don't mention BrowserStack by name.
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when a source code change needs a changelog entry, or before committing and pushing any bug fix, feature, or behavior change to source code - detecting when entries are required, categorizing changes correctly (added/changed/fixed/deprecated/removed/security), writing user-facing titles, and creating the JSON entry in .changelogs/
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Query the pre-built code-review-graph knowledge graph (Tree-sitter, whole monorepo) instead of walking call chains with Grep+Read – 2-6x cheaper, and it catches dynamic dispatch that grep misses. Use for ANY task that spans multiple files, even when the user never mentions a graph or asks for it - fixing or tracing a bug ("fix this bug", "why does X happen", "trace this"), exploring unfamiliar code ("how does X work", "who calls X", "what imports Y", "where is X used or handled"), planning or doing a refactor ("rename X", "is it safe to change or remove X", "what would break", "blast radius", "find dead code"), or reviewing changes ("review this PR", "review this branch or diff"). When you are about to Grep for a symbol's callers, callees, or importers, use this skill.
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新
Use when adding or changing a demo the visual regression suite photographs - the Vite-based demo apps in examples/next/visual-tests/<framework>/demo/, the js Navigo router with one /<feature>-demo route per feature, the shared / grid that must stay identical across frameworks, and the sample-data patterns
日本語の概要は準備中です。原文の説明を表示しています。
handsontable/handsontable2.2万2026年10月12日 更新