JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/ju/jq-3.7.0/dt-2.2.2/datatables.min.css">
<script src="https://raw.githubusercontent.com/vedmack/yadcf/refs/heads/master/2.0/jquery.dataTables.yadcf-2.0.js"></script>
<script src="https://cdn.datatables.net/v/ju/jq-3.7.0/dt-2.2.2/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<table class="table table-hover table-sm display" width="100%" cellspacing="0" id="example">
     <thead>
       <tr>
         <th class="all align-top">ID</th>
         <th class="all align-top">Activity Type</th>
       </tr>
     </thead>
     <tbody>
       
     </tbody>
</table>

JavaScript

$(document).ready(function () {
var json_data = {
"data":[{"id":104,"activity_type":"Option 1"}, {"id":102,"activity_type":"option 2"}],
"recordsTotal":23286,"recordsFiltered":23286,
"draw":1,
"options":{"activity_type":[{"label":"Option 1","value":1},
                            {"label":"Option 2","value":2}]}};       
console.log(json_data)
var oTable = $('#example').DataTable({
    serverSide: true,
    ajax: {url: "/echo/json/",
    			type: "POST",
          data:{ json : JSON.stringify(json_data) }
          },
           "columns": [
            { "data": "id" },
            { "data": "activity_type" }
        ]
});

yadcf.init(oTable,
      [
        {
          column_number : 0,
          filter_type: "range_date",
        },
        {
          column_number : 1,
          filter_type: "select",
          select_type: "select2",
        },
       ]);
       });