diff --git a/Areas/Dinas/Controllers/DataOfftakerController.cs b/Areas/Dinas/Controllers/DataOfftakerController.cs
index de9e7be..d3adb8b 100644
--- a/Areas/Dinas/Controllers/DataOfftakerController.cs
+++ b/Areas/Dinas/Controllers/DataOfftakerController.cs
@@ -3,11 +3,87 @@
 namespace BankSampahApp.Areas.Dinas.Controllers
 {
     [Area("Dinas")]
+    [Route("Dinas/[controller]/[action]")]
     public class DataOfftakerController : Controller
     {
         public IActionResult Index()
         {
             return View();
         }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new {
+                    nama = "Andi Prabowo",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Cipayung",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Siti Nurhaliza",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Matraman",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Budi Santoso",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Kramat Jati",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Nina Sari",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Pulogadung",
+                    status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Dewi Lestari",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Cakung",
+                    status= "<div class=\"badge badge-error badge-soft rounded-full\">Tidak Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Rudi Hartono",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    kecamatan = "Jatinegara",
+                    status= "<div class=\"badge badge-error badge-soft rounded-full\">Tidak Disetujui</div>",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
     }
 }
diff --git a/Areas/Dinas/Views/DataOfftaker/Index.cshtml b/Areas/Dinas/Views/DataOfftaker/Index.cshtml
index c3220d4..4633e75 100644
--- a/Areas/Dinas/Views/DataOfftaker/Index.cshtml
+++ b/Areas/Dinas/Views/DataOfftaker/Index.cshtml
@@ -47,138 +47,65 @@
 
 <div class="card bg-white">
     <div class="card-body p-2">
-        <partial name="~/Areas/Shared/Components/Table/_Control.cshtml" />
-        <div class="overflow-x-auto">
-            <table class="table-zebra table">
-                <!-- head -->
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th>Nama Offtaker</th>
-                        <th>Kabupaten</th>
-                        <th>Kecamatan</th>
-                        <th>Status</th>
-                        <th>Aksi</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>1</th>
-                        <td>Andi Prabowo</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Cipayung</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>2</th>
-                        <td>Siti Nurhaliza</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Matraman</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>3</th>
-                        <td>Budi Santoso</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Kramat Jati</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>4</th>
-                        <td>Nina Sari</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Pulogadung</td>
-                        <td>
-                            <div class="badge badge-success badge-soft rounded-full">
-                                Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>5</th>
-                        <td>Dewi Lestasi</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Cakung</td>
-                        <td>
-                            <div class="badge badge-error badge-soft rounded-full">
-                                Belum Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>6</th>
-                        <td>Rudi Hartono</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>Jatinegara</td>
-                        <td>
-                            <div class="badge badge-error badge-soft rounded-full">
-                                Belum Disetujui
-                            </div>
-                        </td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
+        <table class="table-zebra table" id="example">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Nama Offtaker</th>
+                    <th>Kabupaten</th>
+                    <th>Kecamatan</th>
+                    <th>Status</th>
+                    <th>Aksi</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script type="text/javascript">
+    var table;
+
+    $(document).ready(function () {
+        table = new DataTable('#example', {
+            ajax: '/Dinas/DataNasabah/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'nama' },
+                { data: 'kabupaten' },
+                { data: 'kecamatan' },
+                { data: 'status' },
+                { data: 'aksi' },
+            ]
+        });
+
+        table.on("click", ".delete", function (e) {
+            e.preventDefault();
+
+            let url = $(this).data("url");
+            swal.fire({
+                title: "Apakah anda yakin?",
+                text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonText: "Ya, Hapus",
+                cancelButtonText: "Batal",
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: "btn btn-error text-white",
+                    cancelButton: "btn btn-link no-underline text-gray-500",
+                },
+            });
+        });
+    });
+</script>
\ No newline at end of file