Introducción

¡Hurra! ? ¡Has llegado a la parte final de esta serie de dos partes! Si aún no has leído la Parte 1, detente aquí y repasala primero. ¡No te preocupes, te esperaremos hasta que regreses! ?

En la Parte 1, creamos el componente CustomTable. Puedes verlo en acción aquí.

En esta segunda parte, ampliaremos el componente para agregar algunas funciones nuevas. Esto es en lo que trabajaremos:

Para admitir esto, el componente CustomTable necesitará algunas mejoras:

1. La capacidad de formatear el valor representado, por ejemplo, representar un número con el formato adecuado.
2. Flexibilidad para permitir a los usuarios proporcionar plantillas personalizadas para representar filas, dándoles control sobre cómo se muestra cada columna.

Profundicemos en la creación de la primera característica.

Ampliación de la interfaz de columna

Comenzaremos agregando un método de formato a la interfaz de Columna para controlar cómo columnas específicas representan sus valores.

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

Este método de formato opcional se utilizará para formatear los datos cuando sea necesario. Veamos cómo funciona esto con un ejemplo del archivo Country.tsx. Agregaremos un método de formato a la columna de población.

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

Aquí, utilizamos el método JavaScript Intl.NumberFormat para formatear la población como un número. Puedes aprender más sobre este método aquí.

A continuación, debemos actualizar nuestro componente CustomTable para verificar la función de formato y aplicarla cuando exista.

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

Con esta modificación, la columna de población ahora se representa con el formato apropiado. Puedes verlo en acción aquí.

Compatible con plantillas personalizadas

Ahora, implementemos la siguiente característica: permitir plantillas personalizadas para representar columnas. Para hacer esto, agregaremos soporte para pasar JSX como accesorio secundario o usar accesorios de renderizado, brindando a los consumidores control total sobre cómo se representa cada celda.

Primero, ampliaremos la interfaz de accesorios para incluir un accesorio infantil opcional.

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

A continuación, modificaremos nuestro componente CustomTable para admitir este nuevo accesorio y al mismo tiempo preservar el comportamiento existente.

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

Esto garantiza que si se pasa la propiedad secundaria, se utilice la plantilla personalizada; de lo contrario, volvemos al comportamiento predeterminado.

Refactoricemos también el código para hacerlo más reutilizable:

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

Componente de fila personalizado

Ahora vamos a crear un componente de fila personalizado en el archivo Países.tsx. Crearemos un componente CustomRow para manejar una lógica de representación especial.

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

Luego, actualizaremos Country.tsx para pasar este componente CustomRow a CustomTable.

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

Para People.tsx, que no necesita plantillas especiales, simplemente podemos renderizar la tabla sin el accesorio secundario.

const People = () => ;

Mejoras

Una mejora que podemos hacer es el uso de índices de matriz como claves, lo que puede causar problemas. En su lugar, impongamos el uso de una clave de fila única para cada fila.

Ampliaremos la interfaz de Props para que requiera una clave de fila.

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

Ahora, cada consumidor de CustomTable debe proporcionar una clave de fila para garantizar una representación estable.

  {(row, column) => }

Código final

Consulta el código completo aquí.

Conclusión

En este artículo, ampliamos nuestro componente CustomTable personalizado agregando opciones de formato y la capacidad de pasar plantillas personalizadas para columnas. Estas características nos brindan un mayor control sobre cómo se representan los datos en las tablas y, al mismo tiempo, hacen que el componente sea flexible y reutilizable para diferentes casos de uso.

También mejoramos el componente aplicando un accesorio rowKey para evitar el uso de índices de matriz como claves, lo que garantiza una representación más eficiente y estable.

¡Espero que esta guía te haya resultado útil! No dudes en compartir tus opiniones en la sección de comentarios.

¡Gracias por acompañarme en este viaje! ?