チェックボックス

組み込み拡張機能を使用

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 を置き換えて、プロジェクト全体で一貫したスタイルを維持できます。