A component for displaying structured data in rows and columns.
| Employee ID | Name | Role | Salary |
|---|---|---|---|
| EMP001 | Amit Sharma | Frontend Developer | $80,000 |
| EMP002 | Priya Desai | UI/UX Designer | $72,000 |
| EMP003 | Rahul Verma | Backend Developer | $90,000 |
| EMP004 | Neha Patel | Project Manager | $110,000 |
| EMP005 | Karan Mehta | QA Engineer | $68,000 |
| Total Employees | 5 | ||
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}
80Install the following dependencies:
| Product ID | Product Name | Stock |
|---|---|---|
| PRD001 | Wireless Mouse | 120 |
| PRD002 | Mechanical Keyboard | 60 |
| PRD003 | Noise Cancelling Headphones | 35 |
| PRD004 | LED Monitor 24" | 18 |
| PRD005 | USB-C Hub | 200 |
| Total Products | 13 | |
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