diff --git a/resources/views/operasi/komuditi/index.blade.php b/resources/views/operasi/komuditi/index.blade.php
index 6037265..29c5814 100644
--- a/resources/views/operasi/komuditi/index.blade.php
+++ b/resources/views/operasi/komuditi/index.blade.php
@@ -75,11 +75,28 @@
             <div class="card">
                 <div class="card-header">{{ __('Rekod Pembelian/Penjualan Komoditi') }}</div>
                 <div class="card-body text-center">
-                    <div class="row">
-                        <div class="col-md-12 text-right mb-3">
+                    <div class="row justify-content-between mb-4">
+                        <div class="col text-left">
+                            <div class="form-group d-flex align-items-center">
+                                <label for="limit-komoditi" style="width: 600px" class="mb-0">Had Paparan Rekod Komoditi</label>
+                                <select onchange="loadKomoditiRecord()" name="limit_view" id="limit_view" class="form-control">
+                                  <option selected value="20">20</option>
+                                  <option value="100">100</option>
+                                  <option value="500">500</option>
+                                  <option value="1000">1000</option>
+                                  <option disabled>Untuk rekod keseluruhan, sila print</option>
+                                </select>
+                              </div>
+                        </div>
+                        <div class="col text-right">
                             <a href="{{ route('laporan.komoditi') }}" target="_blank" class="btn btn-primary" title="Cetak Rekod Jual/Beli Komoditi"><i class="fa fa-print" aria-hidden="true"></i></a>
                         </div>
+                    </div>
+                    <div class="row">
                         <div class="col-md-12">
+                            <div class="spinner-border" role="status" id="loading-spinner">
+                                <span class="sr-only">Loading...</span>
+                              </div>
                             <table id="rekod_komuditi" class="table table-striped table-hover">
                                 <thead class="thead-dark">
                                     <tr>
@@ -222,7 +239,10 @@
 <script>
     let api_url = "{{ $api_url }}";
 
-    var tablerekod = $('#rekod_komuditi').DataTable();
+    var tablerekod = $('#rekod_komuditi').DataTable( {
+        "pageLength": 1000,
+        "bLengthChange": false,
+    });
 
     $(document).ready( function () {
         checkKomuditi();
@@ -341,10 +361,21 @@
                 })
             }
         });
+        loadKomoditiRecord();
+    }
+
+    function loadKomoditiRecord()
+    {
+        var selectedLimitView = $('#limit_view').find(":selected").val();
+
+        $('#loading-spinner').show();
         tablerekod.clear().draw();
         $.ajax({
             method:'get',
             url: api_url + '/api/komuditi/rekodkomuditi',
+            data: {
+                'limit_view': selectedLimitView,
+            },
             success:function(rekod){
                 var bilcount = 0;
                 $.each(rekod,function(index,rekod_transaksi){
@@ -358,7 +389,8 @@
                         rekod_transaksi['transaction_by'],
                         rekod_transaksi['transaction_type']
                     ]).draw();
-                })
+                });
+                $('#loading-spinner').hide();
             }
         })
     }