Table
Table component with bold borders and solid shadows
案例展示
Table 在实际场景中的使用示例
发票列表
| 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 | Role | Status | |
|---|---|---|---|
| John Smith | [email protected] | Admin | Active |
| Jane Doe | [email protected] | Editor | Active |
| Bob Wilson | [email protected] | User | Offline |
| Alice Brown | [email protected] | User | Active |
可选择表格
| Task | Status | Priority | |
|---|---|---|---|
| Design System Docs | Completed | High | |
| Component Development | In Progress | High | |
| User Testing | Not Started | Medium |
基础表格
简单的数据展示表格
| Name | Type | Size |
|---|---|---|
| document.pdf | 2.4 MB | |
| image.png | PNG | 1.2 MB |
| data.xlsx | Excel | 856 KB |
组件结构
Table 由多个子组件组成
TableRoot container
TableHeaderTable header area
TableBodyTable body area
TableFooterTable footer area
TableRowTable row
TableHeadHeader cell
TableCellBody cell
TableCaptionTable caption
复杂表格示例
带有排序、筛选、操作等功能的复杂表格
产品管理表格
| Image | Category | Stock | Sales | Status | Actions | |||
|---|---|---|---|---|---|---|---|---|
🎧 | 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 | Actions |
|---|---|---|---|---|---|---|---|
| ORD-2024-001 | J John Smith | 3 items | $299.99 | Paid | Completed | 2024-12-18 | |
| ORD-2024-002 | J Jane Doe | 1 items | $89.99 | Paid | Processing | 2024-12-19 | |
| ORD-2024-003 | B Bob Wilson | 5 items | $549.99 | Pending | Pending | 2024-12-20 | |
| ORD-2024-004 | A Alice Brown | 2 items | $159.99 | Paid | Shipped | 2024-12-17 |
文件列表表格
| File Name | Size | Modified | Owner | Actions | |
|---|---|---|---|---|---|
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 |
可展开行
点击行可展开查看更多详情
| Product Name | Category | Price | |
|---|---|---|---|
| MacBook Pro 14 | Laptop | $1,999 | |
| iPhone 15 Pro | Smartphone | $999 | |
| iPad Air | Tablet | $599 |