Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Trabajar con tablas en React, primera parte

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Working With Tables in React.
Working With Tables in React, Part Two

Spanish (Español) translation by Marsel Toussaint (you can also view the original English article)

Resumen

Uno de los elementos de interfaz de usuario más comunes para presentar datos es una tabla. Hay muchos aspectos que controlar al trabajar con tablas, tales como:

  • definiendo columnas y encabezados
  • varios formatos de celda (texto, números, campos de selección)
  • redimensión
  • filtrado
  • crecimiento dinámico
  • diseño

En esta serie de dos partes, aprenderás sobre los pormenores de trabajar con datos tabulares en React usando el componente React Bootstrap Table. Podrás crear tablas sofisticadas y muy profesionales por defecto con poco esfuerzo y aparte pudiendo personalizar lo que quieras.

Crea una aplicación Vanilla React

Asumo que estás familiarizado con React y te centrarás en trabajar con React Bootstrap Table. Envato Tuts+ tiene una gran serie en React que puedes leer para contexto.

En pocas palabras, use react-create-app para crear una aplicación Vanilla en React y luego instalé la react-bootstrap-table: npm install react-bootstrap-table --save.

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

WebStorm

Si utilizas JetBrains de WebStorm y quieres ejecutar las pruebas, agrega --env-jsdom en la configuración de ejecución.

Tabla básica

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

El método render() representa una tabla con tres columnas: "Identificacón", "Nombre" y "Valor". Los datos reales de la tabla proceden de la propiedad "data" (this.props.data). Los datos contienen los nombres de algunos personajes del cómico programa Arrested Development.

He creado una instancia de BasicTable en el método render() de la App.js estándar y pasé algunos datos de codificación fija:

Para ver la tabla, escribe: npm start. La configuración creada por create-react-app vigila el código y se vuelve a compilar cada vez que cambias algo, por lo que necesitas ejecutarlo solo una vez y después cada cambio se reflejará automáticamente.

Aquí está el resultado:

Basic table output with three columns and rows

Ten 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 se pueden especificar en unidades absolutas como porcentajes o se pueden dejar sin especificar. El ancho de columna de las que no estan especificadas es el resto dividido por igual. Por ejemplo, para un ancho de tabla de 100 px, una columna especificada 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 usan 70 px juntos, lo que deja 30 px para las columnas 4 y 5, que se dividirán por igual. La columna 4 y 5 tendrán cada una un ancho de 15 px. Ten en cuenta que si se redimensiona la tabla, los números cambiarán. Sólo la columna 1 siempre será de 15 px de ancho.

Las otras columnas se calcularán en función al ancho de la tabla. También puedes administrar la alineación de texto y columnas, así como el diseño de encabezados y columnas. Aquí hay un ejemplo de cómo especificar diferentes anchos de columna, alineación de texto y diseños personalizados:

Working with Columns

Diseñando tu tabla

Ya viste cómo diseñar columnas y encabezados individuales, pero el estilo puede ir mucho más allá. React-bootstrap-table proporciona muchas opciones para la personalización. En primer lugar, simplemente puedes agregar los atributos rayados y de desplazo al componente BootstrapTable para obtener colores de fondo alternativos en cada fila: <BootstrapTable data="{this.props.data}" striped="" hover=""></BootstrapTable>

Para aplicar el diseño a todas las filas, usa trClassName: <BootstrapTable data="{data}" trclassname='tr-style'></BootstrapTable>

Si quieres ponerte muy elegante, el trStyle puede funcionar. Checa el siguiente componente de tabla que diseña diferentes filas donde el nombre es "George Michael":

Las clases CSS GeorgeMichael-Row y Other-Row se definen en Table.css:

Styling the table

Seleccionando filas

Una vez que tengas los datos en una tabla, es posible que quieras seleccionar algunas filas para realizar algunas operaciones. React-bootstrap-table ofrece una amplia variedad de opciones de selección. Todas las opciones se organizan en un único objeto que se pasa al componente como el atributo selectRow. Estas son algunas de las opciones de selección:

  • modo de selección única (botón de opción)
  • modo de selección múltiple (cajón de verificación)
  • ancho de selección de columna configurable
  • seleccionar con el clic de fila: por defecto debes hacer clic en el selector (botón de opción o cajón de verificación)
  • ocultar selección de columna (útil si seleccionar con el clic de fila es real)
  • 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 muestran muchas de estas opciones:

Selecting Rows

Conclusión

En esta parte, creamos una sencilla aplicación de React usando react-create-app, agregamos React-Bootstrap-Table, rellenamos una tabla con datos, trabajamos con columnas, diseñamos la tabla y seleccionamos filas.

En la siguiente parte, continuaremos el recorrido expandiendo filas, agregando filas, eliminando filas y cubriendo paginación, edición de celdas y personalización avanzada. Estén atentos.

Advertisement
Advertisement
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.