Table

1import {
2    Table,
3    TableBody,
4    TableCaption,
5    TableCell,
6    TableFooter,
7    TableHead,
8    TableHeader,
9    TableRow,
10} from '@/components/ui/table'
11
12const employees = [
13    {
14        id: 'EMP001',
15        name: 'Amit Sharma',
16        role: 'Frontend Developer',
17        salary: '$80,000',
18    },
19    {
20        id: 'EMP002',
21        name: 'Priya Desai',
22        role: 'UI/UX Designer',
23        salary: '$72,000',
24    },
25    {
26        id: 'EMP003',
27        name: 'Rahul Verma',
28        role: 'Backend Developer',
29        salary: '$90,000',
30    },
31    {
32        id: 'EMP004',
33        name: 'Neha Patel',
34        role: 'Project Manager',
35        salary: '$110,000',
36    },
37    {
38        id: 'EMP005',
39        name: 'Karan Mehta',
40        role: 'QA Engineer',
41        salary: '$68,000',
42    },
43]
44
45export function TableDemo() {
46    return (
47        <Table>
48            <TableCaption>A summary of your company’s employees.</TableCaption>
49            <TableHeader>
50                <TableRow>
51                    <TableHead className="w-[120px]">Employee ID</TableHead>
52                    <TableHead>Name</TableHead>
53                    <TableHead>Role</TableHead>
54                    <TableHead className="text-right">Salary</TableHead>
55                </TableRow>
56            </TableHeader>
57            <TableBody>
58                {employees.map((emp) => (
59                    <TableRow key={emp.id}>
60                        <TableCell className="font-medium">{emp.id}</TableCell>
61                        <TableCell>{emp.name}</TableCell>
62                        <TableCell>{emp.role}</TableCell>
63                        <TableCell className="text-right">
64                            {emp.salary}
65                        </TableCell>
66                    </TableRow>
67                ))}
68            </TableBody>
69            <TableFooter>
70                <TableRow>
71                    <TableCell colSpan={3}>Total Employees</TableCell>
72                    <TableCell className="text-right">
73                        {employees.length}
74                    </TableCell>
75                </TableRow>
76            </TableFooter>
77        </Table>
78    )
79}
80

1'use client'
2
3import * as React from 'react'
4
5import {
6    Pagination,
7    PaginationContent,
8    PaginationItem,
9    PaginationLink,
10    PaginationNext,
11    PaginationPrevious,
12} from '@/components/ui/pagination'
13import {
14    Table,
15    TableBody,
16    TableCaption,
17    TableCell,
18    TableFooter,
19    TableHead,
20    TableHeader,
21    TableRow,
22} from '@/components/ui/table'
23
24const products = [
25    { id: 'PRD001', name: 'Wireless Mouse', stock: 120 },
26    { id: 'PRD002', name: 'Mechanical Keyboard', stock: 60 },
27    { id: 'PRD003', name: 'Noise Cancelling Headphones', stock: 35 },
28    { id: 'PRD004', name: 'LED Monitor 24"', stock: 18 },
29    { id: 'PRD005', name: 'USB-C Hub', stock: 200 },
30    { id: 'PRD006', name: 'Portable SSD 1TB', stock: 40 },
31    { id: 'PRD007', name: 'Webcam HD', stock: 75 },
32    { id: 'PRD008', name: 'Bluetooth Speaker', stock: 95 },
33    { id: 'PRD009', name: 'Gaming Chair', stock: 22 },
34    { id: 'PRD010', name: 'Smartwatch Pro', stock: 50 },
35    { id: 'PRD011', name: 'Laptop Stand', stock: 130 },
36    { id: 'PRD012', name: 'Graphic Tablet', stock: 15 },
37    { id: 'PRD013', name: 'Wireless Charger', stock: 180 },
38]
39
40export function TableWithPaginationDemo() {
41    const [page, setPage] = React.useState(1)
42    const pageSize = 5
43    const totalPages = Math.ceil(products.length / pageSize)
44
45    const paginatedProducts = products.slice(
46        (page - 1) * pageSize,
47        page * pageSize,
48    )
49
50    function goToPage(p: number) {
51        if (p >= 1 && p <= totalPages) setPage(p)
52    }
53
54    return (
55        <div className="space-y-4">
56            <Table>
57                <TableHeader>
58                    <TableRow>
59                        <TableHead className="w-[120px]">Product ID</TableHead>
60                        <TableHead>Product Name</TableHead>
61                        <TableHead className="text-right">Stock</TableHead>
62                    </TableRow>
63                </TableHeader>
64
65                <TableBody>
66                    {paginatedProducts.map((prod) => (
67                        <TableRow key={prod.id}>
68                            <TableCell className="font-medium">
69                                {prod.id}
70                            </TableCell>
71                            <TableCell>{prod.name}</TableCell>
72                            <TableCell className="text-right">
73                                {prod.stock}
74                            </TableCell>
75                        </TableRow>
76                    ))}
77                </TableBody>
78
79                <TableFooter>
80                    <TableRow>
81                        <TableCell colSpan={2}>Total Products</TableCell>
82                        <TableCell className="text-right">
83                            {products.length}
84                        </TableCell>
85                    </TableRow>
86                </TableFooter>
87            </Table>
88
89            <Pagination className="justify-end">
90                <PaginationContent>
91                    <PaginationItem>
92                        <PaginationPrevious
93                            onClick={() => goToPage(page - 1)}
94                            aria-disabled={page === 1}
95                        />
96                    </PaginationItem>
97
98                    {Array.from({ length: totalPages }, (_, i) => i + 1).map(
99                        (p) => (
100                            <PaginationItem key={p}>
101                                <PaginationLink
102                                    href="#"
103                                    isActive={p === page}
104                                    onClick={() => goToPage(p)}
105                                >
106                                    {p}
107                                </PaginationLink>
108                            </PaginationItem>
109                        ),
110                    )}
111
112                    <PaginationItem>
113                        <PaginationNext
114                            onClick={() => goToPage(page + 1)}
115                            aria-disabled={page === totalPages}
116                        />
117                    </PaginationItem>
118                </PaginationContent>
119            </Pagination>
120        </div>
121    )
122}
123