How can I make an entire row clickable in a DetailsList component? (office-ui-fabric)

Question

I've been using the DetailsList component but haven't found a way to make an entire row clickable - is there a sample code snippet or pointers on how this can be achieved?

https://developer.microsoft.com/en-us/fabric#/components/detailslist

Answer 1

Here is th e single click solution, Use onActiveItemChanged prop like:

const _onActiveItemChanged = (item): void => {
    alert(`Item invoked: ${JSON.stringify(item)}`);
  };

here is the DetailList

<DetailsList
      items={assessmentList}
      compact={false}
      columns={columns}
      onActiveItemChanged={_onActiveItemChanged } 
/>

Answer 2

Overriding onRenderRow worked for me.

const _columns: IColumn[] = [
  {
    key: 'name',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  },
  {
    key: 'value',
    name: 'Value',
    fieldName: 'value',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
  }
];

const _items = Array.apply(null, Array(10)).map((_: any, num: number) => ({
  key: num.toString(),
  name: `Item ${num.toString()}`,
  value: num.toString()
}));

class Content extends React.Component {
  private _renderRow(props: Fabric.IDetailsRowProps, defaultRender: any): JSX.Element {
     return (
      <Fabric.DetailsRow {...props} onClick={() => alert('click')}/>
     );
   }

  public render() {
    return (
      <Fabric.Fabric>
          <Fabric.DetailsList
            items={ _items } 
            columns={ _columns.concat(..._columns, ..._columns, ..._columns) }
            onRenderRow={this._renderRow}
          />        
      </Fabric.Fabric>
    );
  }
}

ReactDOM.render( 
  <Content />,
  document.getElementById('content')
);