Pengurutan, Pemfilteran, dan Paginasi

Untuk menambahkan pengurutan, impor getSortedRowModel dan tambahkan ke konfigurasi useReactTable Anda. Anda juga memerlukan status pengurutan (larik objek {id, desc}) dan pengendali onSortingChange yang dihubungkan ke status React.

Model baris terurut membungkus model baris inti, lalu mengurutkan ulang baris berdasarkan status pengurutan saat ini.

Setiap tajuk kolom menyediakan column.getToggleSortingHandler(), yang Anda pasangkan ke onClick pada elemen th Anda. Mengekliknya akan beralih antara status menaik, menurun, dan tanpa pengurutan.

column.getIsSorted() mengembalikan 'asc', 'desc', atau false, sehingga Anda dapat menampilkan panah indikator pengurutan yang sesuai.

TanStack Table mendukung pengurutan berdasarkan beberapa kolom secara bersamaan. Pengguna menekan tombol Shift sambil mengeklik tajuk kolom kedua untuk menambahkannya ke larik pengurutan tanpa menghapus kolom pertama.

Larik sortingState berisi semua kolom yang aktif diurutkan berdasarkan urutan prioritas, dan model baris terurut menerapkannya secara berurutan.

Aktifkan penyaringan global dengan mengimpor getFilteredRowModel serta menambahkan status globalFilter dan pengendali onGlobalFilterChange. Hubungkan elemen masukan ke status tersebut untuk menyaring semua kolom sekaligus.

Penyaring global menggunakan strategi pencocokan kabur atau penyertaan secara default, yang dapat dikonfigurasi melalui filterFns.

Setiap kolom dapat menyediakan penyaringnya sendiri melalui column.getFilterValue() dan column.setFilterValue(). Tambahkan masukan penyaringan di bawah setiap tajuk kolom dan hubungkan masukan tersebut ke kedua fungsi ini.

Penyaringan kolom dan penyaringan global digabungkan: baris harus lolos dari semua penyaringan aktif agar muncul dalam model baris yang telah disaring.

Impor getPaginationRowModel dan tambahkan ke konfigurasi useReactTable bersama objek status paginasi (pageIndex dan pageSize) serta pengendali onPaginationChange.

Model baris paginasi memotong baris yang telah disaring (dan diurutkan) sehingga hanya menyisakan bagian untuk halaman saat ini.

Instans tabel menyediakan table.nextPage(), table.previousPage(), table.firstPage(), dan table.lastPage() untuk navigasi. Gunakan table.getCanNextPage() dan table.getCanPreviousPage() untuk menonaktifkan tombol pada batas halaman.

table.setPageIndex(n) melompat langsung ke halaman tertentu; table.setPageSize(n) mengubah jumlah baris yang ditampilkan per halaman.

table.getPageCount() mengembalikan jumlah total halaman berdasarkan jumlah baris hasil penyaringan yang dibagi dengan pageSize. table.getState().pagination.pageIndex memberikan indeks halaman saat ini yang dimulai dari nol.

Gunakan nilai-nilai ini untuk membuat penghitung halaman seperti "Halaman 3 dari 12" pada antarmuka paginasi Anda.

Model baris dapat digabungkan: getCoreRowModel menyediakan dasar, getFilteredRowModel membungkusnya sambil menerapkan penyaringan, getSortedRowModel membungkus data hasil penyaringan sambil menerapkan pengurutan, dan getPaginationRowModel memotong hasilnya untuk halaman saat ini.

Urutannya penting: pengurutan berlangsung setelah penyaringan, sedangkan paginasi berlangsung terakhir.

TanStack Table menyimpan hasil perhitungan model baris secara internal. Pengurutan dan penyaringan kumpulan data besar tetap efisien karena hanya model baris yang berubah yang dihitung ulang.

Untuk kumpulan data yang sangat besar (100.000+ baris), gabungkan paginasi dengan virtualisasi (react-virtual) agar tidak merender semua baris halaman sekaligus.

Hubungkan getSortedRowModel dengan status pengurutan, getFilteredRowModel dengan globalFilter dan status penyaringan kolom, serta getPaginationRowModel dengan status paginasi. Setiap fitur harus diaktifkan secara eksplisit dan dapat digabungkan dengan baik dengan fitur lainnya.

Tajuk kolom mengendalikan pengurutan melalui getToggleSortingHandler; masukan mengendalikan penyaringan melalui setFilterValue dan onGlobalFilterChange; tombol mengendalikan paginasi melalui nextPage, previousPage, dan setPageIndex.

Objek mana yang menyimpan indeks halaman dan ukuran halaman saat ini dalam status paginasi TanStack Table?

Pengurutan memerlukan getSortedRowModel, status pengurutan, dan pengendali klik pada tajuk kolom. Penyaringan menggunakan getFilteredRowModel dengan status penyaringan global dan per kolom. Paginasi menggunakan getPaginationRowModel dengan status pageIndex dan pageSize.

Ketiga model baris tersebut digabungkan secara otomatis: lakukan penyaringan terlebih dahulu, pengurutan kedua, dan paginasi terakhir.