How to wrap checkbox in addition div and label and make it clickable?

[cdevent]

Hi, I need to customize checkbox and I can't normally wrap it,

I've added additional wrapping elements - then when I'm clicking on this it's not selecting a row, working only clicking on a row.

Here is' fragment:

            <td onClick={ this.handleClick } { ...attrs }>
              {
                selectionRenderer ? selectionRenderer({
                  mode: inputType,
                  checked: selected,
                  disabled,
                  rowIndex
                }) : (
                  <div className="checkbox">
                  <label className="label">
                  <input
                    type={ inputType }
                    checked={ selected }
                    disabled={ disabled }
                    className={ bootstrap4 ? 'selection-input-4' : '' }
                    onChange={ () => {} }
                  />
                  <span className="cr"><i className="cr-icon"></i></span>
                  </label>
                  </div>
                )
              }
            </td>

[AllenFang]

@cdevent this is an example.

I think you can render checkbox with any wrapper, it's not an issue. and just make sure all the props all pass down to checkbox element, for example:

selectionRenderer: ({ mode, ...rest }) => (
    <input type={ mode } { ...rest } />   // make sure rest are spread to input element
  )