How to replace the checkbox from the UI Fabric DetailsList component

Question

How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this:

onRenderCheckbox={(props) => (<Checkbox checked={props.checked} />)}

or

onRenderCheckbox={(props) => (<Checkbox {...props} />)}

I can see the square checkbox but I can't select it. What it the proper way to do this?

Thanks in advance...

score 7 · Accepted Answer · answered Jun 05 '19 at 05:18

7

When you render the Checkbox component, it handles the click itself (and thus it won't percolate up to the row so it can toggle selection accordingly), so you need to prevent it with the pointer-events: none style.

onRenderCheckbox(props) {
    return (
        <div style={{ pointerEvents: 'none' }}>
            <Checkbox checked={props.checked} />
        </div>
    );
}

Check it out here: https://codepen.io/anon/pen/zQXEPr

answered Jun 05 '19 at 05:18

mirage

708
3
8

Thanks a lot! It works! It makes, yet, I would have never found that out. – JFCOU Jun 05 '19 at 18:27
Man it would be so nice if details like this were actually documented! – Emperor Eto Aug 27 '21 at 18:43

How to replace the checkbox from the UI Fabric DetailsList component

1 Answers1