Trabajando Con Tablas En Reaccionar, Parte Uno

Visión general

Uno de los elementos de interfaz de usuario más comunes para presentar sus datos es una tabla. Resulta que hay muchos aspectos para controlar cuando se trabaja con tablas, como:

• definiendo columnas y encabezados
• Varios formatos de celda (texto, números, casillas de verificación)
• redimensionamiento
• filtración
• crecimiento dinámico
• estilo

En esta serie de dos partes, aprenderá los entresijos de trabajar con datos tabulares en React utilizando el componente React Bootstrap Table. Podrás crear tablas sofisticadas y de aspecto profesional por defecto con poco esfuerzo y, sin embargo, podrás personalizar cada parte que desees..

Crear una aplicación de reacción de vainilla

Supongo que está familiarizado con React y se centrará en trabajar con React Bootstrap Table. Envato Tuts + tiene una gran serie de comentarios sobre React que puedes leer.

En pocas palabras, utilicé la aplicación react-create-crea para crear una aplicación de vainilla React y luego instalé la tabla reaccion-bootstrap-table: npm instalar react-bootstrap-table --save.

Es importante agregar el CSS bootstrap al archivo public / index.html.

Tormenta web

Si utiliza WebStorm de JetBrains y desea ejecutar las pruebas, agregue --env = jsdom en su configuración de ejecución.

Tabla basica

Comenzaremos con una tabla básica. Aquí hay un componente básico de la tabla. Importa BoostrapTable y TableHeaderColumn de react-bootstrap-table y también el CSS del directorio dist. 

los hacer() El método representa una tabla con tres columnas: "ID", "Nombre" y "Valor". Los datos reales en la tabla provienen de la propiedad "datos" (this.props.data). Los datos contienen los nombres de algunos personajes del hilarante programa Arrested Development..

importar React, Componente desde 'reaccionar'; importe BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table'; importar '… /css/Table.css'; importar '... / ... / node_modules / react-bootstrap-table / css / react-bootstrap-table.css' clase Table1 extiende el Componente render () return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 );  exportar tabla1 por defecto; 

Instalé la BasicTable en el método render () del App.js estándar y pasé algunos datos codificados:

 importar React, Componente desde 'reaccionar'; importar './App.css'; importar Table1 desde './components/Table1' var data = [id: 1, name: 'Gob', value: '2', id: 2, name: 'Buster', value: '5', id: 3, nombre: 'George Michael', valor: '4']; la aplicación de clase extiende el Componente render () return ( 
 
Tabla basica
  
 );  exportar la aplicación por defecto; 

Para ver la tabla, escriba: npm start. La configuración creada por crear-reaccionar-aplicación vigila tu código y lo recompilará cada vez que cambies algo, por lo que necesitas ejecutarlo solo una vez y luego cada cambio se reflejará automáticamente.

Compilado con éxito! Ahora puede ver la tabla de reacción en el navegador. Local: http: // localhost: 3000 / En su red: http://192.168.1.136:3000/ Tenga en cuenta que la versión de desarrollo no está optimizada. Para crear una construcción de producción, use la construcción de hilados.. 

Aquí está el resultado:

Tenga en cuenta que cada columna tiene exactamente el mismo ancho.

Trabajando con columnas

Puedes controlar muchos aspectos de las columnas. En particular, los anchos de columna pueden especificarse en unidades absolutas como porcentajes o dejarse sin especificar. El ancho de columna de las columnas no especificadas es el resto dividido en partes iguales. Por ejemplo, para un ancho de tabla de 100 px, una columna especificó 15 px, una segunda columna especificada 25% (25 px) y una tercera columna especificada 30% (15 px). 

Otras dos columnas no especificaron un ancho. Las columnas 1, 2 y 3 utilizaron 70 px juntas, lo que deja 30 px para las columnas 4 y 5, que lo dividirán por igual. Las columnas 4 y 5 tendrán un ancho de 15 px cada una. Tenga en cuenta que si se cambia el tamaño de la tabla, los números cambiarán. Solo la columna 1 siempre tendrá 15 px de ancho.. 

Las otras columnas se calcularán en función del ancho de la tabla. También puede administrar la alineación de texto y columnas, así como el estilo de encabezados y columnas. Este es un ejemplo de cómo especificar diferentes anchos de columna, alineación de texto y estilos personalizados:

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 2 de css amplía el componente render () return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar tabla2 por defecto

Estilo de su mesa

Ya viste cómo estilizar columnas y encabezados individuales, pero el estilo puede ir mucho más allá. React-bootstrap-table ofrece muchas opciones para la personalización. En primer lugar, simplemente puede agregar los atributos de trazado y desplazamiento al componente BootstrapTable para obtener colores de fondo alternativos en cada fila: 

Para estilizar todas las filas, use trClassName:  

Si desea obtener realmente lujoso, el trStyle puede funcionar. Echa un vistazo al siguiente componente de la tabla que da un estilo diferente a las filas donde el nombre es "George Michael":

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 css 'rowClassNameFormat (row, rowIdx) // row es el objeto de row entero // rowIdx es el índice de la fila console.log (row) return row [' name '] ===' George Michael '? 'GeorgeMichael-Row': 'Otra fila';  class Table3 extiende Component render () return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar tabla 3 por defecto 

los GeorgeMichael-Row y Otra fila Las clases de CSS se definen en Table.css:

.Encabezado de la tabla fondo-color: #ccc; color azul; relleno: 10px; alineación de texto: izquierda;  .GeorgeMichael-Row background-color: plum;  .Other-Row background-color: greenyellow; 

Seleccionando filas

Una vez que tenga sus datos en una tabla, es posible que desee seleccionar algunas filas para realizar algunas operaciones en ellas. React-bootstrap-table ofrece una amplia variedad de opciones de selección. Todas las opciones están organizadas en un solo objeto que usted pasa al componente como el selectRow atributo. Estas son algunas de las opciones de selección:

• modo de selección individual (botón de radio)
• modo de selección múltiple (casilla de verificación)
• ancho de selección de columna configurable
• Seleccione en la fila haga clic: por defecto debe hacer clic en el selector (botón de opción o casilla de verificación)
• ocultar la columna de selección (útil si la selección en la fila es verdadera)
• cambiar el color de fondo en la selección
• filas seleccionadas iniciales
• ganchos de selección (en una sola fila o cuando se seleccionan todas las filas).

Los siguientes componentes demuestran muchas de estas opciones:

importar React, Componente desde 'reaccionar' importar BootstrapTable, TableHeaderColumn desde 'react-bootstrap-table' import '... /css/Table.css' import '… /dist/react-bootstrap-table-all.min. función css 'onSelectRow (fila, isSelected, e) if (isSelected) alert (' Usted acaba de seleccionar '$ row [' name '] ") const selectRowProp = mode:' checkbox ', clickToSelect: true , no seleccionable: [2], seleccionado: [1], onSelect: onSelectRow, bgColor: 'gold'; la clase Table4 extiende el Componente render () return ( 
   CARNÉ DE IDENTIDAD   Nombre   Valor   
 ) exportar por defecto Table4

Conclusión

En esta 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 la siguiente parte, continuaremos el viaje expandiendo filas, agregando filas, eliminando filas y cubriendo paginación, edición de celdas y personalización avanzada. Manténganse al tanto.