JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>
    <style>td.details-control {
        background: green;
        cursor: pointer;
    }

    tr.details td.details-control {
        background: blue;
    }</style>
<div class="main-content lfloat">
    <div class="container" style="width: 100%;">

        <label for="example-form-submit" class="col-md-2 control-label"></label>
        <div class="col-md-2">
            <button type="submit" id="example-form-submit" class="btn btn-primary">Refresh and try to expand</button>
        </div>

        <div>
            <table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>column1</th>
                    <th>column2</th>
                    <th>column3</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>

</html>

JavaScript

$(document).ready(
                function ()
                {
                    var dashboard_table_id = "#example";

                    function destroy_existing_data_table()
                    {
                        var existing_table = $(dashboard_table_id).dataTable();
                        if (existing_table != undefined)
                        {
                            existing_table.fnClearTable();
                            existing_table.fnDestroy();
                        }
                    }

                    function create_dashboard_table()
                    {
                        var data_table = $(dashboard_table_id).DataTable({
                            "data": [{
                                "dt_RowId": 10,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "One expanded row"
                            }, {
                                "dt_RowId": 2,
                                "column1": "delhivery",
                                "column2": "CRP12345",
                                "column3": "1122",
                                "column4": "Other expanded row"
                            }],
                            "columns": [
                                {"className": "select-checkbox", orderable: false, "data": null, "defaultContent": ""},
                                {"class": "details-control", "orderable": false, "data": null, "defaultContent": ""},
                                {"data": "column1"},
                                {"data": "column2"},
                                {"data": "column3"}
                            ],
                            "buttons": {},
                            "dom": 'lBfrtip',
                            "select": {
                                "style": 'multi',
                   ...