refactor: improve type definitions in UiTable, handle potential undefined data in SubscribePlanPage

app/components/ui/table.tsx

@@ -1,14 +1,10 @@
-import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+import DT from 'datatables.net-dt'
-import DataTable, { type DataTableSlots } from 'datatables.net-react'
+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>`

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={{