JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="table" class="display" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Значення</th>
                                <th>Дата та час</th>
                                <th>Error</th>
                                <th>Енергоблок</th>
                                <th>Характеристика</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>Значення</th>
                                <th>Дата та час</th>
                                <th>Error</th>
                                <th>Енергоблок</th>
                                <th>Характеристика</th>
                            </tr>
                        </tfoot>
                        <tbody>
                                <tr>
                                    <td>3</td>
                                    <td>14.09.2018 2:49:45</td>
                                    <td><input class="check-box" disabled="disabled" type="checkbox" /></td>
                                    <td>Енергоблок 1</td>
                                    <td>Потужність</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>14.09.2018 2:49:48</td>
                                    <td><input class="check-box" disabled="disabled" type="checkbox" /></td>
                                    <td>Енергоблок 1</td>
                                    <td>Потужність</td>
         ...

JavaScript

$(document).ready(function () {
    const table = $('#table').DataTable({
        initComplete: function () {
            this.api().columns([0, 1, 2, 3, 4]).every(function () {
                var column = this;
                var select = $('<select><option value="">None</option></select>')
                            .appendTo(
            this.footer()
        )
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        },
        dom: 'lfrtip<"clear">B'
    });
    const tableData = getTableData(table);
    createHighcharts(tableData);
    setTableEvents(table);
});