DataTables

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<table id="example" class="display" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

CSS

.dropdown-max-width {
  max-width: 100px;
}

JavaScript

$(document).ready(function() {
  InitializeDatatable();
});

function InitializeDatatable() {
  let ajaxData = GetAjaxData();
  var table = $('#example').DataTable({
    data: ajaxData,
    columns: [{
        "data": "name"
      },
      {
        "data": null,
        render: function(data, type, row){
        	return GetCellHtml();
        }
      },
      {
        "data": "office"
      },
      {
        "data": "extn"
      },
      {
        "data": "start_date"
      },
      {
        "data": "salary"
      }
    ],
    deferRender: true,
    scrollX: true
  });
}

function GetCellHtml() {
	let html = GetDropdown() + GetAnchor();
  html = '<div class="text-nowrap">' + html;
  html += '</div>';
  return html;
}

/**
 * Generates a dropdown
 */
function GetDropdown() {
    var $select = $("<select></select>", {
        "class": "form-control form-control-sm d-inline dropdown-max-width",
        "value": 1
    });

    var $option = $("<option></option>", {
        "text": "None",
        "value": ""
    });
    $select.append($option);

    var $option = $("<option></option>", {
      "text": "one",
      "value": 1
    });
    $option.attr("selected", "selected");
    $select.append($option);

    return $select.prop("outerHTML");
}

/**
 * Generates an anchor.
 */
function GetAnchor() {
    var $poNumberAnchor = $("<a>Link</a>", {
        "class": "px-2",
        "href": "https://datatables.net/forums/discussion/70824/cell-with-dropdown-and-anchor-clips-neighboring-cell",
        "title": "Go to purchase order"
    });

    return $poNumberAnchor.prop("outerHTML");
}

function GetAjaxData() {
  let data = [{
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date":...