JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/v/dt/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/datatables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/datatables.min.css">   
   <table id="example" class="table response-table table-fixed" width="100%"></table>

CSS

div.dataTables_length {
        padding-left: 2em;
        }
div.dataTables_length,
div.dataTables_filter {
        padding-top: 0.55em;
    }

JavaScript

$(document).ready(function() {
  var Usertable = $('#example').DataTable({
    data: this.responseDetails,
    searching: false,
    ordering: false,
    'createdRow': function(row, data, rowIndex) {
      // Per-cell function to do whatever needed with cells
      $.each($('td', row), function(colIndex) {
        // For example, adding data-* attributes to the cell
        $(this).attr('title', data[colIndex]);
      });
    },
    columnDefs: [{
      targets: 2,
      render: function(data, type, row) {
        return type === 'display' && data.length > 10 ?
          data.substr(0, 15) + '…' :
          data;
      }
    }],
    "lengthMenu": [3, 10, 50, 75, 100],
    "dom": '<"top"Bfpl<"clear">>rt<"bottom"fpl<"clear">>',
    buttons: [{
      text: 'Показать',
      extend: 'collection',
      buttons: ['columnsToggle']
    }],
    "language": {
      "search": "Поиск:",
      "lengthMenu": " _MENU_ ",
      "paginate": {
        "previous": "Предыдущая",
        "next": "Следующая"
      }
    },

    "data": [{
        "id": "1",
        "name": "Tiger Nixon Universities have been postponing classes here because of nationwide protests so I've been using this course to catch up on Java I'm supposed to be taking, and it has been a seamless experience so far. Teacher is clear and concise and has a nice way of explaining things. Didn't expect this high of a quality from a free course. Thank you!",
        "position": "System Architect",
        "salary": "$3,120",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
      },
      {
        "id": "2",
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "5300",
        "start_date": "2011/07/25",
        "office": "Edinburgh",
        "extn": "8422"
      },

    ],
    "columns": [{
        "className": 'dt-control',
        "orderable": false,
        "data": null,
        "defaultContent": ''
      },
      {
        "data": "id",
       ...