Comment créer un composant de table personnalisé avec React et Typescript (Partie 2)

Introduction

Ouais ! ? Vous avez atteint la dernière partie de cette série en deux parties ! Si vous n'avez pas encore consulté la première partie, arrêtez-vous ici et parcourez-la d'abord. Ne vous inquiétez pas, nous attendrons votre retour ! ?

Dans la première partie, nous avons construit le composant CustomTable. Vous pouvez le voir en action ici.

Dans cette deuxième partie, nous étendrons le composant pour ajouter de nouvelles fonctionnalités. Voici ce sur quoi nous allons travailler :

Pour prendre en charge cela, le composant CustomTable aura besoin de quelques améliorations :

1. La possibilité de formater la valeur rendue, par exemple, le rendu d'un nombre avec un formatage approprié.
2. Flexibilité permettant aux utilisateurs de fournir des modèles personnalisés pour le rendu des lignes, leur donnant ainsi le contrôle sur la façon dont chaque colonne est affichée.

Plongeons dans la création de la première fonctionnalité.

Extension de l'interface de colonne

Nous allons commencer par ajouter une méthode de formatage à l'interface Colonne pour contrôler la manière dont des colonnes spécifiques affichent leurs valeurs.

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

Cette méthode de formatage facultative sera utilisée pour formater les données si nécessaire. Voyons comment cela fonctionne avec un exemple du fichier Country.tsx. Nous ajouterons une méthode de format à la colonne population.

const columns: Column<Country>[] = [
  { 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",
  },
];

Ici, nous utilisons la méthode JavaScript Intl.NumberFormat pour formater la population sous forme de nombre. Vous pouvez en savoir plus sur cette méthode ici.

Ensuite, nous devons mettre à jour notre composant CustomTable pour vérifier la fonction de format et l'appliquer lorsqu'elle existe.

<TableBody>
  {rows.map((row, index) => (
    <TableRow hover tabIndex={-1} key={index}>
      {columns.map((column, index) => (
        <TableCell key={index}>
          {column.format
            ? column.format(row[column.id] as string)
            : (row[column.id] as string)}
        </TableCell>
      ))}
    </TableRow>
  ))}
</TableBody>

Avec cette modification, la colonne de population s'affiche désormais avec le formatage approprié. Vous pouvez le voir en action ici.

Prise en charge des modèles personnalisés

Maintenant, implémentons la fonctionnalité suivante : autoriser des modèles personnalisés pour le rendu des colonnes. Pour ce faire, nous ajouterons la prise en charge de la transmission de JSX en tant qu'accessoire enfant ou de l'utilisation d'accessoires de rendu, donnant aux consommateurs un contrôle total sur la façon dont chaque cellule est rendue.

Tout d’abord, nous allons étendre l’interface Props pour inclure un accessoire enfant facultatif.

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

Ensuite, nous modifierons notre composant CustomTable pour prendre en charge ce nouvel accessoire tout en préservant le comportement existant.

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

Cela garantit que si l'accessoire enfants est transmis, le modèle personnalisé est utilisé ; sinon, nous revenons au comportement par défaut.

Refactorisons également le code pour le rendre plus réutilisable :

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

Composant de ligne personnalisé

Créons maintenant un composant de ligne personnalisé dans le fichier Countries.tsx. Nous allons créer un composant CustomRow pour gérer une logique de rendu spéciale.

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

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

Ensuite, nous mettrons à jour Countries.tsx pour transmettre ce composant CustomRow à CustomTable.

const Countries = () => (
  <CustomTable columns={columns} rows={rows}>
    {(row, column) => <CustomRow column={column} row={row} />}
  </CustomTable>
);

Pour People.tsx, qui ne nécessite aucun modèle spécial, nous pouvons simplement restituer le tableau sans l'accessoire enfants.

const People = () => <CustomTable columns={columns} rows={rows} />;

Améliorations

Une amélioration que nous pouvons apporter est l'utilisation d'index de tableau comme clés, ce qui peut causer des problèmes. Au lieu de cela, imposons l’utilisation d’une rowKey unique pour chaque ligne.

Nous allons étendre l'interface Props pour exiger une rowKey.

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

Désormais, chaque consommateur de CustomTable doit fournir une rowKey pour garantir un rendu stable.

<CustomTable
  rowKey="code"
  rows={rows}
  onRowClick={handleRowClick}
  columns={columns}
>
  {(row, column) => <CustomRow column={column} row={row} />}
</CustomTable>

Code final

Découvrez le code complet ici.

Conclusion

Dans cet article, nous avons étendu notre composant CustomTable personnalisé en ajoutant des options de formatage et la possibilité de transmettre des modèles personnalisés pour les colonnes. Ces fonctionnalités nous donnent un meilleur contrôle sur la façon dont les données sont restituées dans les tableaux, tout en rendant le composant flexible et réutilisable pour différents cas d'utilisation.

Nous avons également amélioré le composant en appliquant un accessoire rowKey pour éviter d'utiliser des index de tableau comme clés, garantissant ainsi un rendu plus efficace et plus stable.

J'espère que vous avez trouvé ce guide utile ! N'hésitez pas à partager vos réflexions dans la section commentaires.

Merci d'être resté à mes côtés tout au long de ce voyage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!