Skip to content

CheckboxCell チェックボックス Beta

CheckboxCell は、セルレベルで全選択/半選択機能をサポートする組み込みのチェックボックスセルコンポーネントです。

基本的な使い方

createCheckboxCell ファクトリ関数を使用して CheckboxCellCheckboxAllCell コンポーネントを作成し、それぞれ customCellcustomHeaderCell として使用します。

loading

サードパーティコンポーネントの使用

checkboxComponent にUIライブラリの Checkbox コンポーネントを渡して、プロジェクト全体のスタイルを統一することができます。

loading

createCheckboxCell オプション

createCheckboxCell ファクトリ関数は設定オブジェクトを受け取ります:

ts
interface createCheckboxCellOptions<T = any> {
    /** 行データ内の選択状態を表すフィールド名、デフォルト '_isChecked' */
    field?: string;
    /** カスタムチェックボックスコンポーネント(Ant Design / Material UI の Checkbox など) */
    checkboxComponent?: any;
    /** セルチェックボックス状態変更コールバック */
    onChange?: (checked: boolean, row: T) => void;
    /** 全選択チェックボックス状態変更コールバック */
    onSelectAll?: (checked: boolean) => void;
}
プロパティデフォルト説明
fieldstring'_isChecked'行データ内の選択状態を表すフィールド名
checkboxComponentComponent-カスタムチェックボックスコンポーネント、未指定時はネイティブ input[type=checkbox] を使用
onChange(checked, row) => void-セルチェックボックス状態変更時のコールバック
onSelectAll(checked) => void-全選択チェックボックス状態変更時のコールバック

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