Visualização de Tabela de Objetos

Introdução

Neste laboratório, exploraremos como criar um componente de tabela dinâmico em React usando um array de objetos e uma lista de nomes de propriedades. O componente usará vários métodos de array JavaScript, como Object.keys(), Array.prototype.filter(), Array.prototype.includes() e Array.prototype.reduce() para filtrar os dados e renderizar a tabela com as propriedades especificadas. Ao final deste laboratório, você terá uma melhor compreensão de como renderizar tabelas dinâmicas em React.

Visualização de Tabela de Objetos

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Este componente renderiza uma tabela com linhas que são criadas dinamicamente a partir de um array de objetos e uma lista de nomes de propriedades. Para conseguir isso:

• Use Object.keys(), Array.prototype.filter(), Array.prototype.includes() e Array.prototype.reduce() para produzir um array filteredData que contém todos os objetos com as chaves especificadas em propertyNames.
• Renderize um elemento <table> com um conjunto de colunas igual ao número de valores em propertyNames.
• Use Array.prototype.map() para renderizar cada valor no array propertyNames como um elemento <th>.
• Use Array.prototype.map() para renderizar cada objeto no array filteredData como um elemento <tr> contendo um <td> para cada chave no objeto.
• Observe que este componente não funciona com objetos aninhados e irá quebrar se houver objetos aninhados dentro de qualquer uma das propriedades especificadas em propertyNames.

Aqui está o código:

const MappedTable = ({ data, propertyNames }) => {
  const filteredData = data.map((obj) =>
    Object.keys(obj)
      .filter((key) => propertyNames.includes(key))
      .reduce((acc, key) => ({ ...acc, [key]: obj[key] }), {})
  );

  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map((name) => (
            <th key={`header-${name}`}>{name}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((obj, i) => (
          <tr key={`row-${i}`}>
            {propertyNames.map((name) => (
              <td key={`cell-${i}-${name}`}>{obj[name]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Você pode usar o componente passando um array de objetos e uma lista de nomes de propriedades:

const people = [
  { name: "John", surname: "Smith", age: 42 },
  { name: "Adam", surname: "Smith", gender: "male" }
];
const propertyNames = ["name", "surname", "age"];

ReactDOM.render(
  <MappedTable data={people} propertyNames={propertyNames} />,
  document.getElementById("root")
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Visualização de Tabela de Objetos. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.