Sıralama, Filtreleme ve Sayfalama

Sıralama eklemek için getSortedRowModel öğesini içe aktarın ve useReactTable yapılandırmanıza ekleyin. Ayrıca bir sıralama durumuna ({id, desc} nesnelerinden oluşan bir dizi) ve React durumuna bağlanmış bir onSortingChange işleyicisine ihtiyacınız vardır.

Sıralanmış satır modeli, temel satır modelini sarar ve satırları geçerli sıralama durumuna göre yeniden sıralar.

Her sütun başlığı, th öğenizin onClick özelliğine bağlayacağınız column.getToggleSortingHandler() öğesini sunar. Tıklamak, artan, azalan ve sıralanmamış durumlar arasında geçiş yapar.

column.getIsSorted() 'asc', 'desc' veya false döndürür; böylece uygun sıralama göstergesi okunu oluşturabilirsiniz.

TanStack Table aynı anda birden çok sütuna göre sıralamayı destekler. Kullanıcılar, ilk sütunu kaldırmadan ikinci sütunu sıralama dizisine eklemek için ikinci sütun başlığına tıklarken Shift tuşunu basılı tutar.

sortingState dizisi, öncelik sırasına göre etkin olan tüm sıralama sütunlarını içerir ve sıralanmış satır modeli bunları sırayla uygular.

getFilteredRowModel öğesini içe aktarıp globalFilter durumunu ve bir onGlobalFilterChange işleyicisini ekleyerek genel filtrelemeyi etkinleştirin. Tüm sütunlarda aynı anda filtreleme yapmak için bir giriş öğesini duruma bağlayın.

Genel filtre, varsayılan olarak filterFns aracılığıyla yapılandırılabilen bulanık eşleştirme veya içerme stratejisini kullanır.

Tek tek sütunlar, filtrelerini column.getFilterValue() ve column.setFilterValue() aracılığıyla sunabilir. Her sütun başlığının altına bir filtre girişi ekleyip bunu bu yöntemlere bağlayın.

Sütun filtreleri ve genel filtreler birlikte uygulanır: Satırların filtrelenmiş satır modelinde görünmesi için tüm etkin filtreleri geçmesi gerekir.

getPaginationRowModel öğesini içe aktarın ve bunu bir sayfalama durumu nesnesi (pageIndex ve pageSize) ile bir onPaginationChange işleyicisiyle birlikte useReactTable yapılandırmasına ekleyin.

Sayfalama satır modeli, filtrelenmiş (ve sıralanmış) satırları yalnızca geçerli sayfanın bölümünü içerecek şekilde dilimler.

Tablo örneği, gezinme için table.nextPage(), table.previousPage(), table.firstPage() ve table.lastPage() yöntemlerini sunar. Sınır sayfalardaki düğmeleri devre dışı bırakmak için table.getCanNextPage() ve table.getCanPreviousPage() yöntemlerini kullanın.

table.setPageIndex(n) belirli bir sayfaya doğrudan geçer; table.setPageSize(n) sayfa başına görüntülenen satır sayısını değiştirir.

table.getPageCount(), filtrelenmiş satır sayısının pageSize değerine bölünmesine göre toplam sayfa sayısını döndürür. table.getState().pagination.pageIndex, sıfır tabanlı geçerli sayfa dizinini verir.

Sayfalama kullanıcı arayüzünüzde "3 / 12. sayfa" gibi bir sayfa sayacı oluşturmak için bu değerleri kullanın.

Satır modelleri birleştirilir: getCoreRowModel temeli sağlar, getFilteredRowModel filtreleri uygulayarak onu sarar, getSortedRowModel filtrelenmiş veriyi sıralama uygulayarak sarar ve getPaginationRowModel sonucu geçerli sayfa için dilimler.

Sıra önemlidir: sıralama filtrelemeden sonra, sayfalama ise en son gerçekleşir.

TanStack Table, satır modeli hesaplamalarını dahili olarak belleğe alır. Yalnızca değişen satır modelleri yeniden hesaplandığı için büyük veri kümelerini sıralamak ve filtrelemek verimlidir.

Son derece büyük veri kümelerinde (100.000'den fazla satır), tüm sayfa satırlarını aynı anda oluşturmaktan kaçınmak için sayfalamayı sanallaştırmayla (react-virtual) birleştirin.

getSortedRowModel öğesini sıralama durumuna, getFilteredRowModel öğesini globalFilter ve sütun filtre durumlarına, getPaginationRowModel öğesini de sayfalama durumuna bağlayın. Her özellik isteğe bağlı olarak etkinleştirilir ve diğerleriyle sorunsuz bir şekilde birleşir.

Sütun başlıkları sıralamayı getToggleSortingHandler ile yönetir; girişler filtrelemeyi setFilterValue ve onGlobalFilterChange ile yönetir; düğmeler de sayfalamayı nextPage, previousPage ve setPageIndex ile yönetir.

TanStack Table'ın sayfalama durumunda geçerli sayfa dizinini ve sayfa boyutunu hangi nesne tutar?

Sıralama için getSortedRowModel, sıralama durumu ve sütun başlığı tıklama işleyicileri gerekir. Filtreleme, genel ve sütun başına filtre durumlarıyla birlikte getFilteredRowModel öğesini kullanır. Sayfalama ise pageIndex ve pageSize durumlarıyla getPaginationRowModel öğesini kullanır.

Üç satır modeli de otomatik olarak birleşir: önce filtreleme, sonra sıralama, en son sayfalama.