JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

CSS

.sequencing-window{
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    cursor: default;
}
.sequencing-window>div{
    max-width: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-height: 90%;
    overflow: auto;
    background-color: #fff;
    width: 100%;
    padding: 20px;
    font-family: helvetica;
    overflow-x: hidden;
}
.sequencing-window.sequence-name>div{
  max-width: 400px;
}
.sequencing-window>div>h1{
    margin: 0px;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: normal;
    background-color: #2a2a2a;
    padding: 10px;
    padding-left: 12px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    line-height: 26px;
}
.sequencing-window>div>h1>button.close-button {
    position: absolute;
    right: 5px;
    top: 5px;
    border: solid 1px #fff;
    background-color: transparent;
    color: #fff;
    padding: 7px;
    width: 31px;
    cursor: pointer;
}
.sequencing-window>div>ul.sequencinglist{
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-height: 250px;
}
.sequencing-window>div>ul.sequencinglist>li{
  
}
.sequencing-window>div>ul.sequencinglist>li>table{
  background-color: #fff;
}
.sequencing-window>div>ul.sequencinglist>li.dragging>table{
  background-color: #ccc;
}
.sequencing-window>div>ul.sequencinglist>li>table td{
  width: 120px;
  border: solid 1px #ccc;
  padding: 5px;
  font-family: helvetica;
  font-size: 12px;
}
.sequencing-window>div>ul.sequencinglist>li>table td.larger{
  width: 160px;
}
.sequencing-window>div>ul.sequencinglist>li>table td.small-center{
  width: 20px;
  text-align: center;
}
.sequencing-window>div>div.instructions{
  float: right;
  width: 250px;
  font-family: helvetica;
  font-size: 15px;
}
.sequencing-window>div>div.instructions>span.note{
  display:...

JavaScript

var data = {
    "documents": [
        {
            "0": "2",
            "1": "1",
            "2": "Sample Document",
            "3": "",
            "4": "3028",
            "5": "2023-03-20 11:43:09",
            "6": "2024-04-08 12:15:59",
            "7": "1",
            "8": "1",
            "9": "application/pdf",
            "10": "1",
            "11": "1",
            "12": "1",
            "13": "",
            "14": "1",
            "15": "1.0",
            "16": "2024-04-30",
            "17": "user",
            "18": "1,1659",
            "19": "0",
            "20": "1000008",
            "21": "001 - HTX - FED - 200",
            "22": "[{\"list_id\":\"3\",\"list_value\":\"5\"},{\"list_id\":\"2\",\"list_value\":\"4\"}]",
            "id": "2",
            "account_id": "1",
            "name": "Sample Document",
            "file": "",
            "file_size": "2.96 KB",
            "timestamp": "2023-03-20 11:43:09",
            "last_updated": "2024-04-08 12:15:59",
            "program": "1",
            "type": "1",
            "file_type": "application/pdf",
            "creator": "1",
            "modifier": "1",
            "status": "Active",
            "comments": "",
            "sensitivity": "1",
            "version": "1.0",
            "review_by": "0000-00-00",
            "notification_type": "user",
            "notification_ids": "1,1659",
            "facility_id": "0",
            "facility_code_id": "1000008",
            "document_control_number": "",
            "naming_conventions_component_configuration": "[{\"list_id\":\"3\",\"list_value\":\"5\"},{\"list_id\":\"2\",\"list_value\":\"4\"}]",
            "notification_users": "Michael Prosser, Johnny Richael",
            "recurrence": "every-3-months",
            "end_of_life": "0000-00-00",
            "program_name": "Program #1",
            "creator_name": "Michael Prosser",
            "modified": "Modified",
            "modifier_name": "Michael Prosser",
    ...