Table

Table component with bold borders and solid shadows

案例展示

Table 在实际场景中的使用示例

Recent Invoice Records
Invoice	Status	Payment Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
Total			$1,750.00

Name	Email	Role	Status
John Smith	john@example.com	Admin	Active
Jane Doe	jane@example.com	Editor	Active
Bob Wilson	bob@example.com	User	Offline
Alice Brown	alice@example.com	User	Active

简单的数据展示表格

Table 由多个子组件组成

Table

Root container

TableHeader

Table header area

TableBody

Table body area

TableFooter

Table footer area

TableRow

Table row

TableHead

Header cell

TableCell

Body cell

TableCaption

Table caption

带有排序、筛选、操作等功能的复杂表格

	Image		Category		Stock	Sales	Status
	🎧	Wireless Headphones PRD001	Electronics	$89.99	156	2,340	In Stock
	⌨️	Mechanical Keyboard PRD002	Electronics	$149.99	23	1,890	Low Stock
	🔌	USB-C Hub PRD003	Accessories	$49.99	0	567	Out of Stock
	🖥️	Monitor Stand PRD004	Furniture	$79.99	89	1,234	In Stock
	📷	Webcam HD PRD005	Electronics	$69.99	45	890	In Stock
Total					313	6,921

Showing 1-5 of 5 records

Order ID	Customer	Items	Total	Payment	Status	Date
ORD-2024-001	J John Smith john@example.com	3 items	$299.99	Paid	Completed	2024-12-18
ORD-2024-002	J Jane Doe jane@example.com	1 items	$89.99	Paid	Processing	2024-12-19
ORD-2024-003	B Bob Wilson bob@example.com	5 items	$549.99	Pending	Pending	2024-12-20
ORD-2024-004	A Alice Brown alice@example.com	2 items	$159.99	Paid	Shipped	2024-12-17

File Name	Size	Modified	Owner
Annual Report.pdf	2.4 MB	2024-12-15	J John
Product Image.png	1.2 MB	2024-12-18	J Jane
Data Sheet.xlsx	856 KB	2024-12-19	B Bob
Meeting Notes.docx	124 KB	2024-12-20	A Alice

点击行可展开查看更多详情