Uma das maneiras mais simples de separar dados de seus documentos HTML é armazená-los em JSON. JSON é popular e fácil de trabalhar, especialmente em JavaScript.

No React, faz sentido servir dados JSON por meio de tabelas usando um componente. Esse componente poderá gerar uma tabela que escala com os dados JSON. A tabela resultante pode ter quantas linhas forem necessárias, pois os dados não são codificados permanentemente.

O que você vai precisar

Você precisará do Node.js instalado em sua máquina para seguir este tutorial e um entendimento básico de como o React funciona.

Antes de criar a tabela, você precisará criar um novo projeto React se você não tiver um.

Criando os dados JSON

A tabela usará dados armazenados em um arquivo JSON. Você pode buscar esses dados de um endpoint de API em uma aplicação da vida real.

Na pasta src, crie um novo arquivo chamado data.json e adicione o seguinte:

[{
"Eu iria": 1,
"primeiro nome": "Ethelred",
"sobrenome": "Devagar",
"o email": "[email protected]"
},{
"Eu iria





instagram viewer


": 2,
"primeiro nome": "Reta",
"sobrenome": "Woolmer",
"o email": "[email protected]"
},{
"Eu iria": 3,
"primeiro nome": "Arabel",
"sobrenome": "Pestor",
"o email": "[email protected]"
}]

Este é um arquivo JSON simples contendo três objetos.

As chaves do objeto – o id, primeiro nome, sobrenome e email – são os títulos, enquanto suas propriedades correspondentes compõem o corpo da tabela.

Criando o componente de tabela

Crie um novo arquivo chamado Table.js na pasta src e adicione o seguinte código.

exportarpredefiniçãofunçãoMesa({theadData, tbodyData}) {
Retorna (
<tabela>
<cabeça>
<tr>
// linha de cabeçalho
</tr>
</thead>
<corpo>
// dados do corpo
</tbody>
</table>
 );
}

Este componente usa theadData e tBodyData como props. theadData contém os dados que você exibirá na linha de cabeçalho. O aplicativo obterá esses dados do arquivo JSON e os entregará ao componente Tabela.

Crie uma função em App.js chamado getHeadings() e adicione o seguinte.

const getTítulos = () => {
RetornaObjeto.keys (data[0]);
}

Como as chaves para cada objeto no arquivo JSON são semelhantes, você pode simplesmente usar as chaves do primeiro objeto.

Lembre-se de importar data.json em App.js.

importar dados a partir de "./data.json"

Ao renderizar o componente Table, passe o título e os dados JSON como props.

<Tabela theadData={getHeadings()} tbodyData={data}/>

Criando a linha de cabeçalho

Nesta etapa, você criará um componente para renderizar um item na linha de cabeçalho. Este componente irá iterar sobre os títulos usando o método map().

Em Table.js, adicione o código para iterar sobre os títulos dentro da tag thead.

<tr>
 {theadData.map (título => {
 Retorna <ª chave={título}>{cabeçalho}</th>
 })}
</tr>

Em seguida, você preencherá o corpo da tabela.

Criando as linhas do corpo

O corpo da tabela renderiza os dados da linha. Como o Table.js recebe os dados como uma matriz de objetos, você precisará iterar primeiro para obter cada objeto representando uma linha.

Então, em Table.js, itere sobre a prop tBodyData assim:

<corpo>
 {tbodyData.map((linha, índice) => {
 Retorna <tr chave={índice}>
// dados da linha
</tr>;
 })}
</tbody>

Cada objeto de linha será semelhante ao exemplo de objeto abaixo.

const linha = {
"Eu iria": 1,
"primeiro nome": "Ethelred",
"sobrenome": "Devagar",
"o email": "[email protected]"
}

Para exibir cada um desses itens, você precisará iterar sobre as chaves do objeto. Em cada iteração, você recuperará a propriedade que corresponde a essa chave no objeto de linha. Como essas chaves são iguais aos títulos, use os valores da propriedade theadData.

Modifique a tag tr para exibir os dados da linha conforme mostrado abaixo.

<tr chave={índice}>
// theadData contém as chaves
 {theadData.map((chave, índice) => {
 Retorna <td chave={linha[chave]}>{linha[chave]}</td>
 })}
</tr>;

Juntando tudo, o componente Table deve ficar assim:

exportarpredefiniçãofunçãoMesa({theadData, tbodyData}) {
Retorna (
<tabela>
<cabeça>
<tr>
 {theadData.map (título => {
 Retorna <ª chave={título}>{cabeçalho}</th>
 })}
</tr>
</thead>
<corpo>
 {tbodyData.map((linha, índice) => {
 Retorna <tr chave={índice}>
 {theadData.map((chave, índice) => {
 Retorna <td chave={linha[chave]}>{linha[chave]}</td>
 })}
</tr>;
 })}
</tbody>
</table>
);
}

No

elemento, o componente itera sobre a matriz de dados e retorna a linha da tabela para cada objeto.

Usando o componente de tabela

Importe a tabela no App.js e renderize-a conforme mostrado abaixo:

importar Mesa a partir de './Mesa';
importar dados a partir de "./data.json"
funçãoAplicativo() {
const getTítulos = () => {
RetornaObjeto.keys (data[0]);
 }
Retorna (
<div className="recipiente">
<Tabela theadData={getHeadings()} tbodyData={data}/>
</div>
 );
}
exportarpredefinição Aplicativo;

O componente de tabela usa theadData e tbodyData como props. theadData contém os títulos gerados a partir das chaves do primeiro item nos dados JSON e tbodyData contém todo o arquivo JSON.

Estilizando com módulos CSS

Você gerou um componente de tabela React de um arquivo JSON neste tutorial. Você também aprendeu como manipular dados JSON para atender às suas necessidades. Você pode melhorar a aparência da sua tabela adicionando um pouco de CSS a ela. Para criar estilos CSS com escopo local, considere o uso de módulos CSS. É simples de usar e fácil de começar se você estiver usando um aplicativo create-react-app.