JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css' rel='stylesheet' />
  <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet' />
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.bundle.min.js'></script>
  <link href='https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css' rel='stylesheet' />
  <link href='https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-html5-2.0.1/datatables.min.css' rel='stylesheet' type='text/css' />
  <script src='https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-html5-2.0.1/datatables.min.js' type='text/javascript'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js'></script>


</head>

<div>
  <span>No. of Decimals</span>
  <select id="ddlDate">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="1">2</option>
  </select>
</div>
<br />
<br />
<table id="table1" class="table table-bordered">
  <thead>
    <tr>
      <th>Countries</th>
      <th>Exports</th>
      <th>% Change</th>
      <th>Last Update</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

JavaScript

const Country = [{
  "Countries": "United States",
  "Converted_value": 513700.36,
  "PerChange": 21.8,
  "Period": "Dec'21"
}, {
  "Countries": "United Arab Emirates",
  "Converted_value": 195670.45,
  "PerChange": 24.8,
  "Period": "Dec'21"
}];

var tbl1 = "#table1";
var nDecimals = 0;

var colNames = [{
  data: "Countries"
}, {
  data: "Converted_value",
  render: function (data, type, row) {
    return $.fn.dataTable.render.number(',', '.', nDecimals).display(data)
  },
  //$.fn.dataTable.render.number(',', '.', nDecimals),`
  className: "text-center text-nowrap"
}, {
  data: "PerChange",
  render: function(data, type, row) {

    if (!data) {
      return "-";
    }
    if (data < 0) {
      return '<span style="color: red;">' + data + '%' + '</span>';
    }
    if (data > 0) {
      return '<span style="color: green;">' + '+' + data + '%' + '</span>';
    }
    return '<span style="color: #62dd62;">' + data + '%' + '</span>';
  },
  className: "text-center"
}, {
  data: "Period",
  className: "text-center"
}];


function createTable(id, dataframe, colNames, placeholder, caption) {

  $(id).DataTable({
    data: dataframe,
    destroy: true,
    paging: true,
    pageLength: 10,
    searching: true,
    order: [],
    autoWidth: true,
    columns: colNames,
    language: {
      searchPlaceholder: placeholder
    },
    columnDefs: [{
        "width": "20%",
        "targets": 0
      },
      {
        defaultContent: "-",
        targets: "_all"
      }
    ]
  });


}

createTable(tbl1, Country, colNames, "Search Country", 'Country');

$('#ddlDate').on('change', function() {

  nDecimals = parseInt($(this).children('option:selected').val());
  $(tbl1).DataTable().rows().invalidate().draw();
});