¿Cómo crear una tabla en ReactJS?

En este artículo, crearemos una tabla simple en React.js tal como lo harías en un proyecto HTML normal. Además, lo diseñaremos usando CSS normal. 

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Javascript ES6
• Tablas HTML y CSS

Creando una aplicación React:

Paso 1: cree una aplicación de reacción escribiendo el siguiente comando en la terminal.

npx create-react-app react-table

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir , a la tabla de reacciones, ejecutando el siguiente comando.

cd react-table

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo 1: aquí App.js es el componente predeterminado. Al principio, veremos cómo crear una tabla utilizando los valores codificados. Más adelante veremos cómo representar dinámicamente los datos de una array dentro de la tabla. 

Nombre de archivo: App.js

import './App.css';
  
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
        <tr>
          <td>Anom</td>
          <td>19</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Megha</td>
          <td>19</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>Subham</td>
          <td>25</td>
          <td>Male</td>
        </tr>
      </table>
    </div>
  );
}
  
export default App;

En el ejemplo anterior, simplemente usamos los elementos de la tabla HTML que son los elementos <table>, <tr>, <th> y <td>. 

Ejemplo 2: ahora veamos cómo podemos representar dinámicamente los datos de una array. En lugar de iterar manualmente sobre la array usando un bucle, simplemente podemos usar el método incorporado Array.map(). El método Array.map() le permite iterar sobre una array y modificar sus elementos mediante una función de devolución de llamada. La función de devolución de llamada se ejecutará en cada uno de los elementos de la array. En este caso, solo devolveremos una fila de la tabla en cada iteración.

Nombre de archivo: App.js

import './App.css';
  
// Example of a data array that
// you might receive from an API
const data = [
  { name: "Anom", age: 19, gender: "Male" },
  { name: "Megha", age: 19, gender: "Female" },
  { name: "Subham", age: 25, gender: "Male"},
]
  
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
        {data.map((val, key) => {
          return (
            <tr key={key}>
              <td>{val.name}</td>
              <td>{val.age}</td>
              <td>{val.gender}</td>
            </tr>
          )
        })}
      </table>
    </div>
  );
}
  
export default App;

Nombre de archivo: App.css Ahora, editemos el archivo llamado App.css para darle estilo a la tabla.

.App {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
  
table {
  border: 2px solid forestgreen;
  width: 800px;
  height: 200px;
}
  
th {
  border-bottom: 1px solid black;
}
  
td {
  text-align: center;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: