0

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}
/>
LJP
  • 1,811
  • 4
  • 23
  • 34

2 Answers2

1

You also have to import the checkbox visibility:

import { CheckboxVisibility } from 'office-ui-fabric-react';
Toby Speight
  • 27,591
  • 48
  • 66
  • 103
Mahavishnu M
  • 11
  • 1
0

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.

Sumit Kharche
  • 61
  • 5