How to open modal on onclick of Detail List row in office ui fabric?

Question

I have requirement where I want to open modal on clicking a detail list row. We are using office ui fabric.

Answer 1

This is detail List

<DetailsList
              items={todos}
              columns={column}
              className={styles.detailList}
              compact={true}
              />

add the columns using state and open the dialog onRender

const [column, setColumn] = useState<IColumn[]>([
    { key: 'column1', name: 'Title', fieldName: 'Title', minWidth: 100, maxWidth: 200, isResizable: false },
    { key: 'column2', name: 'Description', fieldName: 'description', minWidth: 100, maxWidth: 200, isResizable: false },
    { key: 'column4', name: 'Edit', fieldName: 'edit', minWidth: 100, maxWidth: 100, isResizable: false,
        onRender: (item) => (
           <Link onClick={() => toggleHideDialog()}>Edit</Link>
        ),
      },
    { key: 'column5', name: 'Delete', fieldName: 'delete', minWidth: 100, maxWidth: 100, isResizable: false,
        onRender: (item) => (
           <Link onClick={() => { console.log('clicked', item); }}>Delete</Link>
        ),
      },
  ])