85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { Table } from '@tanstack/react-table';
|
|
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useRouter } from 'next/navigation';
|
|
import React from 'react';
|
|
|
|
interface DataTablePaginationProps {
|
|
table: Table<any>;
|
|
totalPage: number; // Total jumlah halaman
|
|
totalData: number; // Total jumlah data
|
|
visiblePageCount?: number; // Jumlah halaman yang ditampilkan (default 5)
|
|
}
|
|
|
|
const TablePagination = ({ table, totalPage, totalData, visiblePageCount = 5 }: DataTablePaginationProps) => {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
|
|
const [currentPageIndex, setCurrentPageIndex] = React.useState<number>(1);
|
|
|
|
React.useEffect(() => {
|
|
const pageFromUrl = searchParams?.get('page');
|
|
if (pageFromUrl) {
|
|
setCurrentPageIndex(Number(pageFromUrl));
|
|
}
|
|
}, [searchParams]);
|
|
|
|
// Hitung startPage dan endPage, disesuaikan untuk dimulai dari 1
|
|
const startPage = Math.max(1, currentPageIndex - Math.floor(visiblePageCount / 2));
|
|
const endPage = Math.min(totalPage, startPage + visiblePageCount - 1);
|
|
|
|
const handlePageChange = (pageIndex: number) => {
|
|
// Perbarui query parameter di URL
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
searchParams.set('page', (pageIndex).toString()); // Menyimpan halaman sebagai 1-based index
|
|
router.push(`${window.location.pathname}?${searchParams.toString()}`);
|
|
|
|
// Pindahkan halaman di tabel
|
|
table.setPageIndex(pageIndex);
|
|
setCurrentPageIndex(pageIndex + 1); // Update state untuk halaman saat ini
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center justify-end py-4 px-10">
|
|
<div className="flex-1 text-sm text-muted-foreground">
|
|
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
|
{totalData} row(s) selected.
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-none">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => handlePageChange(1)}
|
|
disabled={currentPageIndex === 1}
|
|
className='w-8 h-8'
|
|
>
|
|
<ChevronLeft className='w-4 h-4' />
|
|
</Button>
|
|
{Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index).map((pageIndex) => (
|
|
<Button
|
|
key={`page-${pageIndex}`}
|
|
onClick={() => handlePageChange(pageIndex)}
|
|
size="icon"
|
|
className="w-8 h-8"
|
|
variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
|
|
>
|
|
{pageIndex}
|
|
</Button>
|
|
))}
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={() => handlePageChange(totalPage)}
|
|
disabled={currentPageIndex === totalPage}
|
|
className='w-8 h-8'
|
|
>
|
|
<ChevronRight className='w-4 h-4' />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TablePagination;
|