JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.8, shrink-to-fit=no">
    <title>Dashboard - Siemens</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap5.min.css">
    <!-- TEST -->


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alef&amp;display=swap">
    <link rel="stylesheet" href="static/fonts/fontawesome-all.min.css">

    <link rel="stylesheet" href="static/css/slider.css">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/login.css">
    <link rel="stylesheet" href="static/css/loading_bars.css">
    <link rel="icon" href="static/img/favicon.siemens.ico">
  </head>

  <body id="page-top">
    <div class="card-body">
      <div>
        <input type="hidden" id="row_data" value="">
      </div>
      <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
        <table id="md_table" class="table table-striped table-hover">
          <thead>
            <tr id="titlerow">
              <th>Column0</th>
              <th>Column1-this-is-a-very-long-header</th>
              <th>Column2</th>
              <th>Column3</th>
             ...

JavaScript

$(document).ready(function() {

  tableHead = $("table thead");
  tableHead.append('<tr id="filterrow"></tr>')
  $('#md_table thead tr#titlerow th').each(function() {
		var title = $('#md_table thead tr#titlerow th').eq($(this).index()).text();

    $('#md_table thead tr#filterrow').append(
      `<th>
      <div class="input-group mb-3">
				<span class="input-group-text"><i class="bi bi-search"></i></span>
				<input id="input' + $(this).index() + '" type="text" class="form-control" placeholder="..."/>
			</div></th>`
    )
	});
});
var dataSet = [
    ["data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data"],
    ["data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data"],
    ["data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data"],
    ["data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data","data"],
]

$(document).ready(function() {
	
  var selected = [];
  var table = $('#md_table').DataTable({
    searching: true,
    select: true,
    processing: true,
    buttons: [
      "pageLength",
      {
        extend: 'colvis',
        collectionLayout: 'dropdown columns',
        postfixButtons: [{
          extend: 'colvisRestore',
          text: 'Reset'
        }, ]
      },
    ],
    columnDefs: [{
        targets: [0, 3, 4],
        width: "100px"
      },
      {
        target: 2,
        width: "30px"
      },
      {
        target: 5,
        width: "135px"
      },
      {
        target: 11,
        width: "100px"
      },
      {
        target: 16,
        width: "100px"
      },
      {
        target: 2,
        visible: false,
      },
      {
        targets: [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
        className: 'dt-body-right'
      }
    ],
    bSortCellsTop: true,
    dom: 'Bfrtip',
   ...