feat: implement pagination reset on filter change and maintain scroll position for status toggle actions

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;

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),
         });
     };

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),
         });
     };