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