Aller au contenu principal

useTableColumnVisibility

Ce hook facilite la gestion de la visibilité des colonnes (utilisant TanStack React Table) en synchronisant automatiquement l'état avec les cookies du navigateur. Cela permet aux utilisateurs de personnaliser les colonnes affichées et de conserver leurs préférences lors de futures visites.

Retour du hook​

Le hook retourne un objet contenant :

PropriétéTypeDescription
columnVisibilityVisibilityStateL'état actuel de la visibilité des colonnes
onColumnVisibilityChangeDispatch<SetStateAction<VisibilityState>>Fonction pour mettre à jour la visibilité des colonnes

Types​

interface IUseTableColumnVisibility {
  columnVisibility: VisibilityState;
  onColumnVisibilityChange: Dispatch<SetStateAction<VisibilityState>>;
}

Paramètres​

useTableColumnVisibility(
  cookieName: string,           // Nom du cookie pour la persistance
  defaultValues?: VisibilityState // Valeurs par défaut des colonnes visibles
)

Utilisation basique​

import { useTableColumnVisibility } from '@/hooks/use-table-column-visibility';
import { useReactTable, getCoreRowModel } from '@tanstack/react-table';

export function ProductTable() {
  const { columnVisibility, onColumnVisibilityChange } = useTableColumnVisibility(
    'product_columns'
  );

  const columns = [
    { accessorKey: 'id', header: 'ID' },
    { accessorKey: 'name', header: 'Nom' },
    { accessorKey: 'price', header: 'Prix' },
    { accessorKey: 'stock', header: 'Stock' },
    { accessorKey: 'category', header: 'Catégorie' },
  ];

  const table = useReactTable({
    data: products,
    columns,
    state: {
      columnVisibility,
    },
    onColumnVisibilityChange,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>{header.column.columnDef.header}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{cell.getValue()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Fonctionnement​

  1. Initialisation : Charge l'état depuis les cookies ou utilise les valeurs par défaut
  2. Stockage : Chaque changement de visibilité est sauvegardé dans un cookie
  3. Persistance : Au retour de l'utilisateur, les préférences sont restaurées automatiquement
  4. Nettoyage : Les cookies vides sont supprimés automatiquement
{
  "id": true,
  "name": true,
  "price": true,
  "stock": false,
  "category": true
}

Cas d'usage courants​

1. Afficher/Masquer une colonne​

const { columnVisibility, onColumnVisibilityChange } = useTableColumnVisibility('table_cols');

const toggleColumn = (columnId: string) => {
  onColumnVisibilityChange((prev) => ({
    ...prev,
    [columnId]: !prev[columnId],
  }));
};

2. Masquer plusieurs colonnes​

const hideColumns = (columnIds: string[]) => {
  onColumnVisibilityChange((prev) => {
    const newState = { ...prev };
    columnIds.forEach((id) => {
      newState[id] = false;
    });
    return newState;
  });
};

3. Afficher uniquement certaines colonnes​

const showOnlyColumns = (columnIds: string[]) => {
  onColumnVisibilityChange((prev) => {
    const newState = { ...prev };
    Object.keys(newState).forEach((key) => {
      newState[key] = columnIds.includes(key);
    });
    return newState;
  });
};

4. Réinitialiser aux valeurs par défaut​

const { onColumnVisibilityChange } = useTableColumnVisibility('table_cols', {
  id: true,
  name: true,
  email: true,
});

const reset = () => {
  onColumnVisibilityChange({
    id: true,
    name: true,
    email: true,
  });
};

Points importants​

  • ⚠️ Les préférences sont sauvegardées dans les cookies du navigateur
  • ⚠️ Les cookies vides sont supprimés automatiquement
  • ⚠️ L'utilisateur peut désactiver les cookies, ce qui empêche la persistance
  • ℹ️ Compatible avec TanStack React Table v8+
  • ℹ️ Utilise la bibliothèque js-cookie pour gérer les cookies
  • ℹ️ Valide les données avec @i-maginexr/js
  • ✅ Améliore l'expérience utilisateur en sauvegardant les préférences
  • ✅ Permet une personnalisation complète de l'affichage

Sources​