Pemilihan Baris dan Tabel Tervirtualisasi

Tambahkan kolom pemilihan ke larik ColumnDef menggunakan id 'select'. Sel merender kotak centang yang dihubungkan ke row.getToggleSelectedHandler(). Tajuk merender kotak centang untuk memilih semua menggunakan table.getToggleAllRowsSelectedHandler().

Teruskan juga status rowSelection dan onRowSelectionChange ke useReactTable.

row.getIsSelected() mengembalikan true ketika suatu baris sedang dipilih, sehingga cocok untuk menerapkan gaya latar belakang yang disorot pada baris terpilih.

row.getIsSomeSelected() menangani status kotak centang tak tentu ketika hanya beberapa baris dalam suatu grup yang dipilih, yang berguna untuk tabel yang dikelompokkan.

table.getSelectedRowModel().rows mengembalikan larik semua objek baris yang saat ini dipilih. Setiap baris memiliki properti row.original yang berisi objek data asli.

Beginilah cara Anda membuat tombol tindakan massal yang beroperasi pada kumpulan yang dipilih, seperti "Hapus yang dipilih" atau "Ekspor yang dipilih".

Render tombol tindakan secara kondisional berdasarkan table.getSelectedRowModel().rows.length > 0. Jika tidak ada baris yang dipilih, sembunyikan atau nonaktifkan bilah alat tindakan massal agar tidak menimbulkan interaksi keadaan kosong yang membingungkan.

Tampilkan jumlah yang dipilih pada antarmuka: "{count} baris dipilih" agar pengguna selalu mengetahui pilihannya.

Merender 10.000 baris sebagai simpul DOM sangat lambat. Browser harus menata letak, menggambar, dan memelihara ribuan elemen. Pengguna akan mengalami pengguliran tersendat dan perenderan awal yang lambat.

Virtualisasi hanya merender baris yang sedang terlihat di area pandang, sehingga ukuran DOM berkurang drastis dan kinerja meningkat.

Instal @tanstack/react-virtual bersama @tanstack/react-table. Kedua pustaka tersebut terpisah, tetapi dirancang untuk saling melengkapi. TanStack Table mengelola logika data Anda, sedangkan TanStack Virtual mengelola item yang dirender di DOM.

Titik integrasinya adalah larik baris dari table.getRowModel().rows.

Panggil useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). count menentukan jumlah item virtual yang ada, sesuai dengan jumlah baris tabel saat ini setelah semua penyaringan.

estimateSize menyediakan perkiraan awal tinggi baris; tinggi sebenarnya diukur saat baris dirender.

Panggil virtualizer.getVirtualItems() untuk mendapatkan hanya baris yang saat ini seharusnya berada di DOM. Lakukan iterasi pada larik ini, akses baris sebenarnya melalui table.getRowModel().rows[virtualRow.index], lalu render hanya elemen tr tersebut.

Setiap item virtual memiliki properti start untuk penempatan absolut di dalam wadah pengguliran.

Untuk mempertahankan posisi pengguliran yang benar, tambahkan div pengisi spasi atas dengan tinggi yang sama dengan start item virtual pertama, serta div pengisi spasi bawah dengan tinggi sebesar ukuran total dikurangi end item terakhir.

Div yang tidak terlihat ini mengisi ruang yang seharusnya ditempati baris yang tidak dirender, sehingga proporsi bilah gulir tetap benar.

Teruskan measureElement: el => el.getBoundingClientRect().height ke useVirtualizer untuk mendapatkan tinggi baris dinamis yang akurat. Referensi setiap baris dilampirkan ke elemen tr sehingga virtualizer dapat mengukur tinggi sebenarnya yang dirender.

Ini menangani baris dengan isi yang bervariasi (teks beberapa baris, baris yang diperluas) tanpa pergeseran tata letak.

TanStack Table dengan pengurutan, penyaringan, paginasi, pemilihan baris, dan TanStack Virtual dapat digabungkan. Jumlah baris yang diteruskan ke useVirtualizer harus berasal dari table.getRowModel().rows setelah semua model baris aktif memproses data.

Dengan paginasi diaktifkan, lakukan paginasi terlebih dahulu, lalu virtualisasi baris halaman saat ini untuk pengguliran yang lancar dalam halaman besar.

Metode mana yang mengembalikan objek data asli untuk semua baris yang saat ini dipilih?

Pemilihan baris menggunakan kolom kotak centang dengan getToggleSelectedHandler, status rowSelection, dan table.getSelectedRowModel().rows untuk mengakses data yang dipilih. Virtualisasi dengan useVirtualizer hanya merender baris yang terlihat menggunakan getVirtualItems, div pengisi spasi, dan measureElement opsional untuk tinggi dinamis.

Semua fitur TanStack Table (pengurutan, penyaringan, paginasi, pemilihan) dapat digabungkan dengan baik dengan perenderan virtual.