本文へ移動
cccskills
無料GitHub で公開

handsontable-validator-dev

Use when creating or modifying a Handsontable cell validator - async callback-based validation functions that determine if cell values are valid

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Handsontable Validator Development

Signature

function myValidator(value, callback) {
  // `this` is bound to the cell's cellProperties object
  if (this.allowEmpty && (value === null || value === undefined || value === '')) {
    return callback(true);
  }
  callback(isValid(value)); // true = valid, false = invalid
}

Rules

  • Call the callback on every path; a missed call hangs the validation pipeline and silently blocks editing.
  • this is cellProperties: use this.allowEmpty, this.instance, other cell meta. Use a function body, not an arrow function (arrows break the this binding).
  • Validators only determine validity; data, DOM, and cell state stay untouched.
  • The callback may run after async work; the editor stays in WAITING state until it resolves.

Files

src/validators/{validatorName}/
  {validatorName}.ts    # Validator function
  index.ts              # Re-exports

Registry: src/validators/registry.ts.

import { registerValidator } from '../../validators/registry';
registerValidator('myValidator', myValidator);

Triggers

  • The editor system during finishEditing().
  • validateCells(), validateRows(), validateColumns().
  • Invalid cells get the htInvalid class from the renderer pipeline, not the validator.

Reference implementations

  • src/validators/numericValidator/numericValidator.ts - allowEmpty support.
  • src/validators/dateValidator/dateValidator.ts
  • src/validators/autocompleteValidator/autocompleteValidator.ts - list of allowed values.

Correcting cell values inside a validator

When a validator writes a corrected value with setDataAtCell, pass a source string ending in 'Validator':

this.instance.setDataAtCell(row, col, correctedValue, 'myCustomValidator');

validateChanges() in core.js uses the suffix to track the correction. Without it, the correction is lost when the batch includes columns with async source callbacks (e.g. async autocomplete with strict: true) that resolve later.

Common mistakes

  • Reading a meta flag that an editor forces in prepare(). DropdownEditor.prepare() writes strict = true onto the one cell it prepares, only while selected. A validator reading this.strict sees the column's own strict: false on every cell never clicked (paste, setDataAtCell(), validateCells(), any updateSettings() that rebuilds cell meta), which made a strict: false dropdown strict only in clicked cells (DEV-2911). For fixed cell-type behavior, pass it to the shared logic explicitly: dropdownValidator calls validateAgainstSource(this, value, callback, true). Test by writing to a cell that was never selected; selecting it first hides the bug.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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日 更新

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 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

日本語の概要は準備中です。原文の説明を表示しています。

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日 更新

handsontable のスキルをすべて見る

このスキルの問題を報告する