Horizontal Scrolling And Only Date is not working in my Data table in Asp .NET 6 Web App - datatables

Question

Here, I am using "datatables" for my asp.net 6 web app. everything is working except "Horizontal-Scrolling" & "Only Date Property" I know that I am doing some wrong here, so please help me to solve this issue. and Thanks in advance.
My related table js file, view, index and model are given below:
"btbPending.js" is given below:
Here, I use "scrollX" for the horizontal scroll bar. But it didn't show the scroll option rather than the data table taking its extra space and looks so ugly. So where I use the "scrollX" function ?
And also I use "render: $.fn.dataTable.render.moment('x','DD/MM/YYYY')" for showing the date only property but it shows "invalid Date" in my data table. Now, also I need to know how to show this "Date-Only" property in my Data table.
var dataTable;
$(document).ready(function () {
$('#tblData').DataTable({
"scrollX": true,
});
loadDataTable();
});
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Admin/BTBPending/GetAll"
},
"columns": [
{ "data": "supplierSelectList.supplier", "width": "15%" },
{ "data": "countrySelectList.country", "width": "15%" },
{ "data": "itemSelectList.item", "width": "15%" },
{ "data": "value", render: $.fn.dataTable.render.number(',', '.', 2, '$') , "width": "15%" },
{ "data": "piNo", "width": "15%" },
{ "data": "shipDate", render: $.fn.dataTable.render.moment('x','DD/MM/YYYY'), "width": "15%" },
{ "data": "buyerSelectList.buyer", "width": "10%" },
{ "data": "supplierSelectList.supplier", "width": "15%" },
{ "data": "countrySelectList.country", "width": "15%" },
{ "data": "itemSelectList.item", "width": "15%" },
{ "data": "value", render: $.fn.dataTable.render.number(',', '.', 2, '$'), "width": "15%" },
{ "data": "piNo", "width": "15%" },
{ "data": "shipDate", render: $.fn.dataTable.render.moment('x', 'DD/MM/YYYY'), "width": "15%" },
{ "data": "buyerSelectList.buyer", "width": "10%" },
]
});
}
"BTBPending" Index :
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" role="tabpanel">
<div class="mb-1">
<table id="tblData" class="table table-bordered table-hover table-sm align-middle m-0" style="width:100%">
<thead class="" style="text-align:center;background-color: #17A2B8">
<tr>
<th>Supplier</th>
<th>Country</th>
<th>Item</th>
<th>Value</th>
<th>PI</th>
<th>Ship Date</th>
<th>Buyer</th>
<th>Supplier</th>
<th>Country</th>
<th>Item</th>
<th>Value</th>
<th>PI</th>
<th>Ship Date</th>
<th>Buyer</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>