From 5b83c3f8dd8139c24ae4b6c288ab80ac08b43063 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Sun, 9 Mar 2025 19:12:23 +0700
Subject: [PATCH] refactor: improve type definitions in UiTable, handle
 potential undefined data in SubscribePlanPage

---
 app/components/ui/table.tsx                  | 10 +++-------
 app/pages/dashboard-plan-subscribe/index.tsx |  5 +++--
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index 3fb8d2f..99afcb2 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -1,14 +1,10 @@
-import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import DT from 'datatables.net-dt'
+import DataTable, { type DataTableProps } from 'datatables.net-react'
 import React from 'react'
 
 type UiTableProperties = {
-  data: any[] // eslint-disable-line @typescript-eslint/no-explicit-any
-  columns: ConfigColumns[]
-  slots?: DataTableSlots
-  options?: Config
   title: string
-}
+} & DataTableProps
 
 const renderPaginationIcon = (icon: string) => {
   return `<div class="pagination-icon">${icon}</div>`
diff --git a/app/pages/dashboard-plan-subscribe/index.tsx b/app/pages/dashboard-plan-subscribe/index.tsx
index 512e87e..8a9d5a0 100644
--- a/app/pages/dashboard-plan-subscribe/index.tsx
+++ b/app/pages/dashboard-plan-subscribe/index.tsx
@@ -13,7 +13,8 @@ export const SubscribePlanPage = () => {
   )
 
   DataTable.use(DT)
-  const dataTable = loaderData?.subscriptionsData
+
+  const { subscriptionsData: dataTable } = loaderData || {}
 
   const dataColumns = [
     {
@@ -69,7 +70,7 @@ export const SubscribePlanPage = () => {
       </div>
 
       <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         slots={dataSlot}
         options={{