परिचय

वाह! ? आप इस दो-भाग वाली श्रृंखला के अंतिम भाग तक पहुंच गए हैं! यदि आपने अभी तक भाग 1 नहीं देखा है, तो यहीं रुकें और पहले उसे पढ़ें। चिंता न करें, हम आपके वापस आने तक इंतजार करेंगे! ?

भाग 1 में, हमने कस्टमटेबल घटक बनाया। आप इसे यहां क्रियान्वित होते हुए देख सकते हैं।

इस दूसरे भाग में, हम कुछ नई सुविधाएँ जोड़ने के लिए घटक का विस्तार करेंगे। हम इस दिशा में काम करेंगे:

इसका समर्थन करने के लिए, कस्टमटेबल घटक को कुछ संवर्द्धन की आवश्यकता होगी:

1. रेंडर किए गए मान को फ़ॉर्मेट करने की क्षमता—उदाहरण के लिए, उचित फ़ॉर्मेटिंग के साथ किसी संख्या को रेंडर करना।
2. उपयोगकर्ताओं को पंक्तियों को प्रस्तुत करने के लिए कस्टम टेम्पलेट प्रदान करने की सुविधा, जिससे उन्हें प्रत्येक कॉलम प्रदर्शित होने के तरीके पर नियंत्रण मिलता है।

आइए पहली सुविधा के निर्माण में उतरें।

कॉलम इंटरफ़ेस का विस्तार

हम कॉलम इंटरफ़ेस में एक प्रारूप विधि जोड़कर शुरू करेंगे ताकि यह नियंत्रित किया जा सके कि विशिष्ट कॉलम अपने मानों को कैसे प्रस्तुत करते हैं।

interface Column {
  id: keyof T;
  label: string;
  format?: (value: string | number) => string;
}

इस वैकल्पिक प्रारूप पद्धति का उपयोग आवश्यक होने पर डेटा को प्रारूपित करने के लिए किया जाएगा। आइए देखते हैं कि यह कंट्री.टीएसएक्स फ़ाइल के एक उदाहरण के साथ कैसे काम करता है। हम जनसंख्या कॉलम में एक प्रारूप विधि जोड़ देंगे।

const columns: Column[] = [
  { id: "name", label: "Name" },
  { id: "code", label: "ISO\u00a0Code" },
  {
    id: "population",
    label: "Population",
    format: (value) => new Intl.NumberFormat("en-US").format(value as number),
  },
  {
    id: "size",
    label: "Size\u00a0(km\u00b2)",
  },
  {
    id: "density",
    label: "Density",
  },
];

यहां, हम जनसंख्या को एक संख्या के रूप में प्रारूपित करने के लिए JavaScript Intl.NumberFormat विधि का उपयोग कर रहे हैं। आप इस विधि के बारे में यहां अधिक जान सकते हैं।

इसके बाद, हमें प्रारूप फ़ंक्शन की जांच करने और उसके मौजूद होने पर इसे लागू करने के लिए अपने कस्टमटेबल घटक को अपडेट करने की आवश्यकता है।

  {rows.map((row, index) => (
    
      {columns.map((column, index) => (
        
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        
      ))}
    
  ))}

इस संशोधन के साथ, जनसंख्या कॉलम अब उचित स्वरूपण के साथ प्रस्तुत होता है। आप इसे यहां क्रियान्वित होते हुए देख सकते हैं।

कस्टम टेम्प्लेट का समर्थन करना

अब, अगली सुविधा लागू करते हैं: कॉलम प्रस्तुत करने के लिए कस्टम टेम्पलेट की अनुमति देना। ऐसा करने के लिए, हम JSX को चिल्ड्रन प्रोप के रूप में पास करने या रेंडर प्रॉप्स का उपयोग करने के लिए समर्थन जोड़ेंगे, जिससे उपभोक्ताओं को प्रत्येक सेल को कैसे प्रस्तुत किया जाता है, इस पर पूरा नियंत्रण मिलेगा।

सबसे पहले, हम एक वैकल्पिक चिल्ड्रेन प्रोप को शामिल करने के लिए प्रॉप्स इंटरफ़ेस का विस्तार करेंगे।

