शीर्ष vue.js डेटाटेबल घटक
1. केंडोव्यू ग्रिड
हो सकता है कि आप अपने jQuery के दिनों में केंडो यूआई लाइब्रेरी को जानते हों (हमने किया था!)
अब उनके अधिकांश घटकों के लिए उनके पास Vue रैपर हैं, इसलिए यदि आपको एंटरप्राइज़-स्तरीय UI लाइब्रेरी की आवश्यकता है, तो आपको निश्चित रूप से इसकी जांच करनी चाहिए। लेकिन वे देशी घटकों के साथ भी प्रयोग कर रहे हैं, और Vue.js के साथ ग्राउंड अप से अपने ग्रिड घटक को नवनिर्मित किया है।
बुनियादी सीआरयूडी कार्यों, समूहीकरण, फ़िल्टरिंग, पेजिंग और सामान्य संदिग्धों के अलावा, उनके पास ड्रैग एंड ड्रॉप, स्क्रॉल मोड (वर्चुअल स्क्रॉलिंग सहित), अंतर्राष्ट्रीयकरण और एक्सेल/पीडीएफ निर्यात के साथ स्तंभों को पुन: व्यवस्थित करने जैसी कुछ निफ्टी छोटी विशेषताएं हैं।
हमने इसे उपयोग करना आसान और अच्छी तरह से प्रलेखित पाया!
2 .व्युत्पन्न 2
यदि आप अपने डेटाटेबल्स के आसपास UI फ्रेमवर्क नहीं चाहते हैं या इसकी आवश्यकता नहीं है, तो Vuetable में देखें। Vuetable आपके JSON डेटा को एक साधारण HTML तालिका में बदलने के लिए लेता है जिसे आप स्वतंत्र रूप से स्टाइल कर सकते हैं। आप इसका उपयोग किसी भी CSS फ्रेमवर्क के साथ भी कर सकते हैं, जब तक कि यह HTML टेबल्स को सपोर्ट करता हो।
एपीआई और डेटा मोड के बीच चयन करें और डेटा प्रदान करने वाले समापन बिंदु या आसानी से उपलब्ध डेटा के साथ Vuetable का उपयोग करें। यह सॉर्टिंग, पेजिनेशन, सर्च फिल्टर्स और डिटेल रो को सपोर्ट करता है।
नेटफ्लिक्स कॉम एक्टिवेट डिवाइस
आप जाकर देख सकते हैं Vuetable 2 के लिए ट्यूटोरियल - यह यह भी दिखाता है कि इसके साथ बूटस्ट्रैप का उपयोग कैसे करें, ताकि आप देख सकें कि यह CSS फ्रेमवर्क के साथ कैसे काम करता है।
क्विकबुक पीडीएफ प्रिंटर मरम्मत उपकरण
3. सिंकफ्यूजन वीयू डेटा ग्रिड
सिंकफ्यूजन डेटा ग्रिड उनके व्यापक का हिस्सा है यूआई पुस्तकालय . यह एक वर्कहॉर्स है जो बिना किसी प्रदर्शन हानि के उच्च मात्रा में डेटा को संभाल सकता है।
तालिकाएँ इनलाइन CRUD संचालन, फ़िल्टरिंग, डेटा निर्यात, स्टैक्ड हेडर, पंक्ति समूहीकरण और बहुत कुछ का समर्थन करती हैं। हम विशेष रूप से सिंकफ्यूजन के मोबाइल- और टच-फ्रेंडली होने के साथ-साथ एक्सेसिबिलिटी के लिए WAI-ARIA का समर्थन करना पसंद करते हैं। डेटा बाइंडिंग बहुत लचीला है, क्योंकि यह विभिन्न स्थानीय और दूरस्थ स्रोतों को संभाल सकता है। JSON के साथ मिलकर यह SPAs के लिए एक बढ़िया विकल्प है।
यह ग्रिड एंटरप्राइज़-स्तर और डेटा-भारी अनुप्रयोगों के लिए एकदम सही है। हालाँकि, इसे वहन करने में सक्षम होने के लिए आपको एक उद्यम होने की आवश्यकता नहीं है। Syncfusion की संपूर्ण Vue UI लाइब्रेरी किसके अंतर्गत उपलब्ध है मुक्त सामुदायिक लाइसेंस व्यक्तियों और छोटी कंपनियों के लिए, जो हमारी राय में बहुत बढ़िया है।
4. अग ग्रिड
एग-ग्रिड वास्तव में एक परिष्कृत डेटाटेबल समाधान है। ag अज्ञेयवादी के लिए खड़ा है, जिसका अर्थ है कि यह बहुत सारे JS फ्रेमवर्क के लिए उपलब्ध है।
अगर आपको जटिल टेबल बनाने की ज़रूरत है तो निश्चित रूप से इसे देखें। यह शायद एक छोटी परियोजना के लिए बहुत अधिक है, लेकिन यदि आपको पंक्तियों, समूहीकरण या लाइव अपडेट के लिए ड्रैग-एंड-ड्रॉप जैसे उन्नत कार्यों की आवश्यकता है, तो यह एकदम सही हो सकता है। साथ ही, इसे प्रदर्शन के लिए अनुकूलित किया गया है, यदि आपको बड़े डेटा सेट को संभालना है।
इसे आज़माने के लिए एक मुफ़्त संस्करण है, लेकिन एंटरप्राइज़ एप्लिकेशन के लिए आपको संभवतः एक विस्तारित लाइसेंस की आवश्यकता होगी।
हरोकू वन ऑफ डायनो
5. एनएसओ डेटाटेबल
Enso DataTable आपको JSON टेम्प्लेट के आधार पर जटिल तालिकाएँ बनाने देता है।
यह सर्वर-साइड डेटा लोडिंग और एक्सेल एक्सपोर्ट का समर्थन करता है। आउट-ऑफ-द-बॉक्स फ़ंक्शंस खोज, सॉर्टिंग और पेजिनेशन से लेकर फ्रंट-एंड ट्रांसलेशन और कॉलम दृश्यता के अनुकूलन तक होते हैं।
यह डेटाटेबल अपने लेआउट के लिए बुल्मा का उपयोग करता है, और इसके कुछ कार्यों के लिए कुछ अन्य निर्भरताएँ हैं। आप इसे पूरे एनसो इकोसिस्टम के हिस्से के रूप में उपयोग कर सकते हैं, जो आपको एसपीए बॉयलरप्लेट प्रदान करता है। यदि आपको इसकी आवश्यकता नहीं है, तो आप स्वतंत्र रूप से भी डेटाटेबल का उपयोग कर सकते हैं (लेकिन ऐसा करने के लिए आपको Laravel/Vue के साथ कुछ अनुभव की आवश्यकता है)।
6. डेटाटेबल्स को Vuetify करें
यदि आप पहले से ही अपने ऐप्स के विकास के लिए एक घटक ढांचे का उपयोग करने की योजना बना रहे हैं और आपको डेटाटेबल्स का समर्थन करने वाले एक की आवश्यकता है, तो आपको Vuetify में देखना चाहिए! यह एक मटेरियल डिज़ाइन फ्रेमवर्क है, जो आपको उपयोग के लिए तैयार बहुत सारे घटक प्रदान करता है।
Vuetify के डेटाटेबल लचीले हैं और सॉर्टिंग, सर्चिंग, इनलाइन-एडिटिंग, पेजिनेशन और बहुत कुछ सपोर्ट करते हैं। लोडिंग राज्यों के लिए प्रगति पट्टी जैसी चीजें भी शामिल हैं, और सीआरयूडी क्रियाओं को उनके संवाद घटक के साथ जोड़ा जा सकता है।
7.jQWidgets डेटा ग्रिड
JQWidgets UI फ्रेमवर्क में शामिल डेटा ग्रिड घटक मूल रूप से Google पत्रक जितना शक्तिशाली है। यह छँटाई, फ़िल्टरिंग, ड्रैग एंड ड्रॉप, कस्टम कीबोर्ड नेविगेशन, नेस्टेड ग्रिड, निर्यात और कई अन्य सुविधाओं के साथ एक उत्तरदायी ग्रिड है। यह बड़े डेटासेट के लिए उपयुक्त है जिसे उपयोगकर्ता हेरफेर कर सकते हैं।
JQWidgets ढांचा भी अधिक घटक प्रदान करता है - लेकिन यह मुफ़्त नहीं है। उनके पास बहुत अच्छा है मूल्य निर्धारण हालांकि छोटी परियोजनाओं और एकल डेवलपर्स के लिए भी। यह अकेले ग्रिड घटक के लिए 500 डेमो के साथ आता है, और यह Angular, React और jQuery के लिए भी उपलब्ध है।
8. बफी डेटाटेबल्स
Buefy, Bulma पर आधारित हल्के Vue.js UI घटकों का संग्रह है। यदि आप अपने डेटाटेबल्स के साथ जाने के लिए UI किट की तलाश कर रहे हैं, तो इस लाइब्रेरी पर एक नज़र डालें जो केवल 60KB बड़ी (gzipped/minified) है।
डेटाटेबल घटक छँटाई, पंक्तियों और पृष्ठांकन के लिए विस्तृत दृश्य जैसी बुनियादी सुविधाएँ प्रदान करता है। संकीर्ण या धारीदार पंक्तियों f.ex को चुनकर, सुपाठ्यता को अनुकूलित करने के लिए दृश्यपटल को अच्छी तरह से अनुकूलित किया जा सकता है। घटक बैकएंड से सॉर्टिंग और पेजिंग का भी समर्थन करता है।
9. डेटा टेबल देखें
स्प्रिंग बूट में web.xml
यह तालिका UI टूलकिट पर आधारित है तत्व यूआई , और आसानी से अनुकूलन योग्य होने के लिए बनाया गया था। यह (फ्रंट- और सर्वरसाइड) पेजिनेशन के अलावा बहुत सारे आउट-ऑफ-द-बॉक्स फ़ंक्शन प्रदान नहीं करता है, लेकिन इसकी मुख्य संरचना का उपयोग कस्टम फ़ंक्शंस और क्रियाओं के साथ टेबल बनाने के लिए किया जा सकता है।