Trabajar con tablas en React, primera parte

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

Resumen

Uno de los elementos de interfaz de usuario má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, números, campos de selección)
redimensión
filtrado
crecimiento dinámico
diseño

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

Crea una aplicación Vanilla React

Asumo que estás familiarizado con React y te centrará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 aplicación Vanilla en React y luego instalé la react-bootstrap-table: npm install react-bootstrap-table --save.

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, 
                  initial-scale=1, 
                  shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!-- Latest compiled and minified bootstrap CSS -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
                /css/bootstrap.min.css">

    <!-- bootstrap theme (Optional) -->
    <link rel="stylesheet" 
          href="https://maxcdn.bootstrapcdn.com/bootstrap/latest
               /css/bootstrap-theme.min.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

WebStorm

Si utilizas JetBrains de WebStorm y quieres ejecutar las pruebas, agrega --env-jsdom en la configuración de ejecución.

Tabla básica

Comenzaremos con una tabla básica. Aquí hay un componente para una tabla básica. Importa BoostrapTable y TableHeaderColumn de react-bootstrap-table y también el CSS desde el directorio dist.

El método render() representa una tabla con tres columnas: "Identificacó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 cómico programa Arrested Development.

import React, { Component } from 'react';
import {BootstrapTable, 
       TableHeaderColumn} from 'react-bootstrap-table';
import '../css/Table.css';
import '../../node_modules/react-bootstrap-table/css/
        react-bootstrap-table.css'


class Table1 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey dataField='id'>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'>
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default Table1;

He creado una instancia de BasicTable en el método render() de la App.js estándar y pasé algunos datos de codificación fija:

    import React, { Component } from 'react';
import './App.css';
import Table1 from './components/Table1'

var data = [
  {id: 1, name: 'Gob', value: '2'},
  {id: 2, name: 'Buster', value: '5'},
  {id: 3, name: 'George Michael', value: '4'}
];


class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="Table-header">Basic Table</p>
        <Table1 data={data}/>
      </div>
    );
  }
}

export default App;

Para ver la tabla, escribe: npm start. La configuración creada por create-react-app vigila el código y se vuelve a compilar cada vez que cambias algo, por lo que necesitas ejecutarlo solo una vez y después cada cambio se reflejará automáticamente.

Compiled successfully!

You can now view react-table in the browser.

  Local:            https://localhost:3000/
  On Your Network:  http://192.168.1.136:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

Aquí está 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 dividirán por igual. La columna 4 y 5 tendrán cada una un ancho de 15 px. Ten en cuenta que si se redimensiona la tabla, los números cambiarán. Sólo la columna 1 siempre será de 15 px de ancho.

Las otras columnas se calcularán en función al ancho de la tabla. También puedes administrar la alineación de texto y columnas, así como el diseño de encabezados y columnas. Aquí hay un ejemplo de cómo especificar diferentes anchos de columna, alineación de texto y diseños personalizados:

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} from 
       'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


class Table2 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data}>
          <TableHeaderColumn isKey
                             dataField='id'
                             dataAlign='center'
                             headerAlign="left"
                             width="30"
                             tdStyle={
                                 {backgroundColor: 'green'}}>
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
                             dataAlign='center'
                             headerAlign="center"
                             width="20%"
                             thStyle={
                                 {fontWeight: 'lighter', 
                                 color: 'red'}}>
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
                             dataAlign='center'
                             headerAlign="right">
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table2

Diseñando tu tabla

Ya viste cómo diseñar columnas y encabezados individuales, pero el estilo puede ir mucho más allá. React-bootstrap-table proporciona muchas opciones para la personalizació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 diseñ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 diseña diferentes filas donde el nombre es "George Michael":

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function rowClassNameFormat(row, rowIdx) {
  // row is whole row object
  // rowIdx is index of row
  console.log(row)
  return row['name'] === 'George Michael' ? 
    'GeorgeMichael-Row' : 'Other-Row';
}


class Table3 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        trClassName={rowClassNameFormat}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table3

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

.Table-header {
    background-color: #ccc;
    color: blue;
    padding: 10px;
    text-align: left;
}


.GeorgeMichael-Row {
    background-color: plum;
}

.Other-Row {
    background-color: greenyellow;
}

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 selección. Todas las opciones se organizan en un único objeto que se pasa al componente como el atributo selectRow. Estas son algunas de las opciones de selección:

modo de selección única (botón de opción)
modo de selección múltiple (cajón de verificación)
ancho de selección de columna configurable
seleccionar con el clic de fila: por defecto debes hacer clic en el selector (botón de opción o cajón de verificación)
ocultar selección de columna (útil si seleccionar con el clic de fila es real)
cambiar el color de fondo en la selección
filas seleccionadas iniciales
ganchos de selección (en una sola fila o cuando se seleccionan todas las filas).

Los siguientes componentes muestran muchas de estas opciones:

import React, {Component} from 'react'
import {BootstrapTable, TableHeaderColumn} 
        from 'react-bootstrap-table'
import '../css/Table.css'
import '../dist/react-bootstrap-table-all.min.css'


function onSelectRow(row, isSelected, e) {
  if (isSelected) {
    alert(`You just selected '${row['name']}'`)
  }
}

const selectRowProp = {
  mode: 'checkbox',
  clickToSelect: true,
  unselectable: [2],
  selected: [1],
  onSelect: onSelectRow,
  bgColor: 'gold'
};

class Table4 extends Component {
  render() {
    return (
      <div>
        <BootstrapTable data={this.props.data} 
                        selectRow={selectRowProp}
        >
          <TableHeaderColumn isKey dataField='id'
          >
            ID
          </TableHeaderColumn>
          <TableHeaderColumn dataField='name'
          >
            Name
          </TableHeaderColumn>
          <TableHeaderColumn dataField='value'
          >
            Value
          </TableHeaderColumn>
        </BootstrapTable>
      </div>
    )
  }
}

export default Table4

Conclusión

En esta parte, creamos una sencilla aplicación de React usando react-create-app, agregamos React-Bootstrap-Table, rellenamos una tabla con datos, trabajamos con columnas, diseñamos la tabla y seleccionamos filas.

En la siguiente parte, continuaremos el recorrido expandiendo filas, agregando filas, eliminando filas y cubriendo paginación, edición de celdas y personalización avanzada. Estén atentos.