कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना
अपना डेटा दिखाने के लिए एक्सेसर, हेडर और सेल रेंडरर सहित कॉलम परिभाषाएँ कॉन्फ़िगर करें
कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
ColumnDef प्रकार
TanStack तालिका के प्रत्येक कॉलम का वर्णन एक ColumnDef ऑब्जेक्ट से किया जाता है। दो सबसे महत्वपूर्ण फ़ील्ड accessorKey (आपके डेटा ऑब्जेक्ट में प्रॉपर्टी का नाम) और header (कॉलम लेबल की स्ट्रिंग या रेंडर फ़ंक्शन) हैं।
accessorKey का तरीका सपाट डेटा के लिए आदर्श है; जटिल या गणना किए गए मानों के लिए accessorFn की आवश्यकता होती है।
accessorKey बनाम accessorFn
जब आपके डेटा में name या email जैसी सीधी प्रॉपर्टी हो, तो accessorKey: 'name' का उपयोग करें। जब आपको किसी मान की गणना करनी हो (जैसे firstName और lastName को मिलाना), तो accessorFn: row => row.firstName + ' ' + row.lastName का उपयोग करें।
जब आप ColumnDef को पंक्ति डेटा का जेनेरिक प्रकार देते हैं, तो दोनों पूरी तरह टाइप-सुरक्षित होते हैं।
cell के साथ कस्टम सेल रेंडरिंग
ColumnDef में cell फ़ील्ड एक ऐसा फ़ंक्शन स्वीकार करती है जो सेल संदर्भ प्राप्त करता है और JSX लौटाता है। इसी तरह आप किसी सेल के अंदर बैज, बटन, चित्र या कोई भी कस्टम यूआई रेंडर करते हैं।
साधारण पाठ मानों के लिए cell.renderValue() पर्याप्त है। अधिक समृद्ध सामग्री के लिए cell.getContext() से जानकारी को अलग-अलग निकालें।
कॉलम ऐरे बनाना
हर रेंडर पर कॉलम दोबारा बनाने से बचने के लिए उन्हें कंपोनेंट के बाहर परिभाषित करें। इस ऐरे को अपने डेटा और getCoreRowModel के साथ useReactTable में पास करें।
जब आप ColumnDef को अपने डेटा प्रकार के साथ एनोटेट करते हैं, तो TypeScript कॉलम के प्रकारों का अनुमान लगा लेता है और accessorKey मानों के लिए स्वतः-पूर्णता उपलब्ध कराता है।
getCoreRowModel की व्याख्या
getCoreRowModel @tanstack/react-table से इम्पोर्ट किया गया एक फ़ैक्टरी फ़ंक्शन है। आप इसका लौटाया हुआ मान useReactTable में पास करके इंस्टेंस को बताते हैं कि अपने डेटा ऐरे से पंक्तियों की मूल सूची कैसे बनानी है।
अतिरिक्त पंक्ति मॉडल (क्रमबद्ध, फ़िल्टर की गई और पृष्ठांकित) अतिरिक्त मॉडल फ़ैक्टरी पास करके इनके ऊपर जोड़े जाते हैं।
getHeaderGroups से thead रेंडर करना
table.getHeaderGroups() कॉल करें और परिणाम पर प्रक्रिया चलाकर अपना thead रेंडर करें। प्रत्येक हेडर समूह में headers ऐरे होता है; प्रत्येक हेडर में कॉलम परिभाषा और एक id होता है।
flexRender(header.column.columnDef.header, header.getContext()) का उपयोग करके हेडर सामग्री रेंडर करें, चाहे वह स्ट्रिंग हो या JSX लौटाने वाला फ़ंक्शन।
getRowModel से tbody रेंडर करना
table.getRowModel().rows कॉल करें और प्रत्येक पंक्ति को tr एलिमेंट में मैप करें। इसके अंदर row.getVisibleCells() कॉल करें और प्रत्येक सेल को td में मैप करें।
कॉलम में परिभाषित किसी भी कस्टम सेल रेंडरर का सम्मान करते हुए, सेल की सामग्री रेंडर करने के लिए flexRender(cell.column.columnDef.cell, cell.getContext()) का उपयोग करें।
flexRender उपयोगिता
flexRender एक सहायक है जो रिएक्ट कंपोनेंट, JSX लौटाने वाला फ़ंक्शन या साधारण मान स्वीकार करके उन्हें एकसमान तरीके से रेंडर करता है। इससे कॉलम परिभाषाएँ हेडर और सेल के लिए साधारण स्ट्रिंग या पूर्ण रेंडर फ़ंक्शन, दोनों का उपयोग कर सकती हैं।
इस एकीकृत एपीआई का अर्थ है कि रेंडर करने से पहले आपको परिभाषा के प्रकार की जाँच करने की आवश्यकता नहीं है।
सेल संदर्भ और renderValue
cell.renderValue() accessor से प्राप्त कच्चे मान को स्ट्रिंग के रूप में लौटाता है। अधिक नियंत्रण के लिए cell.getContext() पूरी रेंडरिंग संदर्भ जानकारी उपलब्ध कराता है, जिसमें पंक्ति, कॉलम, तालिका इंस्टेंस और कच्चा मान शामिल हैं।
कस्टम सेल रेंडरर संदर्भ का उपयोग करके एकल accessor मान से आगे की संबंधित पंक्ति का डेटा प्राप्त करते हैं।
कॉलम पिन करना और मेटा
प्रत्येक ColumnDef में एक meta फ़ील्ड होती है, जिसमें आप isSticky: true या alignment: 'right' जैसे मनमाने मेटाडेटा जोड़ सकते हैं। अपने रेंडरर में column.columnDef.meta के ज़रिए इसे प्राप्त करें।
कॉलम को बाईं या दाईं ओर पिन करने के लिए TanStack तालिका कॉलम ऑब्जेक्ट पर कॉलम पिनिंग स्थिति और सहायक विधियाँ उपलब्ध कराती है।
सब कुछ एक साथ जोड़ना
accessorKey, header और वैकल्पिक cell के साथ ColumnDef ऐरे परिभाषित करें। data, columns और getCoreRowModel के साथ useReactTable कॉल करें। thead के लिए getHeaderGroups और tbody के लिए getRowModel().rows पर प्रक्रिया चलाएँ और प्रत्येक हेडर तथा सेल को रेंडर करने के लिए flexRender का उपयोग करें।
यह न्यूनतम सेटअप आपको पूरी तरह कार्यशील और पूरी तरह मनचाही शैली वाली तालिका देता है।
accessorKey बनाम accessorFn
TanStack तालिका की कॉलम परिभाषा में accessorKey की जगह accessorFn का उपयोग आपको कब करना चाहिए?
पाठ का पुनरावलोकन
सीधे फ़ील्ड के लिए accessorKey या गणना किए गए मानों के लिए accessorFn के साथ ColumnDef का उपयोग करके कॉलम परिभाषित करें। columns और getCoreRowModel को useReactTable में पास करें, फिर हेडर के लिए getHeaderGroups और मुख्य भाग की पंक्तियों के लिए getRowModel().rows का उपयोग करके रेंडर करें।
flexRender उपयोगिता स्ट्रिंग और फ़ंक्शन-आधारित हेडर तथा सेल परिभाषाओं, दोनों को एकसमान तरीके से संभालती है।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना” पाठ निःशुल्क है?
हाँ—“कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना” में मैं क्या सीखूँगा?
अपना डेटा दिखाने के लिए एक्सेसर, हेडर और सेल रेंडरर सहित कॉलम परिभाषाएँ कॉन्फ़िगर करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- TanStack Table का दर्शन और हेडलेस डिज़ाइन
- कॉलम परिभाषित करना और पंक्तियाँ रेंडर करना
- सॉर्टिंग, फ़िल्टरिंग और पृष्ठांकन
- पंक्ति चयन और वर्चुअलाइज़्ड तालिकाएँ