reactjsms-officeoffice-ui-fabric-reactfluent-ui

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

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}
/>
Solution

  • 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.