Einführung

Juhuu! ? Sie haben es zum letzten Teil dieser zweiteiligen Serie geschafft! Wenn Sie Teil 1 noch nicht gelesen haben, hören Sie hier auf und gehen Sie diesen zuerst durch. Keine Sorge, wir warten, bis Sie zurück sind! ?

In Teil 1 haben wir die CustomTable-Komponente erstellt. Sie können es hier in Aktion sehen.

In diesem zweiten Teil erweitern wir die Komponente um einige neue Funktionen. Hier ist, worauf wir hinarbeiten werden:

Um dies zu unterstützen, benötigt die CustomTable-Komponente einige Verbesserungen:

1. Die Möglichkeit, den gerenderten Wert zu formatieren – z. B. das Rendern einer Zahl mit der richtigen Formatierung.
2. Flexibilität, um Benutzern die Bereitstellung benutzerdefinierter Vorlagen zum Rendern von Zeilen zu ermöglichen und ihnen die Kontrolle darüber zu geben, wie jede Spalte angezeigt wird.

Lassen Sie uns mit der Erstellung des ersten Features beginnen.

Erweitern der Spaltenschnittstelle

Wir beginnen mit dem Hinzufügen einer Formatmethode zur Spaltenschnittstelle, um zu steuern, wie bestimmte Spalten ihre Werte rendern.

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

Diese optionale Formatierungsmethode wird bei Bedarf zum Formatieren von Daten verwendet. Sehen wir uns anhand eines Beispiels aus der Datei Country.tsx an, wie das funktioniert. Wir werden der Bevölkerungsspalte eine Formatierungsmethode hinzufügen.

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",
  },
];

Hier verwenden wir die JavaScript-Methode Intl.NumberFormat, um die Grundgesamtheit als Zahl zu formatieren. Mehr über diese Methode erfahren Sie hier.

Als nächstes müssen wir unsere CustomTable-Komponente aktualisieren, um nach der Formatfunktion zu suchen und sie anzuwenden, wenn sie vorhanden ist.

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

Mit dieser Änderung wird die Bevölkerungsspalte jetzt mit der entsprechenden Formatierung gerendert. Sie können es hier in Aktion sehen.

Unterstützung benutzerdefinierter Vorlagen

Jetzt implementieren wir die nächste Funktion: Ermöglichen benutzerdefinierter Vorlagen zum Rendern von Spalten. Zu diesem Zweck fügen wir Unterstützung für die Übergabe von JSX als untergeordnete Requisite oder die Verwendung von Render-Requisiten hinzu, sodass Verbraucher die volle Kontrolle darüber haben, wie jede Zelle gerendert wird.

Zuerst erweitern wir die Props-Schnittstelle um eine optionale untergeordnete Requisite.

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

Als nächstes ändern wir unsere CustomTable-Komponente, um diese neue Requisite zu unterstützen und gleichzeitig das bestehende Verhalten beizubehalten.

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

Dadurch wird sichergestellt, dass bei Übergabe der untergeordneten Requisite die benutzerdefinierte Vorlage verwendet wird; andernfalls greifen wir auf das Standardverhalten zurück.

Lassen Sie uns auch den Code umgestalten, um ihn wiederverwendbar zu machen:

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

Benutzerdefinierte Zeilenkomponente

Jetzt erstellen wir eine benutzerdefinierte Zeilenkomponente in der Datei Countries.tsx. Wir erstellen eine CustomRow-Komponente, um spezielle Rendering-Logik zu verarbeiten.

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

Dann aktualisieren wir Countries.tsx, um diese CustomRow-Komponente an CustomTable zu übergeben.

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

Für People.tsx, das keine speziellen Vorlagen benötigt, können wir die Tabelle einfach ohne die Kinder-Requisite rendern.

const People = () => ;

Verbesserungen

Eine Verbesserung, die wir vornehmen können, ist die Verwendung von Array-Indizes als Schlüssel, was zu Problemen führen kann. Stattdessen erzwingen wir die Verwendung eines eindeutigen Zeilenschlüssels für jede Zeile.

Wir werden die Props-Schnittstelle so erweitern, dass ein rowKey erforderlich ist.

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

Jetzt muss jeder Verbraucher von CustomTable einen rowKey bereitstellen, um ein stabiles Rendering zu gewährleisten.

  {(row, column) => }

Endgültiger Code

Sehen Sie sich den vollständigen Code hier an.

Abschluss

In diesem Artikel haben wir unsere benutzerdefinierte CustomTable-Komponente um Formatierungsoptionen und die Möglichkeit erweitert, benutzerdefinierte Vorlagen für Spalten zu übergeben. Diese Funktionen geben uns eine bessere Kontrolle darüber, wie Daten in Tabellen gerendert werden, und machen die Komponente gleichzeitig flexibel und für verschiedene Anwendungsfälle wiederverwendbar.

Wir haben die Komponente außerdem verbessert, indem wir eine rowKey-Requisite erzwungen haben, um die Verwendung von Array-Indizes als Schlüssel zu vermeiden und so ein effizienteres und stabileres Rendering zu gewährleisten.

Ich hoffe, Sie fanden diesen Leitfaden hilfreich! Teilen Sie Ihre Gedanken gerne im Kommentarbereich mit.

Danke, dass du mich auf dieser Reise begleitet hast! ?