Arreglar Columnas en Tablas React: Una Guía Completa

React Table es una herramienta poderosa para mostrar datos tabulares, pero gestionar columnas fijas puede ser complicado. Esta guía proporciona un enfoque claro y específico de la versión para mantener las columnas fijas mientras se desplaza horizontalmente.

Tabla de contenido

• Usando react-table-sticky para React Table v7 y superior
• Usando react-table-hoc-fixed-columns para React Table v6 e inferior

Usando react-table-sticky para React Table v7 y superior

React Table v7 introdujo cambios significativos en la API. Para columnas fijas, react-table-sticky ofrece una solución simplificada.

1. Instalación

npm install react-table-sticky
# o
yarn add react-table-sticky

2. Implementación

Este ejemplo muestra cómo fijar la columna ‘ID’ a la izquierda:

import React from 'react';
import { useTable, useSticky } from 'react-table';
import { FixedColumnsTable } from 'react-table-sticky';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'London' },
  // ... más datos
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Nombre', accessor: 'name' },
  { Header: 'Edad', accessor: 'age' },
  { Header: 'Ciudad', accessor: 'city' },
];

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSticky);

  return (
    <FixedColumnsTable {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </FixedColumnsTable>
  );
}

export default MyTable;

La propiedad sticky: 'left' en la definición de la columna fija la columna ‘ID’. Use sticky: 'right' para columnas fijas del lado derecho.

Usando react-table-hoc-fixed-columns para React Table v6 e inferior

Para versiones anteriores de React Table, react-table-hoc-fixed-columns proporciona una solución utilizando Higher-Order Components (HOC).

1. Instalación

npm install react-table-hoc-fixed-columns
# o
yarn add react-table-hoc-fixed-columns

2. Implementación

La implementación depende de su versión específica de React Table. Consulte la documentación de la biblioteca para obtener instrucciones detalladas. El enfoque general consiste en envolver su componente de tabla con el HOC fixedColumns. Un ejemplo simplificado (consulte la documentación de la biblioteca para obtener detalles específicos de la versión):

import React from 'react';
import { useTable } from 'react-table';
import { fixedColumns } from 'react-table-hoc-fixed-columns';

// ... su definición de datos y columnas ...

const MyTable = fixedColumns(({ getTableProps, ...rest }) => (
  <YourOriginalTableComponent {...rest} {...getTableProps()} />
));

// ... resto de su componente

Siempre consulte la documentación oficial de react-table-sticky y react-table-hoc-fixed-columns para obtener la información más precisa y actualizada.