Skip to content

EditableCell 編集可能セル^1.0.0 Beta

EditableCell は組み込みの編集可能セルコンポーネントです。セルをダブルクリックして編集モードに入り、キーボードで保存またはキャンセルできます。

基本的な使い方

createEditableCell ファクトリ関数で EditableCell コンポーネントを作成し、customCell として使用します。

loading

設定オプション

createEditableCell は設定オブジェクトを受け取ります:

ts
interface CreateEditableCellOptions {
    /** 編集をトリガーするイベント、デフォルト 'dblclick' */
    trigger?: 'dblclick' | 'click';
    /** 値変更コールバック */
    onChange?: (newValue: any, row: Record<string, any>, dataIndex: string) => void;
}
プロパティデフォルト説明
trigger'dblclick' | 'click''dblclick'編集をトリガーするイベントタイプ
onChange(newValue, row, dataIndex) => void-編集完了後のコールバック関数

キーボード操作

編集モードで以下のキーボード操作がサポートされています:

キー動作
Enter保存して編集モードを終了
Escape編集をキャンセルし、元の値に戻す
Tab保存して編集モードを終了
方向キー入力フィールド内でカーソルを移動(セルナビゲーションはトリガーされません)

MITライセンスの下で公開されています