JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/ui-darkness/jquery-ui.css">
<table id="selectable"><tbody>
  <tr>
    <td >Item 1</td >
 <td >Item 1</td >
    </tr>  
  <tr>
    <td >Item 2</td ><td >Item 2</td >
    </tr>
    <tr>
    <td >Item 3</td ><td >Item 3</td >
    </tr>
    <tr>
    <td >Item 4</td ><td >Item 4</td >
    </tr>
    <tr>
    <td>Item 5</td ><td>Item 5</td >
    </tr>
    <tr>
    <td >Item 6</td ><td>Item 6</td >
    </tr>
    <tr>
    <td>Item 7</td >    <td>Item 7</td >
    </tr>
</tbody></table>

CSS

#feedback { font-size: 1.4em; }

tr.ui-selecting { 
    background: #FECA40 !important; 
}

tr.ui-selected { 
    background: #F39814 !important; color: white !important; 
}

#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

JavaScript

$("#selectable tbody").selectable({
    filter: 'tr',
   // distance:1,
    selecting: function(event, ui) {
        console.log('selecting');
        console.log(event);
    },
    selected: function() {
        console.log('selected');
    },
    unselected: function() {
        console.log('unselected');
    }
});

$(document).on('dblclick', 'tr',  function() {
    console.log("dblclick the row");
});