แนะนำบน HN: DataSheetGrid คอมโพเนนต์ React สไตล์ Airtable

แนะนำ React Datasheet Grid

• React Datasheet Grid เป็นคอมโพเนนต์ React ที่คล้ายกับ Airtable และสามารถสร้างสเปรดชีตที่สวยงามได้
• ความร่วมมือกับ Tggl.io ซึ่งช่วยให้ทีมเทคนิคและทีมผลิตภัณฑ์ออกผลิตภัณฑ์คุณภาพดีขึ้นได้เร็วขึ้น และปรับปรุงอัตราการแปลง
• มีคอมโพเนนต์ DataSheetGrid ที่ใช้งานง่าย เพียงเชื่อมต่อสถานะก็ใช้งานได้

ความง่ายในการใช้งาน

• React Datasheet Grid ใช้งานง่ายกว่า <input />
• สามารถใช้ useState เพื่อจัดการและเปลี่ยนแปลงสถานะแถวของสเปรดชีตได้

ประสิทธิภาพ

• ความเร็วที่ปรับแต่งมาอย่างเหมาะสมด้วยสถาปัตยกรรม virtualization ที่รองรับหลายแสนแถวได้อย่างง่ายดาย
• ปรับประสิทธิภาพด้วยการเรนเดอร์ให้น้อยที่สุด และสามารถดึงประสิทธิภาพสูงสุดของ DSG ได้โดยทำตามคู่มือประสิทธิภาพ

ความสามารถในการปรับแต่ง

• ควบคุมทุกพฤติกรรมของสเปรดชีตได้ รวมถึงสร้างวิดเจ็ตของตนเองและปรับแต่งสไตล์ของ DSG ให้เข้ากับแอป

ฟีเจอร์ที่ครบครัน

• รองรับการคัดลอกและวางจาก Excel, Google Sheets, Notion เป็นต้น
• รองรับการนำทางด้วยคีย์บอร์ดและคีย์ลัดอย่างสมบูรณ์
• รองรับเมนูคลิกขวาและคอนเท็กซ์เมนูแบบกำหนดเอง
• รองรับการลากมุมเพื่อขยายการเลือก
• แอนิเมชันลื่นไหล
• สร้างด้วย Typescript

ความเห็นของ GN⁺

สิ่งที่สำคัญที่สุดของ React Datasheet Grid คือการมอบความง่ายในการใช้งาน ประสิทธิภาพที่ยอดเยี่ยม ความสามารถในการปรับแต่ง และฟีเจอร์ที่หลากหลาย คอมโพเนนต์นี้ช่วยให้นักพัฒนาสามารถติดตั้งความสามารถด้านสเปรดชีตได้อย่างรวดเร็วและมีประสิทธิภาพ จึงอาจช่วยยกระดับประสบการณ์ผู้ใช้และลดเวลาในการพัฒนาผลิตภัณฑ์ได้ ด้วยเหตุนี้จึงอาจเป็นเครื่องมือที่น่าสนใจอย่างมากสำหรับนักพัฒนาซอฟต์แวร์

[GN⁺]

ความคิดเห็นจาก Hacker News

• การที่เป้าหมายของโปรเจ็กต์นี้โฟกัสที่การขยายต่อได้ง่าย แทนที่จะแข่งกันเรื่องฟีเจอร์ ถือเป็นการตัดสินใจที่ฉลาดมาก

  • ทำให้นึกถึงตอนทำโปรเจ็กต์ก่อนหน้านี้ที่ต้องเลือกคอมโพเนนต์ data grid ที่มีฟีเจอร์ "เหมือน Excel" ตามที่ลูกค้าต้องการ มีฟีเจอร์ยิบย่อยจำนวนมาก และลูกค้าแต่ละรายก็ต้องการเพียงบางส่วนที่แตกต่างกันไป
  • คอมโพเนนต์หลายตัวมีความซับซ้อน แต่ความคาดหวังต่อ grid นั้นอยู่คนละระดับไปเลย
  • ไม่มีใครทำได้ทุกอย่าง และการพึ่งพาความช่วยเหลือจากชุมชนเป็นทางเลือกที่ชาญฉลาด

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

  • ไม่มีฟีเจอร์ปรับขนาดคอลัมน์มาให้ในตัว (แต่ก็ไม่ได้เป็นปัญหาใหญ่ในการใช้งาน)
  • อยากปิดการเลือกแถวหรือคอลัมน์เมื่อคลิกที่ส่วนหัวหรือ gutter อาจไม่ใช่ความต้องการที่ทั่วไปพอจะรวมไว้ในไลบรารี

