การเรียงลำดับ การกรอง และการแบ่งหน้า

หากต้องการเพิ่มการเรียงลำดับ ให้นำเข้า getSortedRowModel และเพิ่มลงในการกำหนดค่า useReactTable นอกจากนี้ คุณต้องมีสถานะการเรียงลำดับ (อาร์เรย์ของอ็อบเจ็กต์ {id, desc}) และตัวจัดการ onSortingChange ที่เชื่อมต่อกับสถานะของ React

โมเดลแถวที่เรียงลำดับจะห่อหุ้มโมเดลแถวหลัก และจัดเรียงแถวใหม่ตามสถานะการเรียงลำดับปัจจุบัน

หัวคอลัมน์แต่ละคอลัมน์มี column.getToggleSortingHandler() ซึ่งคุณนำไปผูกกับ onClick ขององค์ประกอบ th การคลิกจะวนไปตามสถานะเรียงจากน้อยไปมาก เรียงจากมากไปน้อย และไม่เรียงลำดับ

column.getIsSorted() ส่งคืนค่า 'asc', 'desc' หรือ false ทำให้คุณแสดงลูกศรบอกสถานะการเรียงลำดับที่เหมาะสมได้

TanStack Table รองรับการเรียงลำดับหลายคอลัมน์พร้อมกัน ผู้ใช้กดปุ่ม Shift ค้างไว้ขณะคลิกหัวคอลัมน์ที่สอง เพื่อเพิ่มคอลัมน์นั้นลงในอาร์เรย์การเรียงลำดับโดยไม่ลบคอลัมน์แรก

อาร์เรย์ sortingState มีคอลัมน์ที่กำลังเรียงลำดับทั้งหมดตามลำดับความสำคัญ และโมเดลแถวที่เรียงลำดับจะนำกฎเหล่านั้นไปใช้ตามลำดับ

เปิดใช้การกรองข้อมูลแบบรวมโดยนำเข้า getFilteredRowModel และเพิ่มสถานะ globalFilter พร้อมตัวจัดการ onGlobalFilterChange เชื่อมองค์ประกอบรับข้อมูลเข้ากับสถานะเพื่อกรองข้อมูลจากทุกคอลัมน์พร้อมกัน

โดยค่าเริ่มต้น ตัวกรองแบบรวมใช้กลยุทธ์การจับคู่แบบคลุมเครือหรือการตรวจว่ามีข้อความอยู่ ซึ่งกำหนดค่าได้ผ่าน filterFns

คอลัมน์แต่ละคอลัมน์สามารถมีตัวกรองของตนเองผ่าน column.getFilterValue() และ column.setFilterValue() ให้เพิ่มช่องรับข้อมูลสำหรับตัวกรองไว้ใต้หัวคอลัมน์แต่ละคอลัมน์ แล้วเชื่อมช่องดังกล่าวเข้ากับเมธอดเหล่านี้

ตัวกรองคอลัมน์และตัวกรองแบบรวมจะทำงานซ้อนกัน ดังนั้นแถวที่จะปรากฏในโมเดลแถวที่ผ่านการกรองต้องผ่านตัวกรองที่กำลังใช้งานอยู่ทั้งหมด

นำเข้า getPaginationRowModel และเพิ่มลงในการกำหนดค่า useReactTable พร้อมอ็อบเจ็กต์สถานะการแบ่งหน้า (pageIndex และ pageSize) และตัวจัดการ onPaginationChange

โมเดลแถวสำหรับการแบ่งหน้าจะแบ่งแถวที่ผ่านการกรอง (และการเรียงลำดับ) แล้วออกมาเฉพาะส่วนของหน้าปัจจุบัน

อินสแตนซ์ของตารางมี table.nextPage(), table.previousPage(), table.firstPage() และ table.lastPage() สำหรับการนำทาง ใช้ table.getCanNextPage() และ table.getCanPreviousPage() เพื่อปิดใช้ปุ่มเมื่ออยู่ที่ขอบเขตของหน้า

table.setPageIndex(n) จะข้ามไปยังหน้าที่ระบุโดยตรง ส่วน table.setPageSize(n) จะเปลี่ยนจำนวนแถวที่ปรากฏในแต่ละหน้า

table.getPageCount() ส่งคืนจำนวนหน้าทั้งหมด โดยคำนวณจากจำนวนแถวที่ผ่านการกรองหารด้วย pageSize ส่วน table.getState().pagination.pageIndex จะให้ดัชนีหน้าปัจจุบันที่เริ่มนับจากศูนย์

ใช้ค่าเหล่านี้สร้างตัวนับหน้าในส่วนติดต่อผู้ใช้สำหรับการแบ่งหน้าได้ เช่น "หน้า 3 จาก 12"

โมเดลแถวสามารถประกอบกันได้ดังนี้ getCoreRowModel เป็นพื้นฐาน, getFilteredRowModel ห่อหุ้มโมเดลนั้นพร้อมใช้ตัวกรอง, getSortedRowModel ห่อหุ้มข้อมูลที่ผ่านการกรองพร้อมเรียงลำดับ และ getPaginationRowModel แบ่งผลลัพธ์ออกมาเป็นหน้าปัจจุบัน

ลำดับมีความสำคัญ: การเรียงลำดับจะเกิดหลังการกรอง และการแบ่งหน้าจะเกิดเป็นขั้นตอนสุดท้าย

TanStack Table จดจำผลการคำนวณของโมเดลแถวไว้ภายใน การเรียงลำดับและการกรองชุดข้อมูลขนาดใหญ่จึงมีประสิทธิภาพ เพราะจะคำนวณโมเดลแถวใหม่เฉพาะส่วนที่เปลี่ยนแปลงเท่านั้น

สำหรับชุดข้อมูลขนาดใหญ่มาก (มากกว่า 100,000 แถว) ให้ใช้การแบ่งหน้าร่วมกับการทำเวอร์ชวลไลเซชัน (react-virtual) เพื่อหลีกเลี่ยงการแสดงผลแถวทั้งหมดของหน้าในคราวเดียว

เชื่อม getSortedRowModel เข้ากับสถานะการเรียงลำดับ, getFilteredRowModel เข้ากับ globalFilter และสถานะตัวกรองคอลัมน์ และ getPaginationRowModel เข้ากับสถานะการแบ่งหน้า แต่ละฟีเจอร์เปิดใช้ได้ตามต้องการและประกอบร่วมกับฟีเจอร์อื่นได้อย่างราบรื่น

หัวคอลัมน์ควบคุมการเรียงลำดับผ่าน getToggleSortingHandler ช่องรับข้อมูลควบคุมการกรองผ่าน setFilterValue และ onGlobalFilterChange ส่วนปุ่มควบคุมการแบ่งหน้าผ่าน nextPage, previousPage และ setPageIndex

อ็อบเจ็กต์ใดเก็บดัชนีหน้าปัจจุบันและขนาดหน้าไว้ในสถานะการแบ่งหน้าของ TanStack Table

การเรียงลำดับต้องใช้ getSortedRowModel สถานะการเรียงลำดับ และตัวจัดการการคลิกที่หัวคอลัมน์ การกรองใช้ getFilteredRowModel ร่วมกับสถานะตัวกรองแบบรวมและตัวกรองรายคอลัมน์ การแบ่งหน้าใช้ getPaginationRowModel ร่วมกับสถานะ pageIndex และ pageSize

โมเดลแถวทั้งสามประกอบกันโดยอัตโนมัติ: กรองก่อน เรียงลำดับเป็นขั้นที่สอง และแบ่งหน้าเป็นขั้นสุดท้าย