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

 (react-datasheet-grid.netlify.app)
2 คะแนน โดย GN⁺ 2023-11-13 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • React Datasheet Grid เป็นคอมโพเนนต์สำหรับใส่ UI แบบสเปรดชีตลงในแอป React โดยสามารถเชื่อม state และการกำหนดคอลัมน์เพื่อสร้างหน้าจอป้อนข้อมูลได้
  • การใช้งานพื้นฐานคือส่ง value, onChange, columns เข้าไปที่ <DataSheetGrid /> โดยมุ่งให้มีโฟลว์ที่เรียบง่ายกว่า <input /> ทั่วไป
  • ด้วย สถาปัตยกรรม virtualization และการปรับแต่งประสิทธิภาพเพื่อลดการเรนเดอร์ให้เหลือน้อยที่สุด จึงรองรับข้อมูลระดับหลายแสนแถว และเหมาะกับ UI ตารางขนาดใหญ่
  • สามารถควบคุมพฤติกรรม วิดเจ็ต และสไตล์ได้ จึง ปรับแต่ง ให้เข้ากับความต้องการของผลิตภัณฑ์ได้
  • รองรับการคัดลอก/วางจาก Excel, Google Sheets, Notion รวมถึงการนำทางด้วยคีย์บอร์ด เมนูคลิกขวา การลากพื้นที่เลือก แอนิเมชัน และพัฒนาด้วย TypeScript

ภาพรวมของ React Datasheet Grid

  • React Datasheet Grid เป็นคอมโพเนนต์สำหรับสร้าง UI แบบสเปรดชีตใน React
  • มีช่องทางติดตั้งและเผยแพร่ผ่าน NPM และ GitHub
  • ตัวอย่างการใช้งานพื้นฐานคือเชื่อม React state เข้ากับ value และ onChange แล้วส่ง columns เข้าไป
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

การใช้งานและประสิทธิภาพ

  • วิธีเริ่มต้น

    • เป็นโครงสร้างที่พร้อมใช้งานได้ทันทีเมื่อเชื่อม state และคอลัมน์เข้าด้วยกัน
    • มีเอกสาร Getting started

  • การจัดการข้อมูลขนาดใหญ่

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

  • การปรับแต่ง

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

