React: Up & Running, 2ª Edición

Capítulo 3. Excel: Un componente de tabla elegante

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Ahora ya sabes cómo crear componentes React personalizados, componer la interfaz de usuario utilizando componentes DOM genéricos, así como tus propios componentes personalizados, establecer propiedades, mantener el estado, engancharte al ciclo de vida de un componente y optimizar el rendimiento no volviendo a renderizar cuando no es necesario.

Unamos todo esto (y de paso aprendamos más sobre React) creando en un componente más potente: una tabla de datos. Algo así como un prototipo temprano de Microsoft Excel que te permita editar el contenido de una tabla de datos, y también ordenar, buscar y exportar los datos como archivos descargables.

Datos Primero

Las tablas tienen que ver con los datos, así que el componente de la tabla (¿por qué no llamarlo Excel?) debería tomar una matriz de datos y una matriz de cabeceras que describan cada columna de datos. Para hacer pruebas, tomemos de Wikipedia una lista de los libros más vendidos:

const headers = ['Book', 'Author', 'Language', 'Published', 'Sales'];

const data = [
  [
    'A Tale of Two Cities', 'Charles Dickens',
      'English', '1859', '200 million',
  ],
  [
    'Le Petit Prince (The Little Prince)', 'Antoine de Saint-Exupéry',
      'French', '1943', '150 million',
  ],
  [
    "Harry Potter and the Philosopher's Stone", 'J. K. Rowling',
      'English', '1997', '120 million',
  ],
  [
    'And Then There ...