title: Disable rows in an Office UI Fabric React DetailsList
body: <p>I am trying to conditionally disable mouse click events on certain rows in a OUIF DetailsList. But I can't seem to get it to work. I tried overriding onRenderRow and setting CheckboxVisibility to none but it was still clickable. Then I tried wrapping a div around it and setting that to disabled. However, div's in React don't seem to have disabled attribute. So can anybody help me out here?</p>
  
  <pre><code>&lt;DetailsList
      items={this.state.items}
      columns={this.getColumns()}
      selection={this.selection}                    
      selectionMode={SelectionMode.multiple}
      onRenderRow={this.renderRow.bind(this)}&gt;
  &lt;/DetailsList&gt;
  
  private renderRow(props: IDetailsRowProps, defaultRender: any){
      let state = this.state.items[props.itemIndex].workflowState;
      if(state === "disabledState"){
          //props.checkboxVisibility = CheckboxVisibility.hidden; &lt;- Not working
          // return &lt;div disabled={true}&gt;{defaultRender(props)}&lt;/div&gt; &lt;- Not working
          return defaultRender(props);
      }
      else{
          return defaultRender(props);
      }
  }
  </code></pre>
  
  <p>Solution:</p>
  
  <pre><code>this.selection = new Selection({ canSelectItem: this.canSelectItem.bind(this), onSelectionChanged: this.clickRow.bind(this) });
  
  &lt;DetailsList
      items={this.state.items}
      columns={this.getColumns()}
      selection={this.selection}                    
      selectionMode={SelectionMode.multiple}
      onRenderRow={this.renderRow.bind(this)}&gt;
  &lt;/DetailsList&gt;
  
  private canSelectItem(item: any): boolean {
      return item.state !== "disabledState";
  }
  </code></pre>