Advertisement
  1. Code
  2. React

Trabajando con tabletas en React, segunda parte

by
Read Time:6 minsLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React: Part One

Spanish (Español) translation by Francisco Javier Arellano Macías (you can also view the original English article)

Visión general

Esta es la segunda parte de una serie de dos partes sobre React-Bootstrap-Table. En la primera parte, creamos una aplicación React simple usando react-create-app, agregamos React-Bootstrap-Table, llenamos una tabla con datos, trabajamos con columnas, diseñamos la tabla y seleccionamos filas.

En esta parte, continuaremos el viaje expandiendo filas, agregando filas, eliminando filas y cubriendo la paginación, la edición de celdas y la personalización avanzada.

Expansión de filas

Esta es una de las características más interesantes de React-bootstrap-table. Al mostrar datos tabulares, a menudo hay datos adicionales que es posible que desees ver en una o dos filas, pero no puedes mostrar todos los datos de todas las filas.

Una opción para abordar eso es mostrar información sobre herramientas, pero la información sobre herramientas requiere que coloques el mouse sobre el área de destino, y solo puedes ver una información sobre herramientas a la vez. La expansión de filas te permite mostrar datos adicionales para cada fila en una especie de cajón que permanece expandido todo el tiempo que desees, y puedes volver a contraerlo cuando hayas terminado. Puedes expandir tantas filas como desees al mismo tiempo. Así es como se hace con React-bootstrap-table.

El mapa de amor contiene relaciones entre algunos personajes de Arrested Development: Gob ama a Marta y Buster ama a Lucile 2. La función isExpandable() controla qué filas se pueden expandir. En este caso, devuelve verdadero para las filas cuyo nombre de personaje está en el mapa de amor. La función expandRow() devuelve un componente cuando se expande una fila.

El componente devuelto se muestra debajo de la fila hasta que la fila se contrae. Configurar la expansión de filas es un poco complicado. Algunas opciones son solo accesorios del componente BootstrapTable.

Las opciones de expansión de columna son un accesorio de objeto, y luego hay un accesorio llamado opciones que contiene opciones de expansión de fila adicionales como expandRowBgColor y expandir. Sería mucho más simple si solo hubiera un accesorio llamado expandRowProp que contuviera todas las opciones (como selectRowProp).

The result of the above codeThe result of the above codeThe result of the above code

Paginación

Hasta ahora, mostramos solo tres filas de datos. Las tablas están diseñadas para mostrar una gran cantidad de datos que no necesariamente caben en la pantalla al mismo tiempo. Ahí es donde entra en juego la paginación. React-bootstrap-table admite muchas opciones de paginación.

Completemos nuestra tabla con 100 elementos, que serán diez páginas de diez elementos cada una. Usaremos una función getData () que devuelve una matriz de 100 objetos con identificadores, nombres y valores basados ​​en su índice.

También especifiquemos qué página mostrar inicialmente (4), personalicemos el texto para la página anterior, siguiente, primera y última (usando flechas Unicode para mayor frescura) y finalmente proporcionemos una función personalizada llamada showTotal () para mostrar el número total de elementos. Ten en cuenta que el atributo para controlar el botón de la página anterior se llama "prePage" y no "prevPage" (me llamó la atención). Todas las opciones de paginación entran en el atributo general "options" de la tabla.

The resulting table of the code aboveThe resulting table of the code aboveThe resulting table of the code above

Agregar y eliminar filas

Hasta ahora usamos la tabla para mostrar información de varias formas. Pero las tablas se pueden utilizar como interfaz de usuario para manipular datos. Veamos cómo agregar y eliminar filas de una tabla.

Los atributos clave son insertRow y deleteRow. Cuando los especificas, se agregan los botones "Nuevo" y "Eliminar". Si haces clic en el botón "Nuevo", se abre un cuadro de diálogo modal que te permite agregar nuevas filas. Si haces clic en el botón "Eliminar", se eliminan todas las filas seleccionadas. Para eliminar filas, debes habilitar la selección de filas, por supuesto. También puedes adjuntar funciones de enlace que se llaman después de agregar o eliminar filas.

Adding and Deleting RowsAdding and Deleting RowsAdding and Deleting Rows

Edición de celda

Otra forma de manipulación de datos es la edición in situ (también conocida como edición de celda). La edición de celdas se puede activar con un clic o doble clic. La edición de celdas está controlada por el atributo "cellEdit". Además del modo, puedes especificar filas no editables y funciones de enganche.

En el siguiente código, la función nonEditableRows simplemente devuelve la clave de fila 3, pero podrías usar una lógica más sofisticada.

Editing CellsEditing CellsEditing Cells

Exportación de tus datos

A veces, ver tus datos y jugar con ellos en una interfaz de usuario web no es suficiente, y necesitas tomar tus datos y enviarlos a otras herramientas. La forma de hacerlo con React-bootstrap-table es muy simple. Simplemente agrega el atributo exportCSV (y opcionalmente un nombre de archivo) y se agrega un botón de exportación. Cuando haces clic en el botón, te permite guardar tus datos en un archivo CSV.

Exporting DataExporting DataExporting Data

Aquí están los datos exportados de nuestra pequeña tabla:

Personalizando todas las cosas

Cubrimos mucho material, pero React-bootstrap-table tiene mucho más en la tienda. Prácticamente, todos los aspectos se pueden personalizar. Lee la documentación completa sobre cómo personalizar una tabla.

Aquí hay una lista de las piezas personalizables:

  • Celda
  • Barra de herramientas
  • Insertar Modal
  • Paginación
  • Filtro de columna
  • Edición de celda
  • Columna de selección de fila

Conclusión

React-bootstrap-table tiene un gran impacto. Proporciona una interfaz de usuario agradable lista para usar para mostrar, buscar y manipular datos tabulares. La API es muy coherente: las funciones principales se pueden habilitar especificando un atributo simple y, opcionalmente, se pueden personalizar con atributos adicionales que a menudo pueden ser funciones dinámicas.

Si bien el comportamiento predeterminado y la configuración básica deberían satisfacer a la mayoría de los usuarios, si necesitas funciones más avanzadas y personalización, hay una amplia documentación y ejemplos de cómo hacerlo.

En los últimos años, React ha ganado popularidad. De hecho, tenemos varios artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si estás buscando recursos adicionales sobre React, no dudes en consultarlos.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.