チェックボックス

組み込み拡張機能を使用

CheckboxCell

独自実装

customCell と customHeaderCell 設定オプションを通じてチェックボックス機能を実装します。このアプローチは非常に柔軟で、異なるビジネス要件を満たすことができます。

例

loading

コード実装

列設定にカスタム列を追加してチェックボックスを表示します：

{
    customHeaderCell: () => (
        <span>
            <input
                type="checkbox"
                style={{ verticalAlign: 'middle' }}
                checked={isCheckAll}
                ref={el => {
                    if (el) el.indeterminate = isCheckPartial;
                }}
                onChange={e => toggleAll(e.target.checked)}
            />
        </span>
    ),
    customCell: ({ row }) => (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <input type="checkbox" checked={!!row._isChecked} onChange={e => toggleRow(row.id, e.target.checked)} />
        </div>
    ),
}

input要素を垂直方向の中央配置のために親要素でラップします。

プロジェクトのReactコンポーネントライブラリ（Ant Design、Material UI、Chakra UIなど）から Checkbox コンポーネントに input を置き換えて、プロジェクト全体で一貫したスタイルを維持できます。