JSFiddle - React, Tailwind, and code Playground

HTML

<table><thead><th>ID</th><th>Key</th><th>Car</th><th>Edit</th></thead><tbody>
    <tr><td>17</td><td>201</td><td>Mazda</td><td>Open</td></tr>
    <tr><td>25</td><td>177</td><td>Fiat</td><td>Open</td></tr>
    <tr><td>12</td><td>201</td><td>Chev</td><td>Open</td></tr>
    <tr><td>31</td><td>100</td><td>Ford</td><td>Open</td></tr>
</tbody></table>
<div id="msg"></div>

CSS

table{border-collapse:collapse;margin:50px;}
td,th{border:1px solid #ccc;padding:5px 7px;}
th{background-color:#333;color:#fff;}
td{cursor:pointer;}
tr td:nth-child(4):hover{text-decoration:underline;}

JavaScript

/*
http://stackoverflow.com/questions/31654463/dialog-box-not-coming-properly
    - I am having difficulty getting the dialog to clear, but this is the basic idea. I will continue working on it, but at least here you can see contents being injected into the dialog.
*/
var dat='';
$('tr td:nth-child(4)').click(function(){
    var row = $(this).closest('tr');
    for (n=1; n<4; n++){
        dat += row.find('td:nth-child('+n+')').html() +' ';
    }
    $('#msg').html(dat).dialog('open');
});

$('#msg').dialog({
     autoOpen: false,
      show: {
        effect: "blind",
        duration: 300
      },
      hide: {
        effect: "explode",
        duration: 300
      },
    close: function(event, ui) {
        $('#msg').html('');
    }
 });