Una de las formas más sencillas de separar datos de sus documentos HTML es almacenarlos en JSON. JSON es popular y fácil de usar, especialmente en JavaScript.
En React, tiene sentido servir datos JSON a través de tablas usando un componente. Ese componente podrá generar una tabla que escala con los datos JSON. La tabla resultante puede tener tantas filas como necesite, ya que los datos no están codificados.
Que necesitarás
Necesitará Node.js instalado en su máquina para seguir este tutorial y una comprensión básica de cómo funciona React.
Antes de crear la tabla, deberá crear un nuevo proyecto React si no tienes uno.
Crear los datos JSON
La tabla usará datos almacenados en un archivo JSON. podrías obtener estos datos desde un punto final de la API en una aplicación de la vida real.
En la carpeta src, cree un nuevo archivo llamado datos.json y agrega lo siguiente:
[{
"identificación": 1,
"primer nombre": "ethelred",
"apellido": "Despacio",
"Email": "[email protected]"
},{
"identificación": 2,
"primer nombre
": "reta",
"apellido": "Woolmer",
"Email": "[email protected]"
},{
"identificación": 3,
"primer nombre": "arabel",
"apellido": "Pestor",
"Email": "[email protected]"
}]
Este es un archivo JSON simple que contiene tres objetos.
Las claves de objeto (identificación, nombre, apellido y correo electrónico) son los encabezados, mientras que sus propiedades correspondientes forman el cuerpo de la tabla.
Creación del componente de tabla
Crear un nuevo archivo llamado Tabla.js en la carpeta src y agregue el siguiente código.
exportardefectofunciónMesa({theadData, tbodyData}) {
devolver (
<mesa>
<cabeza>
<tr>
// fila de encabezado
</tr>
</thead>
<cuerpo>
// datos del cuerpo
</tbody>
</table>
);
}
Este componente toma theadData y tBodyData como accesorios. theadData contiene los datos que mostrará en la fila del encabezado. La aplicación obtendrá estos datos del archivo JSON y los entregará al componente Table.
Crear una función en Aplicación.js llama a getHeadings() y agrega lo siguiente.
constante obtenerEncabezados = () => {
devolverObjeto.keys (datos[0]);
}Dado que las claves para cada objeto en el archivo JSON son similares, simplemente puede usar las claves del primer objeto.
Recuerde importar data.json en App.js.
importar datos de "./datos.json"
Cuando represente el componente Table, pase el encabezado y los datos JSON como accesorios.
<Tabla theadData={getHeadings()} tbodyData={datos}/>Creación de la fila de encabezado
En este paso, creará un componente para representar un elemento en la fila del encabezado. Este componente iterará sobre los encabezados usando el método map().
En Table.js, agregue el código para iterar sobre los encabezados dentro de la etiqueta thead.
<tr>
{theadData.map (encabezado => {
devolver <th clave = {encabezado}>{Bóveda}</th>
})}
</tr>A continuación, rellenará el cuerpo de la tabla.
Crear las filas del cuerpo
El cuerpo de la tabla representa los datos de la fila. Dado que Table.js recibe los datos como una matriz de objetos, primero deberá iterarlo para que cada objeto represente una fila.
Entonces, en Table.js, itere sobre el accesorio tBodyData de esta manera:
<cuerpo>
{tbodyData.map((fila, índice) => {
devolver <clave tr = {índice}>
// datos de fila
</tr>;
})}
</tbody>
Cada objeto de fila será similar al ejemplo de objeto a continuación.
constante fila = {
"identificación": 1,
"primer nombre": "ethelred",
"apellido": "Despacio",
"Email": "[email protected]"
}
Para mostrar cada uno de estos elementos, deberá iterar sobre las claves del objeto. En cada iteración, recuperará la propiedad que coincida con esa clave en el objeto de fila. Dado que estas claves son las mismas que los encabezados, use los valores de theadData prop.
Modifique la etiqueta tr para mostrar los datos de la fila como se muestra a continuación.
<clave tr = {índice}>
// theadData contiene las claves
{theadData.map((clave, índice) => {
devolver <td clave={fila[clave]}>{fila[clave]}</td>
})}
</tr>;
Reuniendo todo, el componente Table debería verse así:
exportardefectofunciónMesa({theadData, tbodyData}) {
devolver (
<mesa>
<cabeza>
<tr>
{theadData.map (encabezado => {
devolver <th clave = {encabezado}>{Bóveda}</th>
})}
</tr>
</thead>
<cuerpo>
{tbodyData.map((fila, índice) => {
devolver <clave tr = {índice}>
{theadData.map((clave, índice) => {
devolver <td clave={fila[clave]}>{fila[clave]}</td>
})}
</tr>;
})}
</tbody>
</table>
);
}
En el
elemento, el componente itera sobre la matriz de datos y devuelve la fila de la tabla para cada objeto.Uso del componente de tabla
Importe la tabla en App.js y reprodúzcala como se muestra a continuación:
importar Mesa de './Mesa';
importar datos de "./datos.json"
funciónaplicación() {
constante obtenerEncabezados = () => {
devolverObjeto.keys (datos[0]);
}
devolver (
<div className="envase">
<Tabla theadData={getHeadings()} tbodyData={datos}/>
</div>
);
}
exportardefecto aplicación;
El componente de la tabla toma theadData y tbodyData como accesorios. theadData contiene los encabezados generados a partir de las claves del primer elemento en los datos JSON, y tbodyData contiene el archivo JSON completo.
Estilo con módulos CSS
Generó un componente de tabla de React a partir de un archivo JSON en este tutorial. También aprendió cómo puede manipular datos JSON para satisfacer sus necesidades. Puede mejorar el aspecto de su tabla añadiéndole algo de CSS. Para crear estilos CSS de alcance local, considere usar módulos CSS. Es simple de usar y fácil de comenzar si está utilizando una aplicación de creación y reacción.
