JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="header">
    <h4 class="title">Transactions GMAO</h4>
</div>
<br />

<div class="content table-responsive table-full-width" style="margin-left: 5px;margin-right: 5px;">
    <table class="table table-hover table-striped" style="width:100%" id="transactions">
        <thead>
            <tr>
                <!-- On créer notre en-tête du tableau, en mettant un fond gris foncé et texte blanc -->
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter sept"> Code article </th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter quinze"> Type</th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter sept"> Quantité </th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter dix"> Prix total transaction </th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter dix"> Pris de la centrale</th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter dix"> Utilisé pour la centrale</th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter sept"> N° BT </th>
                <th style="background-color : #808080; color: #FFFFFF;" class="textCenter dix"> N° Commande </th>
                <th...

JavaScript

$(document).ready(function() {

    var tableTransact = $('#transactions').DataTable({
        scrollX: true,
        scrollCollapse: true,


        initComplete: function() {
            $('div.dataTables_scrollHeadInner thead tr#filterTransaction [name="filter"]').each(function() {
                $(this).html('<input id="input' + $(this).index() + '" type="text" class="form-control" placeholder="' + $(this).text() + '" />');
                $(this).on('keyup change', function() {
                    var val;
                    val = $('#input' + $(this).index()).val();

                    tableTransact.column($(this).index()).search(val).draw();
                });
            });
        },
        orderCellsTop: true,
        fixedHeader: true,

        //-------------------------------------------------------//

        dom: 'Blfrtip',
        buttons: [{
                extend: 'excelHtml5',
                autoFilter: true
            },

            {
                extend: 'pdfHtml5',
                text: 'PDF',
                orientation: 'landscape',
                pageSize: 'LEGAL'
            }
        ],

        "order": [
            [8, "desc"]
        ],

        "columnDefs": [{
                targets: '_all',
                defaultContent: '-'
            },
            {
                "targets": [8],
                "render": function(data, type, row, meta) {
                    if (type == 'display' && data !== null && data !== '0000-00-00 00:00:00') {
                       return moment(data).format('DD-MM-YYYY HH:mm');

                    }
                }
            }
        ],




        "pageLength": 50

    });

});