JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
    <!-- Filter controls !-->

    <table style="width: 80%; margin: 0 auto 2em auto;" border="0" cellpadding="3" cellspacing="0">
        <thead>
            <tr>
                <th>Target</th>
                <th>Search text</th>
                <th>Treat as regex</th>
                <th>Use smart search</th>
            </tr>
        </thead>
 
        <tbody>
            <tr id="filter_global">
                <td><strong>Global search</strong></td>
                <td align="center"><input class="global_filter" id="global_filter" type="text"></td>
                <td align="center"><input class="global_filter" id="global_regex" type="checkbox"></td>
                <td align="center"><input class="global_filter" id="global_smart" checked="checked" type="checkbox"></td>
            </tr>
                <tr id="filter_col1" data-column="1">
                <td>Column - Model</td>
                <td align="center"><input class="column_filter" id="col1_filter" type="text"></td>
                <td align="center"><input class="column_filter" id="col1_regex" type="checkbox"></td>
                <td align="center"><input class="column_filter" id="col1_smart" checked="checked" type="checkbox"></td>
            </tr>
            <tr id="filter_col2" data-column="2">
                <td>Column - Repayments</td>
                <td align="center"><input class="column_filter" id="col2_filter" type="text"></td>
                <td align="center"><input class="column_filter" id="col2_regex" type="checkbox"></td>
                <td align="center"><input class="column_filter" id="col2_smart" checked="checked" type="checkbox"></td>
            </tr>
            <tr id="filter_col3" data-column="3">
                <td>Column - Term</td>
                <td align="center"><input...

CSS

td.details-control {
    background: url('../Images/details_open.png') no-repeat center center;
    cursor: pointer;
}
    tr.shown td.details-control {
    background: url('../Images/details_close.png') no-repeat center center;
}

JavaScript

$(document).ready(function () {
        $('#auditable').DataTable({
            "ajax": "js/audi.json",
            "columns": [

                { "data": "Model" },
                { "data": "Repayments" },
                { "data": "Term" },
                { "data": "CapID" }

            ],
            "order": [[1, 'asc']]
        });



        /* Formatting function for row details - modify as you need */
        function format(d) {
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>' +
                    '<td>Specification 1:</td>' +
                    '<td>' + d.Spec1 + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Specification 2:</td>' +
                    '<td>' + d.Spec2 + '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>Extra info:</td>' +
                    '<td>And any further details here (images etc)...</td>' +
                '</tr>' +
            '</table>';
        }

            // Add event listener for opening and closing details
            $('#auditable tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row(tr);

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        });




        function filterGlobal() {
            $('#auditable').DataTable().search(
                $('#global_filter').val(),
                $('#global_regex').prop('checked'),
                $('#global_smart').prop('checked')
   ...