Bileşenler

Table

Sütunlarda veri satırları; isteğe bağlı sıralama ve satır seçimi. Uzun listeler için Pagination ile kullanın.

TasarımcıGeliştirici

Playground

Kişiler
		Durum
Ada Lovelace	Engineering	Aktif	12
Alan Turing	Engineering	Uzakta	5
Grace Hopper	Research	Aktif	8
Hedy Lamarr	Design	Uzakta	3
Katherine Johnson	Analytics	Aktif	15
Margaret Hamilton	Engineering	Aktif	21
Radia Perlman	Research	Aktif	9

1 seçili

Sıralanabilir sütunlar Satır seçimi Sayfalama Satır yok

Figma varyantı

Table
.Table Header Cell › ↕ Sort=Ascending / Descending / None
.Table Cell › 🎛 Type=Checkbox + Text
.Table Row › 🕹 State=Default / Hover / Selected

Parçalar

Bir başlık hücresi (metin, sıralıysa ok; ya da tümünü seçen checkbox), bir gövde hücresi (kesilen metin ya da satır checkbox’ı) ve Default, Hover, Selected durumlu bir satır; hepsi çevresinde çizgi olan bir kartın içinde.

Tokenlar

Part	Token
Frame	`--color-surface-level-1, --border, --radius-card`
Header cell	`--color-surface-level-2, --text-ui-text-small-bold, --color-foreground-medium-emphasis`
Body cell	`--text-ui-text-regular, --color-foreground-high-emphasis`
Cell padding	`--layout-small --layout-default`
Row hover / selected	`--color-surface-level-2 / --color-primary-soft`

Figma’dan koda

Figma	React
.Table Header Cell › ↕ Sort = None / Ascending / Descending	`column.sortable + sort.direction = 'ascending' / 'descending'`
.Table Header Cell › 🎛 Type = Checkbox	`selectable`
.Table Cell › 🎛 Type = Text / Checkbox	`column.cell / selectable`
.Table Row › 🕹 State = Hover / Selected	`:hover / selected={[…]}`