JSFiddle - React, Tailwind, and code Playground

by INR_R

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>

<div id="Wrapper1">
    <table id="Table1" class="table table-striped table-bordered display compact hover stripe dataTable no-footer" style="width:100%!important">
        <thead>
            <tr class="bir-selection-color1 text-center">
                <th>Expand</th>
                <th>Id</th>
                <th>Group</th>
            </tr>
        </thead>
    </table>

    <div id="Wrapper2" style="display:none;">
        <table id="Table2" class="table table-striped table-bordered display compact hover stripe dataTable no-footer" style="padding-left: 15px!important">
            <thead>
                <tr class="bir-selection-color1 text-center">
                    <th>Id</th>
                    <th>HeaderId</th>
                    <th>ProductId</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

JavaScript

var dataSet1 = [{ "HeaderId": "1", "Group": "Group 1" }
                        ];

    var dataSet2 = [{ "LineNumber": "1", "HeaderId": "1", "ProductId": "1011" },
                    { "LineNumber": "2", "HeaderId": "1", "ProductId": "1012" }
                    ];


//dataTables default values
var dataTablesdefaultPageLength = 100;
var dataTablesPageLengthDisplay = [50, 100, 250, 500];

var dataTablesserverSide = false;
var dataTablesautoWidth = true;
var dataTablesresponsive = true;
var dataTablesprocessing = true;        // for show progress bar 
var dataTablesfilter = true;            // this is for disable filter (search box)
var dataTablesorderMulti = false;       // for disable multiple column at once  

var dataTablesscrollX = false;

    $(document).ready(function () {

        // Get the Detail Table as Template for Every Row
        detailsTableHtml = $("#Table2").html();

        var table1 = $("#Table1").DataTable({
            async: true,
                serverSide: false, // for process server side
                deferRender: true, // deferred rendering
                scrollX: dataTablesscrollX,
                deferLoading: 0, //Disable Initial Load
                processing: dataTablesprocessing, // for show progress bar
                filter: dataTablesfilter,
                orderMulti: true,
                autoWidth: dataTablesautoWidth,
                responsive: dataTablesresponsive,
                pageLength: dataTablesdefaultPageLength,
                lengthMenu: [dataTablesPageLengthDisplay, dataTablesPageLengthDisplay],
                data: dataSet1,
                order: [[1, 'asc']],
                columnDefs: [],
                columns: [
                {
                    data: null, name: "Group", title: "", className: 'details-control', orderable: false, width: 20,
                    render: function (data, type, row, meta) {
                        return '<img id="detail-content"...