JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<div id='siteId_overtimeForm' title='Overtime Request' class='tab_content' style='display:block'>
    <table id='test' width='100%'>
        <thead>
            <tr class="ms-vh">
                <th nowrap=""></th>
                <th nowrap="">Name</th>
                <th nowrap="">Supporting Unit</th>
                <th nowrap="">Request Date</th>
                <th nowrap="">Approval Status</th>
                <th nowrap="">ID</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <table class="hci_details_table_footer addListItems" title="Overtime Requests">
        <tr>
            <td>
                <input type="button" value="New Overtime Request" title="Overtime Request" id="test_newFormButton" />
            </td>
        </tr>
    </table>
</div>

JavaScript

var contextOvertime = {
    'tableId': 'test',
    'siteId': 'siteId',
    'siteUrl': 'siteUrl',
    'siteTitle': 'siteTitle',
    'elementId': 'test',
    'itemList': 'Overtime Requests',
    'listQuery': "/_api/web/lists/getbytitle('Overtime Requests')/items?$select=Id,Title,FileLeafRef,FileDirRef,Created,UniqueId,Supporting_x0020_Unit,OData__ModerationStatus",
    'formId': 'hci-modal-content',
    'isLibrary': true
};

overtimeFormController(contextOvertime);

function overtimeFormController(context) {
    var columns = [
    /* Icon */
    {
        "mData": "FileLeafRef",
        "render": function (data, type, full) {
            return '<img width="16" height="16" title="' + data + '" alt="' + data + '" src="/_layouts/15/images/ic' + data.substring(data.lastIndexOf('.') + 1, data.length) + '.png" border="0"/>';
        }
    },
    /* Name */
    {
        "mData": "FileLeafRef",
        "render": function (data, type, full) {
            return createInternalFileLink(context.siteUrl, full);
        }
    },
    /* Supporting Unit*/
    {
        "mData": "Supporting_x0020_Unit"
    },
    /* Request Date */
    {
        "mData": "Created",
        "render": function (data, type, full) {
            return formatSharePointDate(data);
        }
    },
    /* Approval*/
    {
        "mData": "OData__ModerationStatus"
    },
    /* ItemId */
    {
        "mData": "Id",
        "bSearchable": false,
        "bVisible": false
    }];
    var sort = [
        [3, "desc"],
        [5, "desc"]
    ];
    formTableDataTable(context, columns, sort); //render form table as data table
    // would normally query for data here... showing returned null json array
    
     context.item = [];
    
    /* COMMENT OUT JSON TEST DATA
    context.item = [{
        "FileLeafRef": "test.doc",
        "Supporting_x0020_Unit": "Unit 1",
        "Created": "",
        "OData__ModerationStatus": "Pending",
        "Id": "1"
    }];
    */
    
    var oTable = $('#' +...