Trabajando Con Tablas En Reaccionar, Parte Dos

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 utilizando react-create-app, agregamos React-Bootstrap-Table, completamos una tabla con datos, trabajamos con columnas, diseñamos el estilo de la tabla y seleccionamos filas. 

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

Filas en expansión

Esta es una de las características más geniales de React-bootstrap-table. Cuando se muestran datos tabulares, a menudo hay datos adicionales que puede querer ver en una o dos filas, pero no puede mostrar todos los datos de todas las filas. 

Una opción para abordar esto es mostrar información sobre herramientas, pero la información sobre herramientas requiere que se desplace el mouse sobre el área objetivo y solo se puede ver una información sobre herramientas a la vez. Las filas en expansión le permiten mostrar datos adicionales para cada fila en un tipo de cajón que se mantiene expandido todo el tiempo que desee, y puede contraerlo cuando termine. Puede expandir tantas filas como desee al mismo tiempo. Así es como se hace con React-bootstrap-table.. 

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

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

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

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', función isExpandableRow (row) return row [' name '] en loveMap;  función expandRow (row) return ( 
row ['name'] ama a loveMap [row ['name']].
 );  clase Table5 extiende el Componente render () const options = expandRowBgColor: 'pink', expandiendo: [1] // inicialmente expandido return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar por defecto Table5

Paginación

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

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

Especifiquemos también qué página mostrar inicialmente (4), personalizamos el texto para la página anterior, siguiente, primera y última (usando flechas Unicode para obtener más frescor) y finalmente proporcionamos una función personalizada llamada showTotal () para mostrar el número total de elementos. Tenga en cuenta que el atributo para controlar el botón de la página anterior se denomina "página previa" y no "página previa" (me llamó). Todas las opciones de paginación entran en el atributo general de "opciones" de la tabla. 

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. La función de css getData () var data = [] para (var i = 0; i < 100; ++i)  data[i] = id: i, name: 'item_' + i, value: i  return data  function showTotal()  return 
Hay 100 artículos en total.
  clase Table6 extiende el Componente render () const options = page: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar por defecto Table6

Adición y eliminación de filas

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

Los atributos clave son insertar fila y borrar fila. Cuando los especifique, se agregarán los botones "Nuevo" y "Eliminar". Si hace clic en el botón "Nuevo", se abrirá un cuadro de diálogo modal que le permitirá agregar nuevas filas. Si hace clic en el botón "Eliminar", se eliminarán todas las filas seleccionadas. Para eliminar filas, debe habilitar la selección de filas, por supuesto. También puede adjuntar funciones de enlace que se llaman después de agregar o eliminar filas.

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'function onInsertRow (row) let newRowStr = "for (const prop en row) newRowStr + = prop +': '+ row [prop] +' \ n ' alert (' Usted insertó: \ n '+ newRowStr ) function onDeleteRow (rowKeys) alert ('Usted eliminó:' + rowKeys) clase Table7 extiende Componente render () const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // Para eliminar las filas que pueda seleccionar rows const selectRowProp = mode: 'checkbox' return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar tabla 7 por defecto

Edición de celdas

Otra forma de manipulación de datos es la edición en contexto (a. K.a. edición de celdas). La edición de celdas puede activarse con un clic o doble clic. La edición de celdas está controlada por el atributo "cellEdit". Además del modo, puede especificar filas no editables y funciones de enlace. 

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

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. css 'class Table8 extiende el Componente render () const cellEditProp = mode:' click ', //' dbclick 'para el desencadenante haciendo doble clic en nonEditableRows: function () return [3];   regreso ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar por defecto Table8

Exportando sus datos

A veces, ver sus datos y jugar con ellos en una interfaz de usuario web no es suficiente, y necesita tomar sus datos y compartirlos con otras herramientas. La forma de hacerlo con React-bootstrap-table es muy simple. Simplemente agregue el atributo exportCSV (y opcionalmente un nombre de archivo) y se agregará un botón de exportación. Cuando hace clic en el botón, le permite guardar sus datos en un archivo CSV.

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. la clase de css Table9 extiende el componente render () return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar por defecto Table9

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

"id", "nombre", "valor" "1", "Gob", "2" "2", "Buster", "5" "3", "George Michael", "4" 

Personalizando todas las cosas

Cubrimos mucho material, pero React-bootstrap-table tiene mucho más en la tienda. Prácticamente, cada aspecto puede ser personalizado. Lea la documentación completa sobre cómo personalizar una tabla..

Aquí hay una lista de las partes personalizables:

• Célula
• Barra de herramientas
• Insertar modal
• Paginación
• Filtro de columna
• Edición de celdas
• Columna de selección de fila

Conclusión

React-bootstrap-table contiene un poderoso golpe. Proporciona una interfaz de usuario agradable para mostrar, buscar y manipular datos tabulares. La API es muy coherente: las características principales pueden habilitarse especificando un atributo simple y, opcionalmente, personalizarse 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 necesita características y personalización más avanzadas, hay una amplia documentación y ejemplos sobre cómo hacerlo..

En los últimos años, React ha crecido en popularidad. De hecho, tenemos una serie de artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si busca recursos adicionales en React, no dude en consultarlos..