How to make select all checkbox always visible in office-ui-fabric-react DetailsList

Question

I am using the DetailsList component of office-ui-fabric-react to display my table. I am setting the prop

checkboxVisibility={CheckboxVisibility.always}

to make the checkboxes visible always. But this is not working for the select all checkbox which is in the header. Select All checkbox is visible only when I hover over it. I want the select all checkbox to be visible always. Any solution for this?

<DetailsList
    columns={this.columns}
    selectionMode={SelectionMode.single}
    ariaLabelForSelectAllCheckbox={'Select All'}
    items={this.items}
    checkboxVisibility={CheckboxVisibility.always}
    onRenderRow={this.renderRow}
    onRenderHeader={this.renderHeader}
/>

Answer 1

You also have to import the checkbox visibility:

import { CheckboxVisibility } from 'office-ui-fabric-react';

Answer 2

Can you share the code by creating example on codepen or stackblitz or any other online editor.

Remove the selectionMode={SelectionMode.single} prop and see the output. The all checkbox will be visible always including the one which is in header.