แนวคิดของ TanStack Table และการออกแบบแบบไร้ส่วนติดต่อ

ไลบรารีส่วนติดต่อผู้ใช้แบบเฮดเลสมีตรรกะ การจัดการสถานะ และพฤติกรรมทั้งหมดที่คุณต้องใช้ แต่จงใจไม่ส่งมอบมาร์กอัปหรือสไตล์ใด ๆ มาให้ คุณเป็นผู้ควบคุมทุกพิกเซลของผลลัพธ์ที่แสดงผล

แนวคิดนี้หมายความว่าคุณไม่ต้องต่อสู้กับการเขียนทับ CSS หรือพยายามฝืนโครงสร้าง DOM ที่ไลบรารีกำหนดมาให้

สำหรับคอมโพเนนต์ตารางแบบดั้งเดิม การเปลี่ยนรูปลักษณ์ต้องเขียนทับสไตล์หลายสิบรายการ และบางครั้งต้องใช้วิธีแก้ขัดกับโครงสร้าง HTML แบบเดิม ไลบรารีแบบเฮดเลสจะส่งมอบข้อมูลและสถานะให้คุณ แล้วไม่เข้ามาขวางทาง

ผลลัพธ์คืออิสระในการออกแบบอย่างเต็มที่ คุณสามารถใช้ Tailwind, โมดูล CSS, Emotion หรือ CSS แบบธรรมดาได้โดยไม่ติดขัด

TanStack Table v8 ทำงานได้กับ React, Vue, Solid, Svelte และแม้แต่ Vanilla JavaScript ตรรกะหลักไม่ขึ้นกับเฟรมเวิร์ก โดยตัวเชื่อมต่อแต่ละแบบจะห่อหุ้มตรรกะนั้นไว้ในฮุกที่คุ้นเคย

นั่นหมายความว่าทักษะสามารถนำไปใช้ข้ามเฟรมเวิร์กได้ และรูปแบบการเรียกใช้งานยังคงสอดคล้องกัน

ใน React คุณเรียก useReactTable({ data, columns, getCoreRowModel }) แล้วฟังก์ชันนี้จะส่งคืนออบเจ็กต์ตาราง ออบเจ็กต์นี้คือหัวใจสำคัญของทุกอย่าง

ออบเจ็กต์นี้เก็บสถานะปัจจุบันทั้งหมด เช่น การเรียงลำดับ การแบ่งหน้า และการเลือก พร้อมเปิดเผยเมธอดช่วยเหลือที่ใช้ขับเคลื่อนการแสดงผล JSX ของคุณ

TanStack Table ไม่เคยแสดงผลแท็ก HTML ใด ๆ แทนคุณ คุณเป็นผู้เขียนองค์ประกอบ table, thead, tbody, tr, th และ td เอง จากนั้นจึงขอให้ออบเจ็กต์ตารางระบุเนื้อหาที่จะใส่ไว้ภายในองค์ประกอบเหล่านั้น

แนวทางนี้แตกต่างจาก AG Grid หรือ Ant Design Table ซึ่งแสดงผล DOM ของตนเองและเปิดให้ปรับแต่งผ่านช่องเฉพาะที่มีอยู่อย่างจำกัด

AG Grid, Material Table และ Ant Design Table มีทั้งกระบวนการแสดงผลแบบครบวงจร สไตล์ในตัว และส่วนติดต่อผู้ใช้สำหรับฟีเจอร์มากมายตั้งแต่เริ่มต้น จึงสร้างต้นแบบได้เร็วกว่า แต่ปรับแต่งในรายละเอียดได้ยากกว่า

TanStack Table ต้องตั้งค่าเริ่มต้นมากกว่า แต่ให้ตารางที่เข้าถึงได้อย่างสมบูรณ์และมีสไตล์สอดคล้องกับแบรนด์ของคุณ โดยไม่ต้องต่อสู้กับการเขียนทับสไตล์

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

คุณจ่ายเฉพาะฟีเจอร์ที่เปิดใช้ ทำให้เหมาะกับแอปพลิเคชันที่ให้ความสำคัญกับประสิทธิภาพ

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

ไม่มีปัญหาการแย่งกันของค่าความจำเพาะ เนื่องจากไม่มีสไตล์ในตัวให้ต้องเขียนทับ

แนวทางแบบเฮดเลสต้องเขียนโค้ดล่วงหน้ามากขึ้น คุณต้องเขียนลูปการแสดงผลเองและเชื่อมต่อตัวจัดการสถานะด้วยตนเอง

อย่างไรก็ตาม เมื่อสร้างคอมโพเนนต์ตารางพื้นฐานแล้ว คุณจะนำกลับมาใช้ซ้ำได้ทั่วทั้งแอปพลิเคชัน พร้อมสไตล์ที่สอดคล้องกัน

ฮุก useReactTable รับออบเจ็กต์การกำหนดค่าที่มีอย่างน้อย data ซึ่งเป็นอาร์เรย์ของออบเจ็กต์ของคุณ columns ซึ่งเป็นอาร์เรย์ ColumnDef และ getCoreRowModel

อินสแตนซ์ตารางที่ส่งคืนมาจะเปิดเผย getHeaderGroups() สำหรับส่วนหัว และ getRowModel().rows สำหรับแถวเนื้อหา ซึ่งคุณนำไปวนแสดงผลใน JSX

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

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

ประโยชน์หลักของไลบรารีส่วนติดต่อผู้ใช้แบบเฮดเลสอย่าง TanStack Table คืออะไร

TanStack Table เป็นไลบรารีตารางแบบเฮดเลสที่ไม่ขึ้นกับเฟรมเวิร์ก โดยมีสถานะและตรรกะให้คุณ แต่ปล่อยให้คุณจัดการการแสดงผลทั้งหมดเอง คุณเรียก useReactTable รับอินสแตนซ์ตาราง แล้ววนใช้เมธอดช่วยเหลือของอินสแตนซ์เพื่อสร้างมาร์กอัปของคุณเอง

นั่นหมายความว่าจะไม่มีความขัดแย้งของสไตล์ มีอิสระในการเลือกใช้เฟรมเวิร์ก CSS อย่างเต็มที่ และมีขนาดบันเดิลที่จ่ายเฉพาะสิ่งที่ใช้งาน