JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/dt-2.0.3/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.1/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/date-1.5.2/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.1/rg-1.5.0/rr-1.5.0/sc-2.4.1/sb-1.7.0/sp-2.3.0/sl-2.0.0/sr-1.4.0/datatables.min.js"></script>
<table class="table table-responsive-xxl" id="dataTableZakazky">
        <thead>
            <tr>
                <th>Id</th>
                <th>Číslo</th>
                <th>Status</th>
                <th>Založil</th>
                <th>Popis</th>
                <th>Zákazník</th>
                <th>Částka</th>
                <th>Měna</th>
                <th>Objednávka</th>
                <th>Typ</th>
                <th>Fak:</th>
                <th>Zap:</th>
                <th>Aktualizace</th>
                <th>StatusInt</th>
                <th >Datum</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>1644</td> <!-- 0 -->
                    <td style="background-color:#FF9900 !important;">IJS24008</td> <!-- 1 -->
                    <td style="background-color:#FF9900 !important;">Tvorba nab&#xED;dky</td> <!-- 2 -->
                    <td style="background-color:#FF9900 !important;">V&#xED;t Hrad</td> <!-- 3 -->
                    <td style="background-color:#FF9900 !important;" data-bs-toggle="tooltip" data-bs-placement="top" title="Žádné poznámky">Vrtacka 25A2</td> <!-- 4 -->
                    <td style="background-color:#FF9900 !important;">Festool</td> <!-- 5 -->
                    <td style="background-color:#FF9900 !important;">0</td><!-- 6 -->
                    <td style="background-color:#FF9900 !important;">N/A</td><!-- 7 -->
       ...

JavaScript

var data_table;


const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

var minDate;
var maxDate;
/*
(function () {
    var url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
    if (typeof DT_Debug != 'undefined') {
        if (DT_Debug.instance !== null) {
            DT_Debug.close();
        } else {
            new DT_Debug();
        }
    } else {
        var n = document.createElement('script');
        n.setAttribute('language', 'JavaScript');
        n.setAttribute('src', url + '?rand=' + new Date().getTime());
        document.body.appendChild(n);
    }
})();
*/
data_table = $('#dataTableZakazky').DataTable({
    columnDefs: [
        {
            target: 0,
            visible: false,
            searchable: false
        },
        {
            target: 9,
            visible: false,
            searchable: false
        },
        {
            target: 13,
            visible: false,
            searchable: false
        }
    ],
    "dom": 'frtip',
    "pageLength": 20,
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [4] },
        { "bSearchable": false, "aTargets": [0, 9, 10, 11, 12] }
    ],
    order: [[1, 'asc']],
    //"oLanguage": dataTableCzech,
    footerCallback: function (row, data, start, end, display) {
        let api = this.api();

        // Remove the formatting to get integer data for summation
        let intVal = function (i) {
            return i === 'N/A' ? 0 : typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
        };

        // Total over all pages
        total = api
            .column(6)
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);

        // Total over this page
        pageTotal = api
            .column(6, { page: 'current' })
            .data()
            .reduce((a, b) => intVal(a) + intVal(b), 0);

        // Update footer
        api.column(6).footer().innerHTML =
        ...