DataTable

Ne zaman kullanılır

DataTable, kullanıcının taradığı, sıraladığı ya da seçtiği veriler içindir: bir kayıt listesi, bir yönetim ekranı. Veri sayfa sayfa gelebilir, yüzlerce ya da binlerce satır içerebilir ve zamanla değişebilir.

Ne zaman kullanılmaz

• Küçük, salt okunur veri için: Table kullanın. Etkileşim yoksa DataTable’ın ek yükü gereksizdir.
• Anahtar-değer çiftleri için: DescriptionList kullanın.
• Yinelenen tek sütunlu satırlar için: ListItem kullanın.
• Hücrede düzenleme için: DataTable salt okunurdur; düzenleme için bir form ya da ayrı bir görünüm kullanın.
• Izgara gezinmesi (ok tuşlarıyla hücre hücre) gerekiyorsa: DataTable bunu sağlamaz; her etkileşimli hücre ayrı bir sekme durağıdır.

Table ile DataTable

	Table	DataTable
Veri	Küçük, salt okunur, sayfada hazır	Büyük, sunucudan gelen ya da değişen
Sıralama, seçim	Yok	Var
Sütun görünürlüğü	Yok	Var
Yükleniyor, boş, hata	Elle kurulur	Yerleşik (status)
Sanallaştırma	Yok	virtualize
Parçalar	Table.*	Aynı Table.* parçaları

Anatomi

1. Araç çubuğu: toolbar içeriği ve sütun butonu; isteğe bağlı.
2. Kaydırma bölgesi: adlandırılmış, odaklanabilir kapsayıcı (Table’dan).
3. Üst bilgi: seçim kutusu sütunu, sütun başlıkları (sıralanabilirse buton), işlem sütunu.
4. Gövde: veri satırları; yükleniyor, boş ve hata durumunda iletiler.
5. İşlem sütunu: rowActions; satır sonunda yapışık.
6. Altlık: footer; sayfalama için.
7. Canlı bölge: sıralama ve seçim değişikliklerini duyuran görünmez alan.

Davranış

• Sıralama: Başlık butonu üç durum arasında döner: artan, azalan, sıralamasız. Aynı anda tek sütun sıralanır.
• Seçim: aria-selected düz tabloda geçerli değildir; seçili satır data-selected ve onay kutusunun işaretli durumuyla gösterilir. Seçili satır sayısı kibar bir canlı bölgede duyurulur.
• Sütun görünürlüğü: Panel sayfa akışında durur; Escape paneli kapatır ve odağı butona döndürür.
• Satır işlemleri: İşlem sütunu yatay kaydırmada satır sonunda yapışık kalır.
• Durumlar: Yüklenirken üst bilgi kalır, gövde beş iskelet satırdır. Hata iletisi role="alert" taşır.
• Sanallaştırma: Yalnızca görünen satırlar ve bir pay üretilir; üstte ve altta boş dolgu satırları kaydırma yüksekliğini korur. Satırlar eşit yükseklikte olmalıdır.
• Satır animasyonu yoktur: Veri değişince satırlar animasyonsuz güncellenir; tablolar satır oynatmaz.
• Ok tuşlarıyla gezinme yoktur: Etkileşimli hücreler Tab ile gezilir.
• Sabit sütunlar (meta.pin) yatay kaydırmada yerinde kalır; kenarları sabit sütunların ölçülen genişliğine göre hesaplanır.
• Açılır satırlarda aç/kapat düğmesi ayrıntı satırını açar ve kapatır; ayrıntı satırı tüm sütunları kaplar. Açık satır sayfa ya da sıralama değişse de kimliğiyle açık kalır.

Yönergeler

Etkileşim yoksa Table kullanın

Veri küçük ve salt okunursa Table yeter; DataTable’ı yalnızca sıralama, seçim ya da yüklenme durumları gerektiğinde seçin.

Öğe listesi

Ad	Adet
Öğe 1	12

YapınÜç satırlık salt okunur liste için Table.

Öğe listesi

Ad	Adet
Öğe 1	12

YapmayınSıralama ya da seçim olmayan üç satır için DataTable: gereksiz.

İşlemlerin adı satırı söylesin

Satır işlemlerinin adı, hangi satıra ait olduğunu belirtmeli; ekran okuyucu butonları liste olarak okur.

Öğe listesi

Ad	Adet	İşlemler
Öğe 1	12
Öğe 2	86

YapınAd satırı içeriyor: "Düzenle: Öğe 1".

Öğe listesi

Ad	Adet	İşlemler
Öğe 1	12
Öğe 2	86

YapmayınHer satırda aynı ad ("Düzenle"): hangi satır olduğu belli değil.

Boş durumu açıklayın

Veri yoksa tabloyu boş bırakmayın; ne olduğunu söyleyin ve mümkünse bir çıkış verin.

Öğe listesi

Ad	Adet
Filtrelere uyan kayıt yok Filtreleri temizle

YapınBoş durumda ileti ve eylem.

Öğe listesi

Ad	Adet

YapmayınBaşlıktan sonra boş: veri yok mu, yükleniyor mu belli değil.

İçerik

• Sütun başlığını kısa yazın, cümle düzeninde: “Oluşturulma tarihi”, “Sahibi”. Büyük harfe çevirmeyin.
• Başlığı bir isim öbeği olarak yazın: “Öğe listesi”.
• getRowLabel satırı en iyi tanıtan metni döndürsün: ad ya da başlık. Kimlik yalnızca son çaredir.
• Boş ve hata iletilerini kısa tutun ve ne yapılacağını söyleyin: “Yeniden dene”, “Filtreleri temizle”.
• İşlem butonlarının adına satırı ekleyin: “Düzenle: Öğe 1”.

Performans

• 1.000 satırdan itibaren virtualize açın. Sanallaştırma olmadan binlerce satır, etkileşim gecikmesini (INP) artırır; hedef INP 200 ms’nin altıdır.
• columns ve data dizilerini kararlı tutun (useMemo ya da modül sabiti). Her çizimde yeni dizi vermek tabloyu baştan hesaplatır.
• Çok büyük veriyi sunucuda sıralayın ve sayfalayın (manualSorting, totalRowCount).
• Sanallaştırmada satır yüksekliği sabit olmalıdır; hücre içeriği iki satıra taşmasın. Gerekirse estimateRowHeight verin.

İlgili bileşenler

• Table: Küçük, salt okunur veriler için; DataTable aynı parçaları kullanır.
• Pagination: footer içine konur.
• Checkbox: Seçim ve sütun paneli için kullanılır.
• IconButton: Satır işlemleri için.
• StatusBadge: Durum hücreleri için.