From 33f5ca2a578dfe01a0f28821f5ddacff9adbd776 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Tue, 30 Sep 2025 15:33:57 +0700
Subject: [PATCH] chore: update Table component

---
 src/components/Table.tsx | 81 +++++++++++++++++++++++++++++++++-------
 1 file changed, 68 insertions(+), 13 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 53665386..97f767aa 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import {
   flexRender,
   getCoreRowModel,
@@ -30,15 +30,18 @@ interface TableClassNames {
   paginationClassName?: string;
 }
 
-// Type for the Table component props
-interface TableProps<TData extends object> {
+export interface TableProps<TData extends object> {
   data: TData[];
   columns: ColumnDef<TData, any>[];
   pageSize?: number;
+  totalItems?: number;
+  page?: number;
+  onPageChange?: (page: number) => void;
   isLoading?: boolean;
   fuzzySearchValue?: string | null;
   onFuzzySearchValueChange?: (value: string) => void;
   className?: TableClassNames;
+  emptyContent?: ReactNode;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -54,13 +57,24 @@ const fuzzyFilter = (
   return itemRank.passed;
 };
 
+const emptyContentDefaultValue = (
+  <div className='w-full p-5 text-center'>
+    <span className='text-lg opacity-50'>
+      Tidak ada data yang dapat ditampilkan...
+    </span>
+  </div>
+);
+
 const Table = <TData extends object>({
   data = [],
   columns = [],
   pageSize = 10,
+  totalItems,
+  page,
+  onPageChange,
   isLoading = false,
-  fuzzySearchValue = null,
-  onFuzzySearchValueChange = () => {},
+  fuzzySearchValue,
+  onFuzzySearchValueChange,
   className = {
     containerClassName: '',
     tableWrapperClassName: '',
@@ -73,7 +87,13 @@ const Table = <TData extends object>({
     bodyColumnClassName: '',
     paginationClassName: '',
   },
+  emptyContent = emptyContentDefaultValue,
 }: TableProps<TData>) => {
+  const isServerSideTable =
+    totalItems !== undefined &&
+    page !== undefined &&
+    onPageChange !== undefined;
+
   const [pagination, setPagination] = useState({
     pageIndex: 0,
     pageSize: pageSize,
@@ -103,6 +123,32 @@ const Table = <TData extends object>({
 
   const table = useReactTable(tableOptions);
 
+  const prevPageClickHandler = () => {
+    table.previousPage();
+
+    if (isServerSideTable) {
+      onPageChange(page - 1);
+    }
+  };
+
+  const nextPageClickHandler = () => {
+    table.nextPage();
+
+    if (isServerSideTable) {
+      onPageChange(page + 1);
+    }
+  };
+
+  const pageChangeHandler = (pageNumber: number) => {
+    const currentPage = pageNumber - 1;
+
+    table.setPageIndex(pageNumber ? currentPage : 0);
+
+    if (isServerSideTable) {
+      onPageChange(pageNumber);
+    }
+  };
+
   return (
     <div className={className.containerClassName}>
       <div className={className.tableWrapperClassName}>
@@ -178,17 +224,26 @@ const Table = <TData extends object>({
         </table>
       </div>
 
-      {data.length > 0 && !isLoading && (
+      {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+        emptyContent}
+
+      {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
         <div className={cn('mt-5', className.paginationClassName)}>
           <Pagination
-            totalItems={table.getRowCount()}
-            itemsPerPage={table.getState().pagination.pageSize}
-            currentPage={table.getState().pagination.pageIndex + 1}
-            onPrevPage={() => table.previousPage()}
-            onNextPage={() => table.nextPage()}
-            onPageChange={(pageNumber) =>
-              table.setPageIndex(pageNumber ? pageNumber - 1 : 0)
+            totalItems={isServerSideTable ? totalItems : table.getRowCount()}
+            itemsPerPage={
+              isServerSideTable
+                ? undefined
+                : table.getState().pagination.pageSize
             }
+            currentPage={
+              isServerSideTable
+                ? page
+                : table.getState().pagination.pageIndex + 1
+            }
+            onPrevPage={prevPageClickHandler}
+            onNextPage={nextPageClickHandler}
+            onPageChange={pageChangeHandler}
           />
         </div>
       )}