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() {

$('#example').DataTable( { "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json" }, scrollY:        '50vh', scrollCollapse: true, paging:         false } );


   // 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+'\" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function ( ) {
            if ( that.search() !== this.value ) {


                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );