Crear tabla editable en React

MD Aminul Islam 15 febrero 2024

React React Table

La tabla es la parte más importante de cualquier aplicación para visualizar datos. En React, hay una tabla llamada tabla Editable a través de la cual puede editar dinámicamente, utilizada principalmente para habilitar la edición de datos por parte de los usuarios.

En este breve artículo, veremos cómo podemos crear una tabla editable en React con explicaciones.

Crear una tabla editable en React

Nuestro ejemplo a continuación ilustrará cómo podemos crear una tabla editable usando React. Siga los códigos de ejemplo a continuación.

Código - App.js:

import React from 'react';

export default class DynamicTable extends React.Component {
  // Class constructor
  constructor(props) {
    super(props);

    this.state = { Name: '', Data: [] }
  }

  // An action event on updated data
  UpdateData(event) {
    this.setState({Name: event.target.value});
  }

  // A click action
  ClickAction() {
    var Data = this.state.Data;
    Data.push(this.state.Name);
    this.setState({Data: Data, Name: ''});
  }

  // An action event on data change
  OnDataChange(i, event) {
    var Data = this.state.Data;
    Data[i] = event.target.value;

    this.setState({Data: Data});
  }

  // An action event on data  delete
  OnDataDelete(i) {
    var Data = this.state.Data;

    Data.splice(i, 1);

    this.setState({Data: Data});
  }

  // Organizing the table
  DrawTable() {
    var context = this;

    return  this.state.Data.map(function(o, i) {
              return (
                <tr key={'item-' + i}>
                  <td>
                    <input type='text' value={o} onChange={
        context.OnDataChange.bind(context, i)}/>
                  </td>
                  <td>
                    <button onClick={context.OnDataDelete.bind(context, i)}>Delete</button>
                  </td>
                </tr>
              );
            });
  }

// Rendering the UI
    render() {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>{this.DrawTable()}</tbody>
        </table>
        <hr/>
        <input type='text' value={this.state.Name} onChange={this.UpdateData.bind(this)}/>
        <button onClick={this.ClickAction.bind(this)}>Add Item </button>
      </div>
    );
  }
}

Ya comandamos el propósito de cada bloque de código. Ahora veamos el archivo index.js, que se parece al siguiente.

Código - index.js:

// importing necessary packages and files
import './index.css';

import React from 'react';
import ReactDOM from 'react-dom/client';

import reportWebVitals from './reportWebVitals';
import DynamicTable from './table.js';

// Specifying the parent element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DynamicTable />
  </React.StrictMode>
);

reportWebVitals();

Después de terminar todos los archivos, obtendrá el siguiente resultado en su navegador.

Producción:

edición de la tabla de reacciones

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Su sistema debe contener la última versión de Node JS para ejecutar un proyecto React.

Autor: MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

Crear una tabla editable en React

Artículo relacionado - React Table