title: How to make the entire row of react material ui datagrid clickable
body: <p>I need my DataGRid row to be clickable, cause I need to enter details by clicking it,
  so how to achieve that?</p>
  <pre><code>
  const columns = [
    { field: 'id', headerName: 'ID', width: 20 },
    { field: 'startdate', headerName: 'Start Date', width: 150, type: 'date', editable: true },
    { field: 'enddate', headerName: 'End Date', width: 150, type: 'date', editable: true },
    { field: 'status', headerName: 'Status', width: 150, editable: true },
    { field: 'tenantId', headerName: 'TennatID', type: 'number', width: 110, editable: true },
  ];
  
  const DataTable = (props) =&gt; {
  
    const styles=useStyles();
  
    return (
      &lt;&gt;
        &lt;div className={styles.root} &gt;
          &lt;DataGrid
            rows={props.rows}
            columns={columns}
            pageSize={props.numberOfRows}
            rowsPerPageOptions={[props.numberOfRows]}
            checkboxSelection
            disableSelectionOnClick
          /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  </code></pre>