Consertando Colunas em Tabelas React: Um Guia Completo

React Table é uma ferramenta poderosa para exibir dados tabulares, mas gerenciar colunas fixas pode ser complicado. Este guia fornece uma abordagem clara e específica da versão para manter as colunas estacionárias durante a rolagem horizontal.

Sumário

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

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

O React Table v7 introduziu mudanças significativas na API. Para colunas fixas, react-table-sticky oferece uma solução simplificada.

1. Instalação

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

2. Implementação

Este exemplo demonstra como fixar a coluna ‘ID’ à esquerda:

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' },
  // ... mais dados
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Nome', accessor: 'name' },
  { Header: 'Idade', accessor: 'age' },
  { Header: 'Cidade', 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;

A propriedade sticky: 'left' na definição da coluna fixa a coluna ‘ID’. Use sticky: 'right' para colunas fixas do lado direito.

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

Para versões mais antigas do React Table, react-table-hoc-fixed-columns fornece uma solução usando Higher-Order Components (HOCs).

1. Instalação

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

2. Implementação

A implementação depende da sua versão específica do React Table. Consulte a documentação da biblioteca para obter instruções detalhadas. A abordagem geral envolve envolver seu componente de tabela com o HOC fixedColumns. Um exemplo simplificado (consulte a documentação da biblioteca para detalhes específicos da versão):

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

// ... sua definição de dados e colunas ...

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

// ... resto do seu componente

Consulte sempre a documentação oficial de react-table-sticky e react-table-hoc-fixed-columns para obter as informações mais precisas e atualizadas.