JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/af-2.1.2/b-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.css">
<script src="https://cdn.datatables.net/v/bs-3.3.6/jq-2.2.3/dt-1.10.12/af-2.1.2/b-1.2.2/b-print-1.2.2/cr-1.3.2/fc-3.2.2/fh-3.1.2/kt-2.1.3/r-2.1.0/rr-1.1.2/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
<div class="container-fluid">
 <table id="example" class="display" cellspacing="0" width="100%">
<thead>
            <tr>
                <th>Energieart</th>
                <th>todo</th>
                <th>barcode</th>
                <th>monteurdatum</th>
                <th>name</th>
                <th>strasse</th>
            </tr>
        </thead>
<tfoot>
 <tr>
                <th>Energieart</th>
                <th>todo</th>
                <th>barcode</th>
                <th>monteurdatum</th>
                <th>name</th>
                <th>strasse</th>
            </tr>
            </tfood>
<tbody>

<tr>            <td>abc</td>
                <td>123</td>
                <td>32424</td>
                <td>2018-08-08</td>
                <td>Jason Moon</td>
                <td>avenue 35th</td></tr>
                
                <tr>            <td>dsd</td>
                <td>355</td>
                <td>3535</td>
                <td>2018-08-09</td>
                <td>Manul Jack</td>
                <td>avenue 38th</td></tr>

JavaScript

$(document).ready(function() {

    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );



    $('#example').DataTable( {
    scrollY:        '50vh',
    scrollCollapse: 'true',
    paging:         'false'
   initComplete: function () {
      

     this.api().columns().every( function () {
                var that = this;
                  
 $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );

            } );
        }
    } );
} );