Satır Seçimi ve Sanallaştırılmış Tablolar

id değeri 'select' olan bir seçim sütununu ColumnDef dizinize ekleyin. Hücre, row.getToggleSelectedHandler() öğesine bağlanmış bir onay kutusu oluşturur. Başlık, table.getToggleAllRowsSelectedHandler() kullanarak tümünü seçen bir onay kutusu oluşturur.

Ayrıca rowSelection durumunu ve onRowSelectionChange işleyicisini useReactTable öğesine geçirin.

row.getIsSelected(), bir satır o anda seçili olduğunda true döndürür; bu da seçili satırlara vurgulanmış bir arka plan stili uygulamak için idealdir.

row.getIsSomeSelected(), bir gruptaki satırların yalnızca bazıları seçildiğinde belirsiz onay kutusu durumunu yönetir; bu, gruplandırılmış tablolar için kullanışlıdır.

table.getSelectedRowModel().rows, o anda seçili olan tüm satır nesnelerinden oluşan bir dizi döndürür. Her satırda, özgün veri nesnesini içeren bir row.original özelliği bulunur.

"Seçilenleri sil" veya "Seçilenleri dışa aktar" gibi seçili küme üzerinde işlem yapan toplu işlem düğmelerini bu şekilde oluşturabilirsiniz.

İşlem düğmelerini table.getSelectedRowModel().rows.length > 0 koşuluna göre koşullu olarak oluşturun. Hiçbir satır seçilmediğinde, boş durum etkileşimlerinin kafa karıştırmasını önlemek için toplu işlem araç çubuğunu gizleyin veya devre dışı bırakın.

Seçili sayısını kullanıcı arayüzünde görüntüleyin: "{count} satır seçildi" ifadesi, kullanıcıların seçimlerinden haberdar olmasını sağlar.

10.000 satırı DOM düğümleri olarak oluşturmak son derece yavaştır. Tarayıcı binlerce öğenin yerleşimini hesaplamalı, bunları boyamalı ve yönetmelidir. Kullanıcılar takılarak kaydırma ve yavaş ilk oluşturma deneyimi yaşar.

Sanallaştırma, yalnızca görünüm alanında o anda görünür olan satırları oluşturur; böylece DOM boyutunu önemli ölçüde küçültür ve performansı artırır.

@tanstack/react-virtual paketini @tanstack/react-table paketinin yanında yükleyin. İki kitaplık birbirinden bağımsızdır ancak birbirini tamamlayacak şekilde tasarlanmıştır. TanStack Table veri mantığınızı, TanStack Virtual ise DOM'da hangi öğelerin oluşturulacağını yönetir.

Bütünleştirme noktası, table.getRowModel().rows tarafından döndürülen satır dizisidir.

useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }) çağrısını yapın. count değeri, tüm filtrelerden sonraki geçerli satır sayısıyla eşleşerek kaç sanal öğenin bulunacağını belirler.

estimateSize başlangıç satır yüksekliği tahminini sağlar; gerçek yükseklikler satırlar oluşturuldukça ölçülür.

Şu anda DOM'da bulunması gereken satırları almak için virtualizer.getVirtualItems() çağrısını yapın. Bu dizi üzerinde yineleyin, gerçek satıra table.getRowModel().rows[virtualRow.index] aracılığıyla erişin ve yalnızca bu tr öğelerini oluşturun.

Her sanal öğe, kaydırma kapsayıcısı içindeki mutlak konumlandırma için bir start özelliğine sahiptir.

Doğru kaydırma konumunu korumak için, yüksekliği ilk sanal öğenin start değerine eşit olan bir üst aralayıcı div'i ve yüksekliği toplam boyuttan son öğenin end değeri çıkarılarak hesaplanan bir alt aralayıcı div'i ekleyin.

Bu görünmez div'ler, oluşturulmayan satırların kaplayacağı alanı doldurarak kaydırma çubuğunun orantısının doğru kalmasını sağlar.

Doğru dinamik satır yükseklikleri için measureElement: el => el.getBoundingClientRect().height ifadesini useVirtualizer öğesine geçirin. Her satırın ref'i tr öğesine bağlanır; böylece sanallaştırıcı, satırın oluşturulmuş gerçek yüksekliğini ölçer.

Bu yaklaşım, farklı içeriklere sahip satırları (çok satırlı metinler, genişletilmiş satırlar) yerleşim kaymaları olmadan yönetir.

Sıralama, filtreleme, sayfalama, satır seçimi ve TanStack Virtual içeren TanStack Table özellikleri birlikte birleşir. useVirtualizer öğesine aktarılan satır sayısı, tüm etkin satır modelleri verileri işledikten sonraki table.getRowModel().rows değerinden alınmalıdır.

Sayfalama etkinleştirildiğinde önce sayfalayın, ardından büyük bir sayfa içinde akıcı kaydırma için geçerli sayfanın satırlarını sanallaştırın.

Şu anda seçili olan tüm satırların özgün veri nesnelerini hangi yöntem döndürür?

Satır seçimi; getToggleSelectedHandler içeren bir onay kutusu sütununu, rowSelection durumunu ve seçili verilere erişmek için table.getSelectedRowModel().rows değerini kullanır. useVirtualizer ile sanallaştırma, getVirtualItems, aralayıcı div'ler ve dinamik yükseklikler için isteğe bağlı measureElement kullanarak yalnızca görünür satırları oluşturur.

TanStack Table'ın tüm özellikleri (sıralama, filtreleme, sayfalama, seçim), sanal oluşturmayla sorunsuz biçimde birleşir.