การเลือกแถวและตารางเสมือน

เพิ่มคอลัมน์สำหรับการเลือกลงในอาร์เรย์ ColumnDef โดยใช้ id 'select' เซลล์จะแสดงช่องทำเครื่องหมายที่เชื่อมกับ row.getToggleSelectedHandler() ส่วนหัวจะแสดงช่องทำเครื่องหมายสำหรับเลือกทั้งหมดโดยใช้ table.getToggleAllRowsSelectedHandler()

นอกจากนี้ ให้ส่งสถานะ rowSelection และ onRowSelectionChange ไปยัง useReactTable

row.getIsSelected() ส่งคืนค่า true เมื่อแถวถูกเลือกอยู่ จึงเหมาะสำหรับใช้กำหนดรูปแบบพื้นหลังที่เน้นแถวที่เลือก

row.getIsSomeSelected() รองรับสถานะช่องทำเครื่องหมายแบบไม่แน่นอน เมื่อเลือกเพียงบางแถวในกลุ่ม (มีประโยชน์สำหรับตารางแบบจัดกลุ่ม)

table.getSelectedRowModel().rows ส่งคืนอาร์เรย์ของอ็อบเจ็กต์แถวทั้งหมดที่เลือกอยู่ในขณะนั้น แต่ละแถวมีพร็อพเพอร์ตี row.original ซึ่งมีอ็อบเจ็กต์ข้อมูลต้นฉบับ

นี่คือวิธีสร้างปุ่มสำหรับการดำเนินการกับหลายรายการที่ทำงานกับชุดข้อมูลที่เลือก เช่น "ลบรายการที่เลือก" หรือ "ส่งออกรายการที่เลือก"

แสดงผลปุ่มการดำเนินการตามเงื่อนไขโดยอิงจาก table.getSelectedRowModel().rows.length > 0 เมื่อไม่มีแถวที่เลือก ให้ซ่อนหรือปิดใช้แถบเครื่องมือการดำเนินการแบบกลุ่ม เพื่อหลีกเลี่ยงการโต้ตอบกับสถานะว่างที่อาจทำให้สับสน

แสดงจำนวนรายการที่เลือกในส่วนติดต่อผู้ใช้: "เลือกแล้ว {count} แถว" เพื่อให้ผู้ใช้ทราบว่ากำลังเลือกอะไรอยู่

การแสดงผล 10,000 แถวเป็นโหนด DOM จำนวนมากนั้นช้ามาก เบราว์เซอร์ต้องจัดวาง วาด และดูแลองค์ประกอบหลายพันรายการ ผู้ใช้จะพบกับการเลื่อนที่กระตุกและการแสดงผลครั้งแรกที่ช้า

การทำเวอร์ชวลไลเซชันจะแสดงผลเฉพาะแถวที่มองเห็นอยู่ในพื้นที่แสดงผล จึงลดขนาด DOM ลงอย่างมากและปรับปรุงประสิทธิภาพ

ติดตั้ง @tanstack/react-virtual พร้อมกับ @tanstack/react-table ไลบรารีทั้งสองแยกจากกัน แต่ได้รับการออกแบบให้ทำงานเสริมกัน TanStack Table จัดการตรรกะข้อมูล ส่วน TanStack Virtual จัดการว่ารายการใดจะแสดงผลใน DOM

จุดเชื่อมต่อระหว่างทั้งสองคืออาร์เรย์แถวจาก table.getRowModel().rows

เรียกใช้ useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }) ค่า count กำหนดจำนวนรายการเสมือนที่มีอยู่ให้ตรงกับจำนวนแถวปัจจุบันของตารางหลังใช้ตัวกรองทั้งหมด

estimateSize ให้ค่าประมาณความสูงแถวเริ่มต้น ส่วนความสูงจริงจะถูกวัดเมื่อแถวแสดงผล

เรียกใช้ virtualizer.getVirtualItems() เพื่อรับเฉพาะแถวที่ควรอยู่ใน DOM ขณะนั้น วนดูอาร์เรย์นี้ เข้าถึงแถวจริงผ่าน table.getRowModel().rows[virtualRow.index] แล้วแสดงผลเฉพาะองค์ประกอบ tr เหล่านั้น

รายการเสมือนแต่ละรายการมีพร็อพเพอร์ตี start สำหรับจัดตำแหน่งแบบสัมบูรณ์ภายในตัวเลื่อน

เพื่อรักษาตำแหน่งการเลื่อนให้ถูกต้อง ให้เพิ่ม div ตัวเว้นระยะด้านบนที่มีความสูงเท่ากับ start ของรายการเสมือนรายการแรก และ div ตัวเว้นระยะด้านล่างที่มีความสูงเท่ากับขนาดทั้งหมดลบด้วย end ของรายการสุดท้าย

div ที่มองไม่เห็นเหล่านี้จะเติมพื้นที่ที่แถวซึ่งไม่ได้แสดงผลควรใช้ ทำให้สัดส่วนของแถบเลื่อนถูกต้อง

ส่ง measureElement: el => el.getBoundingClientRect().height ไปยัง useVirtualizer เพื่อวัดความสูงแถวแบบไดนามิกได้อย่างแม่นยำ โดยผูก ref ของแต่ละแถวเข้ากับองค์ประกอบ tr เพื่อให้ตัวทำเวอร์ชวลไลเซชันวัดความสูงจริงที่แสดงผล

วิธีนี้รองรับแถวที่มีเนื้อหาความสูงต่างกัน (ข้อความหลายบรรทัด แถวที่ขยายได้) โดยไม่ทำให้เค้าโครงเลื่อน

TanStack Table ที่มีการเรียงลำดับ การกรอง การแบ่งหน้า การเลือกแถว และ TanStack Virtual สามารถประกอบทำงานร่วมกันได้ทั้งหมด จำนวนแถวที่ส่งไปยัง useVirtualizer ควรมาจาก table.getRowModel().rows หลังโมเดลแถวที่กำลังใช้งานทั้งหมดประมวลผลข้อมูลแล้ว

เมื่อเปิดใช้การแบ่งหน้า ให้แบ่งหน้าก่อน แล้วจึงทำเวอร์ชวลไลเซชันกับแถวของหน้าปัจจุบัน เพื่อให้เลื่อนดูข้อมูลจำนวนมากในหน้าได้อย่างราบรื่น

การเลือกแถวใช้คอลัมน์ช่องทำเครื่องหมายร่วมกับ getToggleSelectedHandler สถานะ rowSelection และ table.getSelectedRowModel().rows เพื่อเข้าถึงข้อมูลที่เลือก การทำเวอร์ชวลไลเซชันด้วย useVirtualizer จะแสดงผลเฉพาะแถวที่มองเห็น โดยใช้ getVirtualItems, div ตัวเว้นระยะ และ measureElement ซึ่งเป็นตัวเลือกสำหรับความสูงแบบไดนามิก

ฟีเจอร์ทั้งหมดของ TanStack Table (การเรียงลำดับ การกรอง การแบ่งหน้า และการเลือก) ประกอบทำงานร่วมกับการแสดงผลแบบเวอร์ชวลได้อย่างราบรื่น