From 90946babeb0da5ddb7f21d3d15ffa320999b3086 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 29 Apr 2026 21:56:51 +0700
Subject: [PATCH] feat: implement pagination reset on filter change and
 maintain scroll position for status toggle actions

---
 resources/js/components/data-table.tsx              | 13 +++++++++++++
 .../master/category/hooks/use-category-index.ts     |  2 ++
 .../admin/master/product/hooks/use-product-index.ts |  6 ++++--
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index bd84aba..96d3de9 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -3,6 +3,7 @@ import type {
     ColumnFiltersState,
     SortingState,
     VisibilityState,
+    PaginationState,
 } from '@tanstack/react-table';
 import {
     flexRender,
@@ -104,6 +105,15 @@ export function DataTable<TData, TValue>({
     const [columnVisibility, setColumnVisibility] =
         React.useState<VisibilityState>({});
     const [globalFilter, setGlobalFilter] = React.useState('');
+    const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+
+    // Reset to page 1 when filters or search change
+    React.useEffect(() => {
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }, [globalFilter, columnFilters]);
 
     const finalColumns = React.useMemo(() => {
         const computedColumns = [...columns];
@@ -168,7 +178,10 @@ export function DataTable<TData, TValue>({
             columnVisibility,
             rowSelection,
             globalFilter,
+            pagination,
         },
+        onPaginationChange: setPagination,
+        autoResetPageIndex: false,
     });
 
     const selectedRows = table.getFilteredSelectedRowModel().rows;
diff --git a/resources/js/pages/admin/master/category/hooks/use-category-index.ts b/resources/js/pages/admin/master/category/hooks/use-category-index.ts
index 705f9a8..82e7002 100644
--- a/resources/js/pages/admin/master/category/hooks/use-category-index.ts
+++ b/resources/js/pages/admin/master/category/hooks/use-category-index.ts
@@ -57,6 +57,8 @@ export function useCategoryIndex() {
 
     const onToggleStatus = (id: number) => {
         router.patch(categoryRoutes.toggleStatus(id).url, {}, {
+            preserveState: true,
+            preserveScroll: true,
             onSuccess: (response: any) => toast.success(response.props.flash.success),
         });
     };
diff --git a/resources/js/pages/admin/master/product/hooks/use-product-index.ts b/resources/js/pages/admin/master/product/hooks/use-product-index.ts
index 0e242fb..7a8870a 100644
--- a/resources/js/pages/admin/master/product/hooks/use-product-index.ts
+++ b/resources/js/pages/admin/master/product/hooks/use-product-index.ts
@@ -1,8 +1,8 @@
+import productRoutes from '@/routes/product';
+import type { Product } from '@/types';
 import { router } from '@inertiajs/react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import productRoutes from '@/routes/product';
-import type { Product } from '@/types';
 
 export function useProductIndex() {
     const [selectedImage, setSelectedImage] = useState<string | null>(null);
@@ -46,6 +46,8 @@ export function useProductIndex() {
 
     const onToggleStatus = (id: number) => {
         router.patch(productRoutes.toggleStatus(id).url, {}, {
+            preserveState: true,
+            preserveScroll: true,
             onSuccess: (response: any) => toast.success(response.props.flash.success),
         });
     };