Fixer les colonnes dans un tableau React : Guide complet

React Table est un outil puissant pour afficher des données tabulaires, mais la gestion des colonnes fixes peut être délicate. Ce guide fournit une approche claire et spécifique à la version pour maintenir les colonnes fixes lors du défilement horizontal.

Table des matières

• Utiliser react-table-sticky pour React Table v7 et supérieur
• Utiliser react-table-hoc-fixed-columns pour React Table v6 et inférieur

Utiliser react-table-sticky pour React Table v7 et supérieur

React Table v7 a introduit des changements importants dans l’API. Pour les colonnes fixes, react-table-sticky offre une solution simplifiée.

1. Installation

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

2. Implémentation

Cet exemple montre comment fixer la colonne ‘ID’ à gauche :

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' },
  // ... plus de données
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Nom', accessor: 'name' },
  { Header: 'Âge', accessor: 'age' },
  { Header: 'Ville', 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 propriété sticky: 'left' dans la définition de la colonne fixe la colonne ‘ID’. Utilisez sticky: 'right' pour les colonnes fixes à droite.

Utiliser react-table-hoc-fixed-columns pour React Table v6 et inférieur

Pour les versions antérieures de React Table, react-table-hoc-fixed-columns fournit une solution utilisant les Higher-Order Components (HOC).

1. Installation

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

2. Implémentation

L’implémentation dépend de votre version spécifique de React Table. Consultez la documentation de la bibliothèque pour des instructions détaillées. L’approche générale consiste à encapsuler votre composant de tableau avec le HOC fixedColumns. Un exemple simplifié (consultez la documentation de la bibliothèque pour des détails spécifiques à la version) :

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

// ... votre définition de données et de colonnes ...

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

// ... reste de votre composant

Consultez toujours la documentation officielle de react-table-sticky et react-table-hoc-fixed-columns pour obtenir les informations les plus précises et les plus à jour.