مقدمة

ياي! ؟ لقد وصلت إلى الجزء الأخير من هذه السلسلة المكونة من جزأين! إذا لم تكن قد قمت بالفعل بمراجعة الجزء الأول، فتوقف هنا واطلع عليه أولاً. لا تقلق، سننتظر حتى تعود! ?

في الجزء الأول، قمنا ببناء مكون CustomTable. يمكنك أن ترى ذلك على أرض الواقع هنا.

في هذا الجزء الثاني، سنقوم بتوسيع المكون لإضافة بعض الميزات الجديدة. إليك ما سنعمل على تحقيقه:

لدعم ذلك، سيحتاج مكون CustomTable إلى بعض التحسينات:

1. القدرة على تنسيق القيمة المعروضة، على سبيل المثال، عرض رقم بالتنسيق المناسب.
2. المرونة للسماح للمستخدمين بتوفير قوالب مخصصة لعرض الصفوف، مما يمنحهم التحكم في كيفية عرض كل عمود.

دعونا نتعمق في إنشاء الميزة الأولى.

توسيع واجهة العمود

سنبدأ بإضافة طريقة تنسيق إلى واجهة العمود للتحكم في كيفية عرض أعمدة معينة لقيمها.

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

سيتم استخدام طريقة التنسيق الاختيارية هذه لتنسيق البيانات عند الضرورة. دعونا نرى كيف يعمل هذا مع مثال من ملف Country.tsx. سنضيف طريقة تنسيق إلى العمود السكاني.

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 لتنسيق السكان كرقم. يمكنك معرفة المزيد عن هذه الطريقة هنا.

بعد ذلك، نحتاج إلى تحديث مكون CustomTable الخاص بنا للتحقق من وظيفة التنسيق وتطبيقها عند وجودها.

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

مع هذا التعديل، يتم الآن عرض العمود السكاني بالتنسيق المناسب. يمكنك أن ترى ذلك على أرض الواقع هنا.

دعم القوالب المخصصة

الآن، دعونا ننفذ الميزة التالية: السماح بالقوالب المخصصة لعرض الأعمدة. للقيام بذلك، سنضيف دعمًا لتمرير JSX كخاصية فرعية أو استخدام خاصيات التصيير، مما يمنح المستهلكين التحكم الكامل في كيفية عرض كل خلية.

أولاً، سنقوم بتوسيع واجهة Props لتشمل خاصية فرعية اختيارية.

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

بعد ذلك، سنقوم بتعديل مكون CustomTable الخاص بنا لدعم هذه الخاصية الجديدة مع الحفاظ على السلوك الحالي.

  {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);
};

مكون صف مخصص

لنقم الآن بإنشاء مكون صف مخصص في ملف Country.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};
};

بعد ذلك، سنقوم بتحديث Country.tsx لتمرير مكون CustomRow هذا إلى CustomTable.

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

بالنسبة إلى People.tsx، الذي لا يحتاج إلى أي قوالب خاصة، يمكننا ببساطة عرض الجدول بدون دعم الأطفال.

const People = () => ;

التحسينات

أحد التحسينات التي يمكننا إجراؤها هو استخدام فهارس المصفوفة كمفاتيح، مما قد يسبب مشكلات. بدلاً من ذلك، دعونا نفرض استخدام مفتاح صف فريد لكل صف.

سنقوم بتوسيع واجهة Props لتتطلب مفتاح صف.

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

الآن، يجب على كل مستهلك لـ CustomTable توفير مفتاح صف لضمان العرض المستقر.

  {(row, column) => }

الكود النهائي

اطلع على الكود الكامل هنا.

خاتمة

في هذه المقالة، قمنا بتوسيع مكون CustomTable المخصص لدينا عن طريق إضافة خيارات التنسيق والقدرة على تمرير قوالب مخصصة للأعمدة. تمنحنا هذه الميزات تحكمًا أكبر في كيفية عرض البيانات في الجداول، مع جعل المكون أيضًا مرنًا وقابلاً لإعادة الاستخدام لحالات استخدام مختلفة.

قمنا أيضًا بتحسين المكون من خلال فرض خاصيةrowKey لتجنب استخدام فهارس المصفوفة كمفاتيح، مما يضمن عرضًا أكثر كفاءة واستقرارًا.

أتمنى أن تجد هذا الدليل مفيدًا! لا تتردد في مشاركة أفكارك في قسم التعليقات.

شكرًا لبقائك معي خلال هذه الرحلة! ?