Disable rows in an Office UI Fabric React DetailsList

Question

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?

<DetailsList
    items={this.state.items}
    columns={this.getColumns()}
    selection={this.selection}                    
    selectionMode={SelectionMode.multiple}
    onRenderRow={this.renderRow.bind(this)}>
</DetailsList>

private renderRow(props: IDetailsRowProps, defaultRender: any){
    let state = this.state.items[props.itemIndex].workflowState;
    if(state === "disabledState"){
        //props.checkboxVisibility = CheckboxVisibility.hidden; <- Not working
        // return <div disabled={true}>{defaultRender(props)}</div> <- Not working
        return defaultRender(props);
    }
    else{
        return defaultRender(props);
    }
}

Solution:

this.selection = new Selection({ canSelectItem: this.canSelectItem.bind(this), onSelectionChanged: this.clickRow.bind(this) });

<DetailsList
    items={this.state.items}
    columns={this.getColumns()}
    selection={this.selection}                    
    selectionMode={SelectionMode.multiple}
    onRenderRow={this.renderRow.bind(this)}>
</DetailsList>

private canSelectItem(item: any): boolean {
    return item.state !== "disabledState";
}

Icebound

Answer 1

Ok once again I can answer my own question. The Selection object does have a canSelectItem function to check if the user should be able to select certain items. This function should return a bool value and it takes the currently selected item from the array so you can check values easily. I edited my code above with the solution.

Icebound

Answer 2

I would bind a function to onClick then preventDefault or stopPropagation ? Also edit the CSS to remove the cursor effect to make it looks like a normal HTML tag.

Something like:

if(state === "disabledState"){  
  let onClickFunc = this.preventClick.bind(this);
} else {
  let onClickFunc = this.normalClick.bind(this);
}

return <div onClick={onClickFunc}>{defaultRender(props)}</div>

Limerick

Already tried overriding the onClick event. However, this wouldn't stop the row from being selected. Removing the cursor event DID work, but I still could select the row using the select all checkbox. I think I need to work with the Selection object that is bound to the details list. – Icebound