Table
Header / Body Cell 全变体 + DataTable (6/8 列) + FullWidthTable。
Header Cell
content (text / text+icon / icon-only) × checkbox (none / purple / blue / black) × sort (有/无) = 24 variants。
Text only
Product
Product
Product
Product
Product
Product
Product
Product
Text + icon
Product
Product
Product
Product
Product
Product
Product
Product
Icon only
Body Cell
14 种 cell 类型，对应 Figma Cell.png 的 Body Cell 区，全部走 Kit Cell* 组件。
Square Img (CellImageText)
Handmade Pouch
+3 other
Smartwatch E2
+1 other
Headphone G1
iPhone X
User (CellImageText rounded=full)
Ilham Budi
ilahmbudi@mail.co…
John Bushmill
johnb@mail.com
Linda Blair
Josh Adam
User Group (AvatarGroup)
+24
+24
+24
+24
+24
Circle Img (country flags)
Australia
Sydney office
Germany
Berlin office
France
Japan
Files (CellFile)
sample.pdf
400 kb
sample.doc
400 kb
sample.xls
400 kb
sample.zip
400 kb
Reg Text (CellText / CellTextSubtitle / CellMuted)
Title Here
Subtext here
Title Here
Subtext here
Title Here
Title Here
Title Here
Title Here
Numbers (CellNumber)
$400
$400
$400
$400
+10%
$400
-10%
$400
+0%
Label Badge
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Text Here
Status (CellStatusDot)
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Progress (CellProgressBar)
$40010%
$40030%
$40045%
$40060%
$40045%
$40075%
$40055%
$400100%
Code (CellCode)
#302012
#302012
ORD-2024-0042
Action (CellActions / CellKebabMenu / CellLink)
Rating (CellRating / RatingStars)
5.0
4.2
3.5/5
Checkbox only
6 Column Table
紧凑视图：id / product / customer / total / progress / actions。
Recent Orders
A summary of your most recent activity
ID | Product | Customer | Total | Progress | ||
|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | John Bushmill Johnb@mail.com | $121.00 | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | Ilham Budi A ilahmbudi@mail.com | $590.00 | 40% -3% | ||
#302002 | Smartwatch E1 | Mohammad Karim m_karim@mail.com | $125.00 | 82% +5% | ||
#301901 | Headphone G1 +1 other | Linda Blair lindablair@mail.com | $348.00 | 100% +0% | ||
#301900 | iPhone X | Josh Adam josh_adam@mail.com | $607.00 | 12% -8% |
Showing 1-5 from 25
8 Column Table
扩展视图：加入 date / payment / status。3 色主题铺开。
Order History (color="purple")
All orders across the last 30 days
ID | Product | Date | Customer | Total | Payment | Status | ||
|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled |
Showing 1-5 from 25
Order History (color="blue")
All orders across the last 30 days
ID | Product | Date | Customer | Total | Payment | Status | ||
|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled |
Showing 1-5 from 25
Order History (color="black")
All orders across the last 30 days
ID | Product | Date | Customer | Total | Payment | Status | ||
|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled |
Showing 1-5 from 25
6 Column - Colors
purple / blue / black 3 色主题在 6 列模式下的对比。
color="purple"
ID | Product | Customer | Total | Progress | ||
|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | John Bushmill Johnb@mail.com | $121.00 | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | Ilham Budi A ilahmbudi@mail.com | $590.00 | 40% -3% | ||
#302002 | Smartwatch E1 | Mohammad Karim m_karim@mail.com | $125.00 | 82% +5% |
Showing 1-3 from 25
color="blue"
ID | Product | Customer | Total | Progress | ||
|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | John Bushmill Johnb@mail.com | $121.00 | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | Ilham Budi A ilahmbudi@mail.com | $590.00 | 40% -3% | ||
#302002 | Smartwatch E1 | Mohammad Karim m_karim@mail.com | $125.00 | 82% +5% |
Showing 1-3 from 25
color="black"
ID | Product | Customer | Total | Progress | ||
|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | John Bushmill Johnb@mail.com | $121.00 | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | Ilham Budi A ilahmbudi@mail.com | $590.00 | 40% -3% | ||
#302002 | Smartwatch E1 | Mohammad Karim m_karim@mail.com | $125.00 | 82% +5% |
Showing 1-3 from 25
Full Width Table
整页 table，自带 row count 选择和分页。3 色全铺。
All Orders (color="purple")
Complete order list with full data
Show
ID | Product | Date | Customer | Total | Payment | Status | Progress | ||
|---|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | 40% -3% | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | 82% +5% | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | 100% +0% | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled | 12% -8% |
Showing 1-5 from 25
All Orders (color="blue")
Complete order list with full data
Show
ID | Product | Date | Customer | Total | Payment | Status | Progress | ||
|---|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | 40% -3% | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | 82% +5% | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | 100% +0% | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled | 12% -8% |
Showing 1-5 from 25
All Orders (color="black")
Complete order list with full data
Show
ID | Product | Date | Customer | Total | Payment | Status | Progress | ||
|---|---|---|---|---|---|---|---|---|---|
#302012 | Handmade Pouch +3 other | 1 min ago | John Bushmill Johnb@mail.com | $121.00 | Mastercard | Processing | 65% +12% | ||
#302011 | Smartwatch E2 +1 other | 1 min ago | Ilham Budi A ilahmbudi@mail.com | $590.00 | Visa | Processing | 40% -3% | ||
#302002 | Smartwatch E1 | 5 hour ago | Mohammad Karim m_karim@mail.com | $125.00 | Transfer | Shipped | 82% +5% | ||
#301901 | Headphone G1 +1 other | 1 day ago | Linda Blair lindablair@mail.com | $348.00 | Paypal | Delivered | 100% +0% | ||
#301900 | iPhone X | 2 day ago | Josh Adam josh_adam@mail.com | $607.00 | Visa | Canceled | 12% -8% |
Showing 1-5 from 25