Components · Data Table

Data table

Tarama + sıralama + filtreleme + toplu aksiyon. Sipariş yönetimi, müşteri listesi, ödeme geçmişi gibi yoğun veri ekranlarının ana yapısı. Mobil için Card list'e dönüşür (kartlar tek satır = bir kayıt).

01 · Tam görünüm · seçili satır + toolbar + paginate

Filtreler · 2
Bugün
Tüm şubeler
Sütunlar
2 satır seçildi · sayfa toplamı 8
WhatsApp gönder Etiketle İptal et
Sipariş Müşteri Şube Tarih Durum Tutar
#1247
3 ürün
Mehmet Özkan
+90 532 *** 4521
 Kadıköy · Bağdat 14:32
Bugün
 Hazırlanıyor 124,50 ₺
#1246
1 ürün
Ayşe Kara
Yeni müşteri
 Kadıköy · Moda 14:18
Bugün
 Yeni 52,00 ₺
#1245
5 ürün
Yusuf Demir
VIP · 47 sipariş
 Beşiktaş · Akaretler 13:55
Bugün
 Teslim edildi 312,75 ₺
#1244
2 ürün
Selin Aydın
+90 533 *** 8821
 Kadıköy · Bağdat 13:42
Bugün
 İptal — ₺
#1243
1 ürün
Emir Yılmaz
9 sipariş
 Beşiktaş · Akaretler 12:08
Bugün
 Teslim edildi 86,00 ₺
1-5 / 47

02 · Boş durum · veri yok

"VIP" filtresine uyan sipariş yok
Bugün için VIP müşteri etiketli sipariş gelmedi. Tarihi genişletmeyi veya filtreyi kaldırmayı deneyin.
Filtreyi temizle

Kurallar

· Sayısal sütunlar tabular-nums + sağa hizalı; tarih sütunları gün/saat ayrımı (12:08 + Bugün).
· Sıralama: yalnızca sayısal/zaman/lexical anlamlı sütunlarda. Aktif sütun primary renkte ok ile.
· Toplu seçim header checkbox'ı: hiçbiri / kısmi / tümü → indeterminate ara durumu zorunlu.
· Hover ≠ selected. Selected satır sürekli vurgulu, hover anlık. İkisi karıştırılırsa "neyi seçtim?" hissi kaybolur.
· Density: comfortable (12px), compact (8px). Toolbar'dan değiştirilebilir, tercih localStorage'da.
· Mobil: kart listesi'ne dönüş — table cell'leri "label: value" satırlarına. Yatay scroll son çare.
· Pagination 100+ satırda; üstünde infinite scroll kullanılmaz (toplu seçim ve geri dönüş bozulur).
· Boş durum mutlaka aksiyonlu: filtre temizle, yeni kayıt ekle, vs. — sadece "Veri yok" yasak.