HN परिचय: Airtable-शैली का React कंपोनेंट, DataSheetGrid

 (react-datasheet-grid.netlify.app)
2 पॉइंट द्वारा GN⁺ 2023-11-13 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • React Datasheet Grid React ऐप्स में स्प्रेडशीट-जैसा UI जोड़ने के लिए एक कंपोनेंट है, जिसमें state और column definitions को जोड़कर data entry स्क्रीन बनाई जा सकती है
  • बेसिक उपयोग में value, onChange, और columns को <DataSheetGrid /> में पास किया जाता है, और इसका उद्देश्य सामान्य <input /> की तुलना में अधिक सरल flow देना है
  • virtualization architecture और minimal rendering optimization की वजह से यह लाखों नहीं बल्कि सैकड़ों हजार rows तक संभाल सकता है, इसलिए बड़े table UI के लिए उपयुक्त है
  • behavior, widget, और style को नियंत्रित किया जा सकता है, इसलिए product requirements के अनुसार customization संभव है
  • Excel, Google Sheets, Notion copy/paste, keyboard navigation, context menu, selection area drag, animation, और TypeScript-आधारित implementation को सपोर्ट करता है

React Datasheet Grid का अवलोकन

  • React Datasheet Grid React में spreadsheet UI बनाने के लिए एक कंपोनेंट है
  • installation और distribution channels के रूप में NPM और GitHub उपलब्ध हैं
  • बेसिक उपयोग का उदाहरण React state को value और onChange से जोड़कर columns पास करने का है
    • const [rows, setRows] = useState([])
    • <DataSheetGrid value={rows} onChange={setRows} columns={columns} />

उपयोगिता और performance

  • शुरू करने का तरीका

    • state और columns को जोड़ते ही इसे तुरंत इस्तेमाल किया जा सकता है
    • इसके लिए Getting started दस्तावेज़ उपलब्ध है

  • बड़े पैमाने पर प्रोसेसिंग

    • DSG गति के लिए optimized है, और virtualization architecture की वजह से यह सैकड़ों हजार rows प्रोसेस कर सकता है
    • rendering को न्यूनतम रखने के लिए optimize किया गया है, और performance को और बेहतर बनाने के लिए performance guides उपलब्ध हैं

  • customization

    • spreadsheet के behavior को नियंत्रित किया जा सकता है
    • अपने widget implement किए जा सकते हैं
    • ऐप के अनुसार DSG की style बदली जा सकती है

समर्थित फीचर्स और दस्तावेज़

  • Excel, Google Sheets, और Notion के साथ copy/paste को सपोर्ट करता है
  • keyboard navigation और shortcuts को सपोर्ट करता है
  • right-click और custom context menu को सपोर्ट करता है
  • कोने को drag करके selection area को बढ़ाया जा सकता है
  • smooth animation प्रदान करता है, और TypeScript में implement किया गया है
  • संबंधित दस्तावेज़ों में Features, Examples, और Reference उपलब्ध हैं

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

