HN परिचय: Airtable-स्टाइल React कंपोनेंट, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2 पॉइंट द्वारा GN⁺ 2023-11-13 | 1 टिप्पणियां | WhatsApp पर शेयर करें

React Datasheet Grid का परिचय

  • React Datasheet Grid, Airtable जैसा एक React कंपोनेंट है, जिससे सुंदर स्प्रेडशीट बनाई जा सकती हैं.
  • Tggl.io के साथ साझेदारी, जो टेक और प्रोडक्ट टीमों को बेहतर गुणवत्ता वाले प्रोडक्ट तेज़ी से लॉन्च करने और conversion rate सुधारने में मदद करती है.
  • उपयोग करना आसान है, और DataSheetGrid कंपोनेंट देता है जिसमें सिर्फ state को connect करना होता है.

उपयोग में आसानी

  • React Datasheet Grid, <input /> से भी इस्तेमाल में आसान है.
  • useState का उपयोग करके स्प्रेडशीट की row state को manage और बदल सकते हैं.

प्रदर्शन

  • virtualized architecture के कारण यह optimized speed के साथ लाखों नहीं तो कम-से-कम सैकड़ों हज़ार rows को आसानी से संभाल सकता है.
  • न्यूनतम rendering के साथ performance optimization, और performance guide का पालन करके DSG की अधिकतम performance का उपयोग किया जा सकता है.

कस्टमाइज़ेशन की क्षमता

  • स्प्रेडशीट के हर behavior को control कर सकते हैं, अपने widgets लागू कर सकते हैं, और DSG style को अपने app के अनुसार customize कर सकते हैं.

फीचर-समृद्ध

  • Excel, Google Sheets, Notion आदि से copy-paste को support करता है.
  • keyboard navigation और shortcuts का पूरा support.
  • right-click और custom context menu का support.
  • selection को बढ़ाने के लिए corner drag का support.
  • स्मूद animations.
  • Typescript में बनाया गया.

GN⁺ की राय

React Datasheet Grid की सबसे महत्वपूर्ण बात यह है कि यह उपयोग में आसानी, बेहतरीन performance, कस्टमाइज़ेशन की क्षमता और कई तरह के फीचर्स प्रदान करता है. यह कंपोनेंट डेवलपर्स को तेज़ और कुशल तरीके से स्प्रेडशीट फीचर्स लागू करने में सक्षम बनाता है, जिससे user experience बेहतर हो सकता है और product development time कम हो सकता है. इन कारणों से यह software developers के लिए एक बेहद दिलचस्प टूल हो सकता है.

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-11-13
Hacker News टिप्पणियाँ

  • प्रोजेक्ट का लक्ष्य feature competition नहीं, बल्कि आसान extensibility देना है — इस पर फोकस करना बहुत समझदारी भरा फैसला है.

    • यह उस अनुभव की याद दिलाता है जब पिछले प्रोजेक्ट्स में ग्राहकों के लिए 'Excel जैसे' features वाले data grid component चुनने पड़ते थे. उनमें बहुत सारे छोटे-छोटे features होते थे, और हर ग्राहक को उन features का अलग subset चाहिए होता था.
    • कई components जटिल होते हैं, लेकिन grid के लिए अपेक्षाएँ बिल्कुल अलग स्तर की होती हैं.
    • कोई भी सब कुछ नहीं कर सकता, इसलिए community की मदद लेना समझदारी है.

  • इस हफ्ते प्रोजेक्ट में 'हर row को dialog से edit' करने वाले interface की जगह inline table editing mode इस्तेमाल करना शुरू किया. यह box से बाहर ही अच्छी तरह काम कर गया, और मैंने हर cell के लिए popover के जरिए validation संभालने वाला अपना column component लिखा.

    • column resizing built-in नहीं है (हालाँकि उपयोग में यह कोई बड़ी समस्या नहीं है).
    • मैं header या gutter पर click करके row या column चुनने की सुविधा को disable करना चाहता था. हो सकता है कि यह library में शामिल करने लायक आम ज़रूरत न हो.

  • DataSheetGrid component को UX/UI का holy grail माना जा सकता है, लेकिन इसमें हर detail शामिल करना वाकई बहुत जटिल है. इसके लिए पूरी सफलता और funding की कामना है. वेब हो या desktop, base platform से आगे भी यही कहानी बार-बार दोहराई जाती दिखती है.

  • यह component अच्छा दिखता है, लेकिन इसमें Airtable या MUI DataGrid जैसे कुछ core features नहीं हैं (sorting/filtering, row/column pinning, aggregate rows, pivot आदि).

    • फिर भी यह एक अच्छा concept है, और एक सही OSS competitor बनाने के लिए शुभकामनाएँ.

  • पहली नज़र में यह बढ़िया लगता है, लेकिन पेज के ऊपर लगातार बदलता हुआ hero text पेज को ऊपर-नीचे हिलाता रहता है, जिससे बाकी हिस्सा पढ़ना मुश्किल हो जाता है. (iOS के Firefox में)

  • क्या किसी को याद है कि DataTables के साथ क्या हुआ था? वह टूल खराब था, फिर भी बहुत इस्तेमाल हुआ, और उसके लेखक ने support के लिए पैसे लेने शुरू कर दिए थे.

  • दूसरे cell पर click करने पर focus rectangle का सचमुच एक जगह से दूसरी जगह खिसकना खटकता है. अगर कुछ cells दूर click करें, तो नीला focus rectangle तेज़ी से नए target की ओर जाता दिखता है. Google ऐसा नहीं करता.

  • यह component सच में बहुत शानदार दिखता है, और इसकी ज़रूरत मुझे एक महीने पहले थी. इसे आज़माने वाला हूँ.

  • iOS में cell में paste नहीं होता, लेकिन typing हो जाती है. क्या यह intended behavior है या bug? क्या desktop version में paste काम करता है?

  • @nick-keller को धन्यवाद. मैंने इसे एक महीने पहले पाया था और यह बहुत promising लगा. range selection default रूप से उपलब्ध है (जबकि कुछ alternative solutions में यह pro feature है), और cells को customize भी किया जा सकता है. लेकिन यह वास्तव में संभव है, यह दिखाने वाला कोई demo नहीं है, इसलिए landing page के 'customizable' section में सिर्फ screenshots से सबसे अच्छे examples दिखाए गए हैं. custom headers और header menus बनाने में मुश्किल आने पर मैं AG-Grid पर चला गया और अपनी range selection खुद implement की.