JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">


<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>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <th>Customer</th>
        <th></th>
        <th>Porf</th>
        <th>Max</th>
        <th>Müller</th>
        <th></th>
        <th></th>
        <th>Berlin</th>
        <th>+21 431 8912</th>
        <th class="text-center">Actions</th>
      </tr>
 
      <tr>
        <th>2</th>
        <th>Customer</th>
        <th></th>
        <th></th>
        <th>Tim</th>
        <th>See</th>
        <th></th>
        <th></th>
        <th>Stockholm</th>
        <th>+44 123 5763</th>
        <th class="text-center">Actions</th>
      </tr>
 
      <tr>
        <th>1</th>
        <th>Supplier</th>
        <th></th>
        <th>Dr</th>
        <th>Philipp</th>
        <th></th>
        <th></th>
        <th></th>
        <th>New York</th>
        <th>+49 241...

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": 25,
    "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([2,3,4,5,6,7,8,9,10]).every(function() {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
 
            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });
 
        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
      
        var columnDropdown = this.api().column(0);
        var columnDara = this.api().column(0);
        
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );
 
            column
              .search(val ? '^' + val + '$' :...