การกำหนดคอลัมน์และการเรนเดอร์แถว

ทุกคอลัมน์ใน TanStack Table อธิบายด้วยออบเจ็กต์ ColumnDef ฟิลด์ที่สำคัญที่สุดสองรายการคือ accessorKey ซึ่งเป็นชื่อคุณสมบัติในออบเจ็กต์ข้อมูล และ header ซึ่งเป็นสตริงชื่อคอลัมน์หรือฟังก์ชันแสดงผล

แนวทาง accessorKey เหมาะอย่างยิ่งกับข้อมูลแบบแบน ส่วนค่าที่ซับซ้อนหรือคำนวณขึ้นจำเป็นต้องใช้ accessorFn

เมื่อข้อมูลของคุณมีคุณสมบัติโดยตรง เช่น name หรือ email ให้ใช้ accessorKey: 'name' เมื่อจำเป็นต้องคำนวณค่า เช่น การรวม firstName และ lastName ให้ใช้ accessorFn: row => row.firstName + ' ' + row.lastName

ทั้งสองแบบมีชนิดข้อมูลครบถ้วนเมื่อคุณระบุชนิดข้อมูลแถวให้กับ ColumnDef แบบทั่วไป

ฟิลด์ cell ใน ColumnDef รับฟังก์ชันที่ได้รับบริบทของเซลล์และส่งคืน JSX นี่คือวิธีแสดงผลป้ายกำกับ ปุ่ม รูปภาพ หรือส่วนติดต่อผู้ใช้แบบกำหนดเองใด ๆ ภายในเซลล์

สำหรับค่าข้อความธรรมดา cell.renderValue() ก็เพียงพอแล้ว หากต้องการข้อมูลที่ละเอียดขึ้น ให้แยกข้อมูลจาก cell.getContext()

กำหนดคอลัมน์ไว้นอกคอมโพเนนต์เพื่อหลีกเลี่ยงการสร้างคอลัมน์ใหม่ทุกครั้งที่มีการแสดงผล ส่งอาร์เรย์นี้ให้ useReactTable พร้อมกับข้อมูลและ getCoreRowModel

TypeScript จะอนุมานชนิดของคอลัมน์เมื่อคุณระบุชนิดข้อมูลของคุณให้กับ ColumnDef ทำให้มีคำแนะนำการเติมข้อความอัตโนมัติสำหรับค่าของ accessorKey

getCoreRowModel เป็นฟังก์ชันสร้างที่นำเข้าจาก @tanstack/react-table คุณส่งค่าที่ฟังก์ชันนี้ส่งคืนให้ useReactTable เพื่อบอกอินสแตนซ์ว่าจะสร้างรายการแถวพื้นฐานจากอาร์เรย์ข้อมูลของคุณอย่างไร

โมเดลแถวเพิ่มเติม เช่น แถวที่เรียงลำดับ กรองแล้ว หรือแบ่งหน้าแล้ว จะถูกวางซ้อนด้านบนด้วยการส่งฟังก์ชันสร้างโมเดลเพิ่มเติม

เรียก table.getHeaderGroups() แล้ววนผลลัพธ์เพื่อแสดงผล thead แต่ละกลุ่มส่วนหัวมีอาร์เรย์ headers ส่วนหัวแต่ละรายการมีคำจำกัดความคอลัมน์และรหัสประจำตัว

ใช้ flexRender(header.column.columnDef.header, header.getContext()) เพื่อแสดงผลเนื้อหาส่วนหัว ไม่ว่าจะเป็นสตริงหรือฟังก์ชันที่ส่งคืน JSX

เรียก table.getRowModel().rows แล้ววนแต่ละแถวเพื่อแสดงผลองค์ประกอบ tr ภายในนั้นให้เรียก row.getVisibleCells() แล้ววนแต่ละเซลล์เพื่อแสดงผลองค์ประกอบ td

ใช้ flexRender(cell.column.columnDef.cell, cell.getContext()) เพื่อแสดงผลเนื้อหาเซลล์ โดยคำนึงถึงตัวแสดงผลเซลล์แบบกำหนดเองที่ระบุไว้ในคอลัมน์

flexRender เป็นตัวช่วยที่รับได้ทั้งคอมโพเนนต์ React ฟังก์ชันที่ส่งคืน JSX หรือค่าธรรมดา แล้วแสดงผลทั้งหมดอย่างสอดคล้องกัน ช่วยให้คำจำกัดความคอลัมน์ใช้ได้ทั้งสตริงแบบง่ายหรือฟังก์ชันแสดงผลแบบเต็มสำหรับส่วนหัวและเซลล์

ส่วนติดต่อการใช้งานแบบรวมนี้หมายความว่าคุณไม่จำเป็นต้องตรวจสอบชนิดของคำจำกัดความก่อนแสดงผล

cell.renderValue() ส่งคืนค่าดิบจากตัวเข้าถึงในรูปแบบสตริง หากต้องการควบคุมมากขึ้น cell.getContext() จะให้บริบทการแสดงผลทั้งหมด ซึ่งรวมถึงแถว คอลัมน์ อินสแตนซ์ตาราง และค่าดิบ

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

ColumnDef แต่ละรายการรับฟิลด์ข้อมูลกำกับที่คุณสามารถแนบข้อมูลเมตาใด ๆ ได้ เช่น isSticky: true หรือ alignment: 'right' เข้าถึงข้อมูลนี้ในตัวแสดงผลผ่าน column.columnDef.meta

สำหรับการตรึงคอลัมน์ไว้ทางซ้ายหรือขวา TanStack Table มีสถานะการตรึงคอลัมน์และเมธอดช่วยเหลือบนออบเจ็กต์คอลัมน์

กำหนดอาร์เรย์ ColumnDef ด้วย accessorKey, header และ cell ที่เป็นตัวเลือก เรียก useReactTable พร้อม data, columns และ getCoreRowModel วน getHeaderGroups เพื่อแสดงผล thead และวน getRowModel().rows เพื่อแสดงผล tbody โดยใช้ flexRender ในการแสดงผลส่วนหัวและเซลล์แต่ละรายการ

การตั้งค่าขั้นต่ำนี้ให้ตารางที่ทำงานได้เต็มรูปแบบและกำหนดสไตล์เองได้ทั้งหมด

คุณควรใช้ accessorFn แทน accessorKey ในคำจำกัดความคอลัมน์ของ TanStack Table เมื่อใด

กำหนดคอลัมน์โดยใช้ ColumnDef และใช้ accessorKey สำหรับฟิลด์โดยตรง หรือใช้ accessorFn สำหรับค่าที่คำนวณขึ้น ส่ง columns และ getCoreRowModel ให้ useReactTable จากนั้นแสดงผลด้วย getHeaderGroups สำหรับส่วนหัว และ getRowModel().rows สำหรับแถวเนื้อหา

ยูทิลิตี flexRender จัดการคำจำกัดความส่วนหัวและเซลล์ทั้งแบบสตริงและแบบฟังก์ชันให้ทำงานอย่างเป็นรูปแบบเดียวกัน