From 79b291cf74b95121d32becd534289ff952661039 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Thu, 23 Jul 2026 15:58:08 +0700
Subject: [PATCH] refactor: improve code readability by formatting and
 restructuring useRef and useCallback hooks in EnterpriseDataTable component

---
 .../components/data-table/index.tsx           | 57 ++++++++++++-------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
index e9e869e..cb12d5e 100644
--- a/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
+++ b/packages/ui/src/foundations/enterprise-module/components/data-table/index.tsx
@@ -193,7 +193,8 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
   // ---------------------------------------------------------------------------
   const { t } = useEnterpriseModuleTranslationContext();
   const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
-  const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } = useEnterpriseModuleSelectionContext<E>();
+  const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } =
+    useEnterpriseModuleSelectionContext<E>();
   const navigation = useEnterpriseModuleNavigationContext();
 
   const { config } = useEnterpriseModuleConfigContext();
@@ -214,12 +215,14 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
   // Search & Filter State
   // ---------------------------------------------------------------------------
   const searchRef = useRef<string>((filterData?.[searchKey] as string) || '');
-  const filterRef = useRef<Record<string, any>>((() => {
-    if (!filterData) return {};
-    const copy = { ...filterData };
-    delete copy[searchKey];
-    return copy;
-  })());
+  const filterRef = useRef<Record<string, any>>(
+    (() => {
+      if (!filterData) return {};
+      const copy = { ...filterData };
+      delete copy[searchKey];
+      return copy;
+    })(),
+  );
 
   const [searchValue, setSearchValue] = useState(searchRef.current);
 
@@ -227,12 +230,15 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
     setSearchValue(e.currentTarget.value);
   }, []);
 
-  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      searchRef.current = searchValue;
-      gridApiRef.current?.refreshServerSide({ purge: true });
-    }
-  }, [searchValue]);
+  const handleSearchKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        searchRef.current = searchValue;
+        gridApiRef.current?.refreshServerSide({ purge: true });
+      }
+    },
+    [searchValue],
+  );
 
   const handleSearchClear = useCallback(() => {
     setSearchValue('');
@@ -248,7 +254,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
     const filterKeys = filterConfig?.defaultValues
       ? Object.keys(filterConfig.defaultValues)
       : Object.keys(filterData).filter(
-          (key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key)
+          (key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key),
         );
 
     return filterKeys.filter((key) => {
@@ -680,7 +686,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
         try {
           const request = params.request;
 
-          const limit = perPage
+          const limit = perPage;
           const page = Math.floor((request.startRow ?? 0) / limit) + 1;
 
           // Extract sorting information from the request
@@ -689,12 +695,12 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
           const orderType = sortModel?.sort?.toUpperCase();
 
           // Prepare the request parameters for the API call
-          const requestParams: Record<string, any> = { 
-            page, 
-            limit, 
-            order_by: orderBy, 
+          const requestParams: Record<string, any> = {
+            page,
+            limit,
+            order_by: orderBy,
             order_type: orderType,
-            ...filterRef.current
+            ...filterRef.current,
           };
 
           if (searchRef.current) {
@@ -737,9 +743,17 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
       if (params.api) {
         // Attach the server-side datasource to the grid API
         params.api.setGridOption('serverSideDatasource', datasource);
+
+        // Synchronously jump to the restored page immediately after attaching the datasource.
+        // This ensures the grid doesn't reset our page back to 1.
+        // NOTE: This relies on `serverSideInitialRowCount` being provided so the grid knows
+        // there are enough pages to jump to!
+        if (isPaginated && metaData?.page && metaData.page > 1) {
+          params.api.paginationGoToPage(metaData.page - 1);
+        }
       }
     },
-    [datasource, setSelectedRows],
+    [datasource, setSelectedRows, isPaginated, metaData],
   );
 
   // Triggered whenever the row selection in the grid changes
@@ -851,6 +865,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
           pagination={isPaginated}
           paginationPageSize={isPaginated ? perPage : undefined}
           paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
+          serverSideInitialRowCount={metaData?.total ?? undefined}
           columnDefs={finalColumnDefs}
           defaultColDef={defaultColDef}
           animateRows={true}