JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-dt/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-bs/css/dataTables.bootstrap.css">
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/editor/css/editor.bootstrap.css">
<script src="https://webinsert.pl/bug_test/lib/jQuery/dist/jquery.min.js"></script>
<script src="https://webinsert.pl/bug_test/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net/js/jquery.dataTables.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/editor/js/dataTables.editor.js"></script>
<script src="https://webinsert.pl/bug_test/lib/editor/js/editor.bootstrap.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-keytable/js/dataTables.keyTable.js"></script>
<script src="https://webinsert.pl/bug_test/lib/datatables.net-autofill/js/dataTables.autoFill.min.js"></script>
<link rel="stylesheet" href="https://webinsert.pl/bug_test/lib/datatables.net-autofill-bs/css/autoFill.bootstrap.css">
<div class="container">
    <h1></h1>


    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
          
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Offices</th>

        </tr>
        </thead>
    </table>


</div>

CSS

div.DTE_Inline input {
        border: none;
        background-color: transparent;
        padding: 0 !important;
        font-size: 90%;
    }
 
    div.DTE_Inline input:focus {
        outline: none;
        background-color: transparent;
    }

JavaScript

var options =[
{
  label: 'Poland',
  value: 1,
},
{
  label: 'USA',
  value: 2,
},
]; 

var ajax_data = {
  "data": [
    {
      "DT_RowId": "1",
      "first_name": "Tiger",
      "last_name": "Nixon",
      "position": "System Architect",
      "office": 2
    },
    {
      "DT_RowId": "2",
      "first_name": "Cedric",
      "last_name": "Kelly",
      "position": "Senior Javascript Developer",
      "office": 1
    },
    {
      "DT_RowId": "3",
      "first_name": "Ashton",
      "last_name": "Cox",
      "position": "Junior Technical Author",
      "office": 3
    }
  ]
};


        var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
          ajax: {
                	type: "POST",
               		url: "/echo/json/",
                	data: {json: JSON.stringify(ajax_data)},
            	
                },
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office",
                type: "select",
                options: options,
            }, 
        ]
    } );
 
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
          ajax: {
                	type: "POST",
               		url: "/echo/json/",
                	data: {json: JSON.stringify(ajax_data)},
            	
                },
        columns: [
      
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },

        ],

       keys: {
          editOnFocus: true,
          editor:  editor
       },
        select: {
            style:    'os',
            selector:...