• คอมโพเนนต์ DataSheetGrid ถูกมองว่าเป็นจอกศักดิ์สิทธิ์ของ UX/UI แต่ก็ซับซ้อนมากจนยากจะใส่รายละเอียดทุกอย่างลงไปได้ ขอให้ประสบความสำเร็จและได้ทุนมาก ๆ เห็นเรื่องแบบนี้เกิดซ้ำแล้วซ้ำเล่า ทั้งบนเว็บและเดสก์ท็อป เมื่อพยายามก้าวข้ามขีดจำกัดของแพลตฟอร์มพื้นฐาน

• คอมโพเนนต์นี้ดูดี แต่ยังขาดฟีเจอร์หลักบางอย่างเหมือนที่ Airtable หรือ MUI DataGrid มีอยู่ เช่น การเรียงลำดับ/การกรอง, การตรึงแถว/คอลัมน์, aggregate row, pivot เป็นต้น

  • ถึงอย่างนั้นก็เป็นแนวคิดที่ดี และขอให้โชคดีกับการสร้างคู่แข่ง OSS ที่เหมาะสม

• แวบแรกดูเท่มาก แต่ข้อความฮีโร่ที่เปลี่ยนตลอดเวลาตรงด้านบนของหน้าทำให้หน้าสั่นขึ้นลง อ่านส่วนที่เหลือได้ยาก (บน Firefox ของ iOS)

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

• รู้สึกรำคาญวิธีที่กรอบโฟกัสเคลื่อนจากจุดหนึ่งไปอีกจุดหนึ่งจริง ๆ เวลาไปคลิกอีกเซลล์หนึ่ง ถ้าคลิกข้ามไปหลายช่อง จะเห็นกรอบโฟกัสสีน้ำเงินวิ่งไปยังตำแหน่งใหม่อย่างรวดเร็ว Google ไม่ได้ทำแบบนี้

• คอมโพเนนต์นี้ดูเจ๋งมาก และฉันน่าจะต้องใช้มันตั้งแต่เดือนก่อน กำลังจะลองใช้ดู

• บน iOS เหมือนจะวางข้อมูลลงในเซลล์ไม่ได้ แต่พิมพ์ได้ นี่เป็นพฤติกรรมที่ตั้งใจไว้หรือเป็นบั๊ก? แล้วบนเดสก์ท็อปวางได้ไหม?

• ขอบคุณ @nick-keller พบสิ่งนี้เมื่อเดือนก่อน และมันดูมีอนาคตมาก การเลือกช่วงทำได้มาให้โดยปริยาย (ในบางโซลูชันทางเลือกมันเป็นฟีเจอร์โปร) และยังปรับแต่งเซลล์ได้ด้วย แต่ไม่มีเดโมที่แสดงให้เห็นอย่างชัดเจนว่าทำได้จริง เลยมีเพียงตัวอย่างที่ดีที่สุดในรูปสกรีนช็อตบนหน้าแลนดิ้งของส่วน "ปรับแต่งได้" สุดท้ายฉันเจอปัญหาในการทำ header แบบกำหนดเองและเมนู header จึงย้ายไปใช้ AG-Grid และทำ range selection เอง