JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
<div id="contact_overview_table_div" class="table-responsive">
  <table class="table table-striped table-bordered" id="contact_overview_table">
    <thead>
      <tr>
        <th class="text-center">ID</th>
        <th class="text-center">Art</th>
        <th class="text-center">Anrede</th>
        <th class="text-center">Titel</th>
        <th class="text-center">Vorname</th>
        <th class="text-center">Name</th>
        <th class="text-center">Firma</th>
        <th class="text-center">Straße</th>
        <th class="text-center">Ort</th>
        <th class="text-center">Mobil</th>
        <th class="text-center">Actions</th>
      </tr>
      <tr>
        <th class="text-center">ID</th>
        <th class="text-center">Art</th>
        <th class="text-center">Anrede</th>
        <th class="text-center">Titel</th>
        <th class="text-center">Vorname</th>
        <th class="text-center">Name</th>
        <th class="text-center">Firma</th>
        <th class="text-center">Straße</th>
        <th class="text-center">Ort</th>
        <th class="text-center">Mobil</th>
        <th class="text-center tfoot-hide-select">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
       ...

JavaScript

var table;
var groupColumn = 1;

$(document).ready(function() {

            table = $('#contact_overview_table').DataTable( {
                "displayStart": 0,
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/German.json"
                },
                "columnDefs": [
                    { "visible": false, "targets": groupColumn }
                ],
                "order": [[ groupColumn, 'asc' ]],
                "processing": true,
                "pageLength": 100,
                orderCellsTop: true,
                fixedHeader: true,
                "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;

                    api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                        if ( last !== group ) {
                            $(rows).eq( i ).before(
                                '<tr class="group"><td colspan="15" style="font-weight: bold;">'+group+'</td></tr>'
                            );

                            last = group;
                        }
                    } );
                },
                initComplete: function () {
                    this.api().columns().every( function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $('#contact_overview_table thead tr:eq(1) th').empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
       ...