"use client" import { useId, useState } from "react" import { ChevronFirstIcon, ChevronLastIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react" import { Badge } from "@/components/ui/badge" import { IconButton } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Pagination, PaginationContent, PaginationItem } from "@/components/ui/pagination" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" // Mock Data type UserData = { name: string email: string role: string status: string } const data: UserData[] = [ { name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "Active" }, { name: "Bob Smith", email: "bob@example.com", role: "User", status: "Active" }, { name: "Charlie Brown", email: "charlie@example.com", role: "Editor", status: "Inactive" }, { name: "Diana Prince", email: "diana@example.com", role: "User", status: "Active" }, { name: "Ethan Hunt", email: "ethan@example.com", role: "Admin", status: "Active" }, { name: "Fiona Green", email: "fiona@example.com", role: "User", status: "Inactive" }, { name: "George Wilson", email: "george@example.com", role: "Editor", status: "Active" }, { name: "Hannah Lee", email: "hannah@example.com", role: "User", status: "Inactive" }, { name: "Ian Malcolm", email: "ian@example.com", role: "Admin", status: "Active" }, { name: "Julia Roberts", email: "julia@example.com", role: "User", status: "Active" }, { name: "Kevin Hart", email: "kevin@example.com", role: "Editor", status: "Active" }, { name: "Laura Palmer", email: "laura@example.com", role: "User", status: "Inactive" }, { name: "Michael Scott", email: "michael@example.com", role: "Admin", status: "Active" }, { name: "Nina Simone", email: "nina@example.com", role: "User", status: "Active" }, { name: "Oliver Twist", email: "oliver@example.com", role: "Editor", status: "Inactive" }, { name: "Patricia Moore", email: "patricia@example.com", role: "User", status: "Active" }, { name: "Quinn Harper", email: "quinn@example.com", role: "User", status: "Inactive" }, { name: "Rachel Green", email: "rachel@example.com", role: "Editor", status: "Active" }, { name: "Samuel Jackson", email: "samuel@example.com", role: "Admin", status: "Active" }, { name: "Tina Turner", email: "tina@example.com", role: "User", status: "Active" }, ] export default function Component() { const id = useId() const [rowsPerPage, setRowsPerPage] = useState(5) const [currentPage, setCurrentPage] = useState(0) const totalPages = Math.ceil(data.length / rowsPerPage) const startIndex = currentPage * rowsPerPage const endIndex = startIndex + rowsPerPage const displayedData = data.slice(startIndex, endIndex) const canPreviousPage = currentPage > 0 const canNextPage = currentPage < totalPages - 1 return (

Name Email Role Status {displayedData.length > 0 ? ( displayedData.map((user, index) => ( {user.name} {user.email} {user.role} {user.status} )) ) : ( No results. )}

{/* Rows per page and pagination */}

Rows per page

{/* Page number information */}

{startIndex + 1}-{Math.min(endIndex, data.length)} {" "} of {data.length}

{/* Pagination buttons */}

{/* First page button */} setCurrentPage(0)} disabled={!canPreviousPage} aria-label="Go to first page"> {/* Previous page button */} setCurrentPage(currentPage - 1)} disabled={!canPreviousPage} aria-label="Go to previous page"> {/* Next page button */} setCurrentPage(currentPage + 1)} disabled={!canNextPage} aria-label="Go to next page"> {/* Last page button */} setCurrentPage(totalPages - 1)} disabled={!canNextPage} aria-label="Go to last page">

) }