From ccf1611e9f0f3fc8602bccaad381a1b1077911dc Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 30 Jul 2026 10:45:35 +0700
Subject: [PATCH] feat: enhance pagination controls in DataTable with
 additional navigation buttons

---
 resources/js/components/data-table.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-table.tsx
index 98b5dbb..cf9ad11 100644
--- a/resources/js/components/data-table.tsx
+++ b/resources/js/components/data-table.tsx
@@ -26,7 +26,7 @@ import {
 } from '@tanstack/react-table';
 import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { GripVertical } from 'lucide-react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import * as React from 'react';
 
 import { Button } from '@/components/ui/button';
@@ -348,13 +348,21 @@ export function DataTable<TData, TValue>({
                     {table.getPageCount()}
                 </div>
                 <div className="flex items-center gap-2">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.setPageIndex(0)}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <ChevronsLeft className="h-4 w-4" />
+                    </Button>
                     <Button
                         variant="outline"
                         size="sm"
                         onClick={() => table.previousPage()}
                         disabled={!table.getCanPreviousPage()}
                     >
-                        <ChevronLeft className="mr-2 h-4 w-4" />
+                        <ChevronLeft className="h-4 w-4" />
                     </Button>
                     <Button
                         variant="outline"
@@ -362,7 +370,15 @@ export function DataTable<TData, TValue>({
                         onClick={() => table.nextPage()}
                         disabled={!table.getCanNextPage()}
                     >
-                        <ChevronRight className="mr-2 h-4 w-4" />
+                        <ChevronRight className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <ChevronsRight className="h-4 w-4" />
                     </Button>
                 </div>
             </div>