Introdução

Yay! ? Você chegou à parte final desta série de duas partes! Se você ainda não conferiu a Parte 1, pare aqui e leia-a primeiro. Não se preocupe, esperaremos até você voltar! ?

Na Parte 1, construímos o componente CustomTable. Você pode vê-lo em ação aqui.

Nesta segunda parte, estenderemos o componente para adicionar alguns novos recursos. Estaremos trabalhando para isso:

Para suportar isso, o componente CustomTable precisará de algumas melhorias:

1. A capacidade de formatar o valor renderizado - por exemplo, renderizar um número com formatação adequada.
2. Flexibilidade para permitir que os usuários forneçam modelos personalizados para renderização de linhas, dando-lhes controle sobre como cada coluna é exibida.

Vamos mergulhar na construção do primeiro recurso.

Estendendo a interface da coluna

Começaremos adicionando um método de formato à interface Column para controlar como colunas específicas renderizam seus valores.

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

Este método de formatação opcional será usado para formatar dados quando necessário. Vamos ver como isso funciona com um exemplo do arquivo Country.tsx. Adicionaremos um método de formato à coluna de população.

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

Aqui, estamos usando o método JavaScript Intl.NumberFormat para formatar a população como um número. Você pode aprender mais sobre esse método aqui.

Em seguida, precisamos atualizar nosso componente CustomTable para verificar a função de formato e aplicá-la quando ela existir.

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

Com esta modificação, a coluna de população agora é renderizada com a formatação apropriada. Você pode vê-lo em ação aqui.

Suporte a modelos personalizados

Agora, vamos implementar o próximo recurso: permitir modelos personalizados para renderizar colunas. Para fazer isso, adicionaremos suporte para passar JSX como um adereço filho ou usar adereços de renderização, dando aos consumidores controle total sobre como cada célula é renderizada.

Primeiro, estenderemos a interface Props para incluir um acessório opcional para filhos.

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

A seguir, modificaremos nosso componente CustomTable para oferecer suporte a esta nova propriedade, preservando o comportamento existente.

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

Isso garante que, se a propriedade kids for aprovada, o modelo personalizado será usado; caso contrário, voltaremos ao comportamento padrão.

Vamos também refatorar o código para torná-lo mais reutilizável:

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 linha personalizada

Agora vamos construir um componente de linha personalizado no arquivo Countries.tsx. Criaremos um componente CustomRow para lidar com lógica de renderização 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};
};

Em seguida, atualizaremos Countries.tsx para passar este componente CustomRow para CustomTable.

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

Para People.tsx, que não precisa de nenhum modelo especial, podemos simplesmente renderizar a tabela sem a propriedade children.

const People = () => ;

Melhorias

Uma melhoria que podemos fazer é o uso de índices de array como chaves, o que pode causar problemas. Em vez disso, vamos impor o uso de um rowKey exclusivo para cada linha.

Estenderemos a interface Props para exigir um rowKey.

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

Agora, cada consumidor de CustomTable deve fornecer um rowKey para garantir uma renderização estável.

  {(row, column) => }

Código Final

Confira o código completo aqui.

Conclusão

Neste artigo, estendemos nosso componente CustomTable personalizado adicionando opções de formatação e a capacidade de passar modelos personalizados para colunas. Esses recursos nos dão maior controle sobre como os dados são renderizados em tabelas, ao mesmo tempo que tornam o componente flexível e reutilizável para diferentes casos de uso.

Também melhoramos o componente aplicando uma propriedade rowKey para evitar o uso de índices de array como chaves, garantindo uma renderização mais eficiente e estável.

Espero que este guia tenha sido útil! Sinta-se à vontade para compartilhar suas idéias na seção de comentários.

Obrigado por ficar comigo nesta jornada! ?