DataTable

Durumlar

Durum	Destek	Görsel değişiklik	Token’lar
Varsayılan	Var	Table ile aynı: saydam üst bilgi, altında daha koyu çizgi, satır çizgisi	table-header-background, table-header-border, table-border
Üzerine gelme	Satır (hoverable, varsayılan açık)	Satır boyanır; yükselme yok	table-row-background-hovered
Seçili	Satır	Seçili arka plan, data-selected, onay kutusu işaretli	table-row-background-selected
Sıralanmış	Başlık	Ok simgesi; azalanda yarım tur döner	icon-size-xs
Başlık butonu basılı	Başlık	%97’ye küçülür	motion-press-scale
Odak	Sıralama butonu, satır açma butonu, onay kutuları, kaydırma bölgesi	2 px odak çizgisi, 2 px uzaklıkta; kaydırma bölgesinde kenarın içinde	color-focus-ring, border-width-focus, focus-offset
Yükleniyor	status="loading"	Beş iskelet satır, aria-busy	color-surface-sunken
Boş, süzgece uymayan, hata	status	Ortalanmış ileti ve isteğe bağlı eylem butonu	color-text-subtle
Devre dışı	Tümünü seç (veri yokken)	Onay kutusu devre dışı	-

Ölçüler

Özellik	Değer	Token
Hücre yatay iç boşluğu	8 px; onay kutusu hücresinin sonunda 0	table-cell-padding-inline
Hücre dikey iç boşluğu, compact	4 px (en az 32 px satır)	table-cell-padding-block-compact
Hücre dikey iç boşluğu, standard (varsayılan)	8 px (en az 40 px satır)	table-cell-padding-block-standard
Hücre dikey iç boşluğu, comfortable	12 px (en az 48 px satır)	table-cell-padding-block-comfortable
Başlık satırı yüksekliği, standard	40 px	table-header-height
Satır yüksekliği (sanallaştırma tahmini), compact / standard / comfortable	32 px / 40 px / 48 px	-
Sıralama simgesi	12 px	icon-size-xs
İşlem sütunu	Satır sonunda yapışık	-
İskelet çubuğu	12 px yüksekliğinde, en fazla 160 px	space-lg
Sütun paneli	En az 192 px, 16 px iç boşluk; ortak açılır yüzey: ince kenar çizgisi, açılır gölge, 10 px köşe	space-xl, color-border-overlay, shadow-popup, popover-radius
Bileşenler arası boşluk	8 px	space-md
Sabit sütun	Sayfa yüzeyi dolgusu (başlık hücresi dahil), kayan sütunlara bakan kenarda tablo çizgisi renginde 1 px çizgi	color-surface-default, table-border
Aç/kapat düğmesi	24 px, 16 px simge, 6 px köşe	button-height-xs, icon-size-sm, menu-item-radius
Açılan ayrıntı satırı	1. katman yüzeyi	color-surface-layer-1

Token’lar

DataTable yeni token eklemez; Table’ın table.* token’larını kullanır. Değerler seçili markaya göre gösterilir.

Token	Örnek	Açık mod	Koyu mod
--bigbang-table-header-background		rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)	rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)
--bigbang-table-header-foreground		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-table-row-background-hovered		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-table-row-background-selected		#edf5f8#ededed#ededed	#092932#404040#404040
--bigbang-table-border		#ededed#ededed#ededed	#303030#303030#303030
--bigbang-table-cell-padding-inline		8px8px8px	8px8px8px
--bigbang-table-cell-padding-block-compact		4px4px4px	4px4px4px
--bigbang-table-cell-padding-block-standard		8px8px8px	8px8px8px
--bigbang-table-header-height		40px40px40px	40px40px40px
--bigbang-table-cell-padding-block-comfortable		12px12px12px	12px12px12px
--bigbang-icon-size-xs		12px12px12px	12px12px12px
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-motion-press-scale		0.970.970.97	0.970.970.97

Hareket ve etkileşim

Etkileşim	Hareket	Azaltılmış hareket
Sıralama butonu basma	scale 1 → 0,97, motion-press-duration (70 ms) (motion.press)	Ölçek 1
Sıralama yönü değişimi	Ok yarım tur döner, motion-collapsible-icon-duration	Hareket yok; ok değişir
Satır üzerine gelme	Arka plan rengi, motion-hover-duration (110 ms) (motion.hover); satır yükselmez	Aynı; yalnızca renk
Seçili satır	Arka plan rengi aynı hızla değişir	Aynı
İskelet	Üç kez geçen parıltı, sonra durur (motion.skeleton)	Parıltı yok
Sütun paneli açılışı	Solma ve 4 px iniş (motion.collapsible)	Yalnızca kısa solma
Veri değişimi	Satırlara animasyon yok	Aynı

Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.