JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div class="wrapper">
    <table class="data">
        <tbody></tbody>
    </table>
</div>

CSS

html {
    box-sizing: border-box;
}
*, *:after, *:before {
    box-sizing: inherit;
}
.wrapper {
    position: relative;
    height: 200px;
    max-height: 200px;
    min-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.data {
    width: 100%;
    border-collapse: collapse;
}
.data, .data td, .data th {
    border: 1px solid #ddd;
}
.cell {
    position: relative;
    width: 12.5%;
    height: 22px;
}
.dragme {
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    width: 50%;
    height: 22px;
    border: 1px solid red;
    background-color: #ee8;
    z-index: 1;
}

JavaScript

(function() {
    var cells = $('<td class="cell"></td>');
    while (cells.length < 8) {
        cells = cells.add(cells.clone());
    }
    var rows = $();
    while (rows.length < 50) {
        rows = rows.add($("<tr>").append(cells.clone()));
    }
    $(".data tbody").append(rows);
    $("<div>").addClass("dragme")
        .appendTo(
            rows.eq(1).find(".cell:first")
        )
        .draggable({
            containment: ".data",
            snap: ".cell"
        });
})();