dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance pagination controls in DataTable with additional navigation buttons

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-30 10:45:35 +07:00
parent 79da7df73c
commit ccf1611e9f
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resources/js/components/data-table.tsx
View File

@ -26,7 +26,7 @@ import {
} from '@tanstack/react-table'; } from '@tanstack/react-table';
import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table'; import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
import { GripVertical } from 'lucide-react'; 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 * as React from 'react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@ -348,13 +348,21 @@ export function DataTable<TData, TValue>({
{table.getPageCount()} {table.getPageCount()}
</div> </div>
<div className="flex items-center gap-2"> <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 <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => table.previousPage()} onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()} disabled={!table.getCanPreviousPage()}
> >
<ChevronLeft className="mr-2 h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@ -362,7 +370,15 @@ export function DataTable<TData, TValue>({
onClick={() => table.nextPage()} onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()} 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> </Button>
</div> </div>
</div> </div>