1 टिप्पणियां

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

  • फीचर प्रतिस्पर्धा करने के बजाय इसे आसानी से extensible बनाने का प्रोजेक्ट लक्ष्य वाकई सही फैसला लगता है
    10 साल से भी पहले मुझे एक प्रोजेक्ट में इस्तेमाल के लिए data grid component चुनना था, और ग्राहक “Excel जैसा” फीचर सेट चाहते थे
    component vendors को जो संभावित फीचर्स बनाने पड़ते, उनकी सूची बेहद लंबी थी, और सिर्फ “छोटे” अलग-अलग फीचर ही आसानी से 200 से ऊपर थे, जबकि हर ग्राहक को उनका अलग subset चाहिए था
    date/time picker जैसे components भी जटिल होते हैं, लेकिन grid से जुड़ी अपेक्षाएँ पूरी तरह अलग स्तर की होती हैं
    कोई भी सब कुछ नहीं कर सकता, इसलिए community को मदद करने देना बहुत समझदारी की बात है

    • जानना चाहूँगा कि यह किस इंडस्ट्री में इस्तेमाल होने वाला प्रोजेक्ट था

  • मैंने इसे इस हफ्ते अपने प्रोजेक्ट में इस्तेमाल करना शुरू किया, जहाँ “हर row को dialog में edit करने” वाले interface को inline table editing mode में बदलना था, और editing काफी तेज़ हो गई
    row paste जैसी चीज़ें भी अब संभव हैं, और यह default state में भी अच्छी तरह काम करता है
    हर cell के लिए popover validation संभालने के लिए मैंने column components खुद लिखे
    मुझे दो दिक्कतें मिलीं: built-in column resizing नहीं है, और मैं header या gutter पर click करके row/column select करने की सुविधा बंद करना चाहता था
    यकीन नहीं कि दूसरी बात library में शामिल करने लायक इतनी आम ज़रूरत है या नहीं

    • feedback के लिए धन्यवाद। DSG एक ऐसा टूल है जिसे बुनियादी कामों को यथासंभव अच्छे से करने और users को अपनी ज़रूरत के मुताबिक extend करने के लिए बनाया गया है
      column resizing पर लंबे समय से बहस होती रही है, लेकिन मुझे लगता है कि यह इस्तेमाल में आसान, सरल टूल बनाने की दिशा से मेल नहीं खाता
      responsive column sizing मुझे बेहतर समझौता लगता है
      दूसरा विचार वास्तव में काफ़ी आसानी से implement किया जा सकता है
    • column resizing काफ़ी आम फीचर है, इसलिए लगता है शायद यह जल्दी जुड़ जाएगा

  • DataSheetGrid जैसे components UX/UI की holy grail जैसे लगते हैं, लेकिन याद है कि इसकी सारी बारीकियाँ पूरी करना सच में बहुत जटिल होता है
    सफलता और funding के लिए शुभकामनाएँ
    मैंने web हो या desktop, underlying platform चाहे जो भी हो, वही चीज़ बार-बार दोहराई जाती देखी है, और [1] जैसी चीज़ों की अच्छी यादें हैं
    [1] https://www.infragistics.com/

    • सहमत हूँ। बहुत सारा दोहराव वाला data input करने के लिए यह सबसे बेहतरीन UI है
      बेशक मैं यह दावा नहीं कर रहा कि मैंने कुछ नया invent किया है
      अच्छे शब्दों के लिए धन्यवाद, और open source funding आसान नहीं है

  • पहली नज़र में अच्छा लगता है, लेकिन ऊपर का लगातार बदलता hero text 3 लाइन और 4 लाइन के बीच उछलता रहता है, जिससे page ऊपर-नीचे हिलता रहता है और बाकी content पढ़ना थोड़ा मुश्किल हो जाता है
    Firefox iOS में ऐसा हो रहा है

    • यहाँ भी वही समस्या है, और page का यूँ मनमाने ढंग से ऊपर-नीचे कूदना देखना बहुत झुंझलाहट भरा है
      iOS Safari में हो रहा है
    • इस समस्या की जानकारी देने वाले सभी लोगों का धन्यवाद। मैंने खुद इसका सामना नहीं किया था, जल्द ही इसे ठीक करूँगा
    • Firefox iOS में तो वास्तव में सब ठीक दिख रहा है

  • ठीक है, लेकिन Airtable या MUI DataGrid जैसी चीज़ों के कुछ मुख्य फीचर इसमें नहीं हैं: sorting/filtering, row/column pinning, aggregation rows, pivot वगैरह
    concept अच्छा है, और उम्मीद है कि यह proprietary components के लिए एक सही open source competitor बनता जाएगा

    • feedback के लिए धन्यवाद। DSG को फीचर्स से प्रतिस्पर्धा करने के लिए नहीं, बल्कि सर्वश्रेष्ठ UX/UI और extensibility को लक्ष्य बनाकर बनाया गया है
      इसलिए ऐसी चीज़ें आपको खुद implement करनी होंगी
      आदर्श रूप में, हर बड़े फीचर के लिए npm packages बनें, लेकिन उसके लिए प्रोजेक्ट को कहीं ज़्यादा attention मिलनी होगी

  • DataTables का क्या हुआ? किसी को याद है? वह टूल खास अच्छा नहीं था, फिर भी हर जगह इस्तेमाल होता था, इसलिए उसके author को support fees मिल जाती थीं

    • मैं अब भी इसका इस्तेमाल करता हूँ, और यह अभी भी काफ़ी शानदार है
      author ने 10 साल से भी ज़्यादा समय तक perfect backward compatibility बनाए रखते हुए इसे maintain किया है
      अब हमने इसे React में wrap कर दिया है, और बाद में React में फिर से rewrite भी किया, लेकिन server endpoints बदलने से बचने के लिए communication API वही रखा
    • शुक्र है, लगता है कि jQuery के साथ यह ज़्यादातर पीछे छूट गया

  • क्या सिर्फ मुझे ही यह खटकता है कि जब किसी दूसरे cell पर click करते हैं तो focus rectangle सचमुच एक जगह से दूसरी जगह सरकता हुआ जाता है?
    अगर कुछ cells दूर वाले cell पर click करें तो नीला focus rectangle नए target तक फिसलता हुआ खास तौर पर साफ़ दिखता है
    Google ऐसा नहीं करता

  • यह अच्छी तरह बनाया गया है और दिखने में भी अच्छा है, लेकिन काश हर नई चीज़ React-based न होती
    मुझे अपने प्रोजेक्ट्स के लिए ऐसे शानदार नए web tools कहाँ मिलेंगे जिन्हें इस्तेमाल करने के लिए React की जटिल पागलपन की ज़रूरत न हो?
    npm से कुछ install करने का तरीका मुझे खास पसंद नहीं है

  • @nick-keller, इसे बनाने के लिए धन्यवाद। मुझे इसके बारे में एक महीने पहले पता चला था और यह काफ़ी promising लगा
    इसमें default रूप से range selection है, जो कुछ alternatives में paid feature होता है, और cells भी customize किए जा सकते हैं
    लेकिन इससे क्या बनाया जा सकता है, इसका सबसे अच्छा उदाहरण landing page के “customizable” section का screenshot है, जबकि ऐसा वाकई संभव है यह दिखाने वाला demo नहीं है
    custom headers और header menus बनाते समय मुझे दिक्कतें आईं, इसलिए मैं AG-Grid पर चला गया और range selection खुद implement किया

    • शायद मुझे और examples implement करने चाहिए। लगता है लोगों की मदद करने का सबसे असरदार तरीका वही होगा

  • iOS पर cells में paste नहीं हो रहा, लेकिन input होना लगता है
    समझ नहीं आ रहा कि यह intended behavior है या bug
    desktop version में paste किया जा सकता है क्या?