interface TablePaginationProps {
currentPage: number;
totalPages: number;
itemsPerPage: number;
totalItems: number;
onPageChange: (page: number) => void;
}
export const TablePagination = ({
currentPage,
totalPages,
itemsPerPage,
totalItems,
onPageChange,
}: TablePaginationProps) => {
return (
<div className="table-footer">
<div className="pagination-info">
Showing {(currentPage - 1) * itemsPerPage + 1} to{' '}
{Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems}{' '}
entries
</div>
<div className="pagination">
<button
className="btn btn-sm"
onClick={() => onPageChange(Math.max(currentPage - 1, 1))}
disabled={currentPage === 1}
>
Previous
</button>
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
<button
key={page}
className={`btn btn-sm ${currentPage === page ? 'active' : ''}`}
onClick={() => onPageChange(page)}
>
{page}
</button>
))}
<button
className="btn btn-sm"
onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}
disabled={currentPage === totalPages}
>
Next
</button>
</div>
</div>
);
};