interface Props {
  rows: T[];
  columns: Column[];
  children?: (row: T, column: Column) => React.ReactNode;
}

इसके बाद, हम मौजूदा व्यवहार को संरक्षित करते हुए इस नए प्रोप का समर्थन करने के लिए अपने कस्टमटेबल घटक को संशोधित करेंगे।

  {columns.map((column, index) => (
    
      {children
        ? children(row, column)
        : column.format
        ? column.format(row[column.id] as string)
        : row[column.id]}
    
  ))}

यह सुनिश्चित करता है कि यदि चिल्ड्रन प्रोप पारित हो जाता है, तो कस्टम टेम्पलेट का उपयोग किया जाता है; अन्यथा, हम डिफ़ॉल्ट व्यवहार पर वापस आ जाते हैं।

आइए इसे अधिक पुन: प्रयोज्य बनाने के लिए कोड को दोबारा तैयार करें:

const getFormattedValue = (column, row) => {
  const value = row[column.id];
  return column.format ? column.format(value) : value as string;
};

const getRowTemplate = (row, column, children) => {
  return children ? children(row, column) : getFormattedValue(column, row);
};

कस्टम पंक्ति घटक

अब कंट्रीज.tsx फ़ाइल में एक कस्टम पंक्ति घटक बनाते हैं। हम विशेष रेंडरिंग लॉजिक को संभालने के लिए एक CustomRow घटक बनाएंगे।

interface RowProps {
  row: Country;
  column: Column;
}

const CustomRow = ({ row, column }: RowProps) => {
  const value = row[column.id];
  if (column.format) {
    return {column.format(value as string)};
  }
  return {value};
};

फिर, हम इस CustomRow घटक को CustomTable में पास करने के लिए Cultures.tsx को अपडेट करेंगे।

const Countries = () => (
  
    {(row, column) => }
  
);

People.tsx के लिए, जिसे किसी विशेष टेम्पलेट की आवश्यकता नहीं है, हम आसानी से बच्चों के प्रोप के बिना तालिका प्रस्तुत कर सकते हैं।

const People = () => ;

सुधार

एक सुधार जो हम कर सकते हैं वह है कुंजी के रूप में ऐरे इंडेक्स का उपयोग, जो समस्याएं पैदा कर सकता है। इसके बजाय, आइए प्रत्येक पंक्ति के लिए एक अद्वितीय rowKey का उपयोग लागू करें।

हम rowKey की आवश्यकता के लिए प्रॉप्स इंटरफ़ेस का विस्तार करेंगे।

interface Props {
  rowKey: keyof T;
  rows: T[];
  columns: Column[];
  children?: (row: T, column: Column) => React.JSX.Element | string;
  onRowClick?: (row: T) => void;
}

अब, कस्टमटेबल के प्रत्येक उपभोक्ता को स्थिर रेंडरिंग सुनिश्चित करने के लिए एक rowKey प्रदान करनी होगी।

  {(row, column) => }

अंतिम कोड

यहां पूरा कोड देखें।

निष्कर्ष

इस लेख में, हमने फ़ॉर्मेटिंग विकल्प और कॉलम के लिए कस्टम टेम्पलेट पास करने की क्षमता जोड़कर अपने कस्टम कस्टमटेबल घटक का विस्तार किया। ये सुविधाएँ हमें तालिकाओं में डेटा कैसे प्रस्तुत किया जाता है, इस पर अधिक नियंत्रण प्रदान करती हैं, साथ ही विभिन्न उपयोग के मामलों के लिए घटक को लचीला और पुन: प्रयोज्य बनाती हैं।

हमने एरे इंडेक्स को कुंजी के रूप में उपयोग करने से बचने के लिए rowKey प्रोप को लागू करके घटक में भी सुधार किया है, और अधिक कुशल और स्थिर रेंडरिंग सुनिश्चित की है।

मुझे आशा है कि आपको यह मार्गदर्शिका उपयोगी लगी होगी! बेझिझक अपने विचार टिप्पणी अनुभाग में साझा करें।

इस यात्रा में मेरे साथ बने रहने के लिए धन्यवाद! ?