Establecer el ancho de columna con la biblioteca React-Table

1. Personalice el ancho de columna con la biblioteca react-table
2. Utilice el método .getHeaderProps() para especificar el ancho de columna con la biblioteca react-table

React es el marco más popular para crear aplicaciones front-end. Es normal que las aplicaciones modernas contengan mucha información; organizar los datos sin procesar en tablas puede hacer que la vasta información sea más fácil de digerir.

La biblioteca react-table proporciona la lógica necesaria para crear tablas en React. Sin embargo, debe crear la interfaz de usuario de la tabla usted mismo.

En este artículo, queremos mostrar cómo los usuarios pueden personalizar la apariencia de las tablas, por ejemplo, ajustar el ancho de la columna.

Personalice el ancho de columna con la biblioteca react-table

react-table es una biblioteca de interfaz de usuario sin encabezado para crear tablas en React. Solo proporciona lógica, no la interfaz de usuario real.

Los desarrolladores de React pueden usar el enlace useTable de la biblioteca react-table para crear una tabla basada en datos sin procesar e información de columnas.

Echemos un vistazo a este componente Tabla:

function Table({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps({
                  style: {
                    minWidth: 200,
                    width: 250,
                    border: "1px solid black"
                  }
                })}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

Es un ejemplo básico de una tabla creada con el gancho useTable. En él, usamos elementos HTML para diseñar tablas.

El componente HTML <tabla> está en el nivel más alto. También tenemos <thead>, <tr>, <th>, y otros elementos.

Si desea inspeccionar el código usted mismo, puede hacerlo en CodeSandbox.

Utilice el método .getHeaderProps() para especificar el ancho de columna con la biblioteca react-table

Debe definir los elementos de la interfaz de usuario usted mismo si tiene una tabla creada con un enlace useTable(). Ahí es donde entra en juego el código HTML <th>.

Define un encabezado para la tabla. En otras palabras, etiquete la celda en la parte superior de la columna.

En el ejemplo anterior, usamos el método .getHeaderProps() con un argumento: un objeto de estilo, que anulará los estilos predeterminados para el elemento <th>.

Echemos un vistazo al código real:

<th
    {...column.getHeaderProps({
                              style: {
                              minWidth: 200,
                              width: 250,
                              border: "1px solid black"
                  }
                })}
              >

Esta es la forma más fácil de especificar el ancho de columna al crear tablas con la biblioteca react-table. En este caso, especificamos los parámetros minWidth y width para ajustar el tamaño de la columna.

En realidad, puede aplicar cualquier propiedad CSS, siempre que tenga el estilo de un objeto.

Por ejemplo, si desea aplicar la propiedad min-width como un estilo en línea, se convertirá en minWidth. Esto se hace porque todos los estilos deben formatearse como un objeto.

Puede consultar el código e intentar editarlo usted mismo en CodeSandbox.