ฟีเจอร์ที่รองรับและเอกสาร

  • รองรับการคัดลอก/วางกับ Excel, Google Sheets, Notion
  • รองรับการนำทางด้วยคีย์บอร์ดและคีย์ลัด
  • รองรับการคลิกขวาและเมนูบริบทแบบกำหนดเอง
  • สามารถขยายพื้นที่เลือกด้วยการลากจากมุมได้
  • มีแอนิเมชันที่ลื่นไหล และพัฒนาด้วย TypeScript
  • เอกสารที่เกี่ยวข้องมี Features, Examples, Reference

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-11-13
ความคิดเห็นจาก Hacker News

  • ผมคิดว่าเป้าหมายของโปรเจ็กต์ที่ไม่ไปแข่งกันเรื่องจำนวนฟีเจอร์ แต่ทำให้ ขยายต่อได้ง่าย เป็นการตัดสินใจที่ถูกต้องมาก
    เมื่อกว่า 10 ปีก่อน ผมเคยต้องเลือกคอมโพเนนต์ data grid สำหรับโปรเจ็กต์หนึ่ง และลูกค้าก็ต้องการฟีเจอร์แบบ “เหมือน Excel”
    รายการฟีเจอร์ที่ผู้ขายคอมโพเนนต์น่าจะต้องทำมีมหาศาล และแม้แต่ฟีเจอร์ย่อย “เล็ก ๆ” ก็มีเกิน 200 อย่างได้ไม่ยาก แถมลูกค้าแต่ละรายก็ต้องการชุดย่อยที่ต่างกัน
    คอมโพเนนต์อย่าง date/time picker ก็ซับซ้อนอยู่แล้ว แต่ ความคาดหวังที่มีต่อ grid นั้นอยู่อีกระดับหนึ่งเลย
    ไม่มีใครทำครบทั้งหมดได้อยู่แล้ว ดังนั้นการเปิดให้ชุมชนช่วยต่อยอดจึงเป็นการตัดสินใจที่ฉลาดมาก

    • อยากรู้ว่าเป็นโปรเจ็กต์ที่ใช้ในอุตสาหกรรมแบบไหน พอจะแชร์ได้ไหม

  • สัปดาห์นี้ผมเพิ่งเริ่มใช้ในโปรเจ็กต์ โดยใช้เปลี่ยนอินเทอร์เฟซจากแบบ “แก้ไขแต่ละแถวในกล่องโต้ตอบ” มาเป็น โหมดแก้ไขตารางแบบอินไลน์ และการแก้ไขก็เร็วขึ้นมาก
    ตอนนี้ยังสามารถวางข้อมูลทั้งแถวได้ด้วย และค่าเริ่มต้นก็ใช้งานได้ดีอยู่แล้ว
    ผมเขียนคอมโพเนนต์คอลัมน์เองเพื่อจัดการ validation ด้วย popover ในแต่ละเซลล์
    มีอยู่สองจุดที่ติดขัด: ไม่มี การปรับขนาดคอลัมน์ ในตัว และผมอยากปิดความสามารถในการคลิก header หรือ gutter เพื่อเลือกแถว/คอลัมน์
    อย่างหลังนี่ผมก็ไม่แน่ใจว่าเป็นความต้องการที่พบบ่อยพอจะใส่ไว้ในไลบรารีหรือเปล่า

    • ขอบคุณสำหรับฟีดแบ็ก DSG เป็นเครื่องมือที่ตั้งใจทำเรื่องพื้นฐานให้ดีที่สุด และเปิดให้ผู้ใช้ขยายต่อได้ตามต้องการ
      เรื่องการปรับขนาดคอลัมน์มีการถกเถียงกันมานาน แต่ผมคิดว่ามันไม่ค่อยสอดคล้องกับแนวทางการสร้างเครื่องมือที่เรียบง่ายและใช้งานง่าย
      ผมรู้สึกว่า การปรับขนาดคอลัมน์แบบ responsive น่าจะเป็นจุดสมดุลที่ดีกว่า
      ส่วนไอเดียที่สองดูเหมือนจะทำได้ง่ายจริง
    • การปรับขนาดคอลัมน์เป็นฟีเจอร์ที่ค่อนข้างทั่วไป เลยคิดว่าน่าจะถูกเพิ่มในไม่ช้า

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

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

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

    • ที่นี่ก็เจอปัญหาเดียวกัน หน้าเด้งขึ้นลงแบบสุ่ม ทำให้ดูแล้วหงุดหงิดมาก
      เกิดบน iOS Safari
    • ขอบคุณทุกคนที่รายงานปัญหานี้ ผมไม่เคยเจอด้วยตัวเองมาก่อน และจะรีบแก้เร็ว ๆ นี้
    • บน Firefox iOS ของผมมันแสดงผลได้ปกติดี

  • ใช้ได้ทีเดียว แต่ยังขาดฟีเจอร์หลักบางอย่างที่ Airtable หรือ MUI DataGrid มี เช่น การเรียงลำดับ/การกรอง, การตรึงแถว/คอลัมน์, แถวสรุปผลรวม, pivot เป็นต้น
    แนวคิดดีมาก และหวังว่าจะพัฒนาให้เป็นคู่แข่งโอเพนซอร์สที่ดีของคอมโพเนนต์แบบปิดได้สำเร็จ

    • ขอบคุณสำหรับฟีดแบ็ก DSG ไม่ได้ถูกสร้างมาเพื่อแข่งกันด้วยฟีเจอร์ แต่ตั้งเป้าไปที่ UX/UI ที่ดีที่สุดเท่าที่ทำได้และ ความสามารถในการขยายต่อ
      เพราะงั้นส่วนพวกนั้นต้องทำเพิ่มเอง
      ในอุดมคติแล้ว ผมอยากให้แต่ละฟีเจอร์ใหญ่มี npm package ของตัวเอง แต่จะไปถึงจุดนั้นได้โปรเจ็กต์ก็คงต้องได้รับความสนใจมากกว่านี้อีกมาก

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

    • ผมยังใช้อยู่ และมันก็ยังยอดเยี่ยมทีเดียว
      ผู้เขียนดูแลมันมาโดยรักษา backward compatibility อย่างสมบูรณ์ ได้นานกว่า 10 ปี
      ตอนนี้เราห่อมันด้วย React แล้ว และหลังจากนั้นก็เขียนใหม่ด้วย React แต่ยังคง API การสื่อสารเดิมไว้เพื่อไม่ต้องเปลี่ยน server endpoint
    • โชคดีที่ดูเหมือนมันจะค่อย ๆ ถอยไปพร้อมกับ jQuery เป็นส่วนใหญ่แล้ว

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

  • ทำได้ดีและดูดี แต่ผมก็หวังว่าสิ่งใหม่ ๆ ที่ออกมาจะไม่ใช่ React-based ไปซะทั้งหมด
    ผมจะไปหาเครื่องมือเว็บใหม่ ๆ ที่เจ๋งและเอาไปใช้ในโปรเจ็กต์ได้โดยไม่ต้องพึ่งความบ้าความซับซ้อนของ React ได้จากที่ไหน?
    ผมไม่ค่อยชอบวิธีติดตั้งอะไรผ่าน npm

  • @nick-keller ขอบคุณที่ทำสิ่งนี้ขึ้นมา ผมรู้จักมันเมื่อเดือนก่อนและคิดว่าดูมีอนาคตมาก
    มันมี การเลือกช่วงข้อมูล มาให้ตั้งแต่ต้น ซึ่งในบางตัวเลือกอื่นเป็นฟีเจอร์เสียเงิน แถมยังปรับแต่งเซลล์ได้ด้วย
    แต่ตัวอย่างที่แสดงให้เห็นได้ดีที่สุดว่ามันสร้างอะไรได้บ้างกลับเป็นแค่ภาพหน้าจอในส่วน “customizable” บนหน้าแลนดิ้งเพจ โดยไม่มีเดโมที่ลองได้จริง
    ผมเคยพยายามทำ custom header และ header menu แล้วติดปัญหา สุดท้ายเลยย้ายไป AG-Grid และทำการเลือกช่วงข้อมูลเอง

    • ผมอาจต้องทำตัวอย่างเพิ่ม ดูเหมือนนั่นจะเป็นวิธีที่มีประสิทธิภาพที่สุดในการช่วยผู้คน

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