@lucab431/wh-table

Un composant React moderne et réactif pour afficher des tableaux avec tri intégré, basé sur @tanstack/react-table.
Idéal pour les dashboards, listes de données et interfaces d'administration.

📋 Table des matières

• Installation
• Utilisation de base
• Props
• Fonctionnalités
• Styling
• Exemples avancés
• Dépendances
• Contribution
• Licence

📦 Installation

npm install @lucab431/wh-table

yarn add @lucab431/wh-table

pnpm add @lucab431/wh-table

🚀 Utilisation de base

import { Table } from "@lucab431/wh-table";
import { ColumnDef } from "@tanstack/react-table";

interface Person {
  id: number;
  name: string;
  email: string;
  age: number;
}

const data: Person[] = [
  { id: 1, name: "John Doe", email: "[email protected]", age: 30 },
  { id: 2, name: "Jane Smith", email: "[email protected]", age: 25 },
];

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: "name",
    header: "Nom",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "age",
    header: "Âge",
  },
];

function App() {
  return (
    <Table
      data={data}
      columns={columns}
      emptyMessage="Aucune donnée disponible"
    />
  );
}

📋 Props

| Prop | Type | Défaut | Description | | -------------- | ------------------------- | ----------- | ---------------------------------------------------- | | data | TData[] | Requis | Tableau de données à afficher | | columns | ColumnDef<TData, any>[] | Requis | Définition des colonnes utilisant TanStack Table | | emptyMessage | string | "No data" | Message affiché quand aucune donnée n'est disponible |

✨ Fonctionnalités

• 🔄 Tri interactif : Cliquez sur les en-têtes de colonnes pour trier les données
• 📱 Interface responsive : S'adapte automatiquement aux différentes tailles d'écran
• 🏷️ TypeScript : Support complet de TypeScript avec typage générique
• 🎨 Personnalisable : Basé sur TanStack Table pour une flexibilité maximale
• 💎 Styling moderne : Design avec Tailwind CSS pour un rendu élégant

📊 Indicateurs du tri

Le composant affiche automatiquement des indicateurs visuels pour le tri :

• ⇅ : Colonne triable (état par défaut)
• ▲ : Tri croissant
• ▼ : Tri décroissant

🎨 Styling

Le composant utilise Tailwind CSS pour le styling. Les classes principales utilisées :

• border-1 rounded-2xl shadow-md border-gray-300 : Style du tableau
• p-2 text-left : Style des cellules d'en-tête
• p-2 h-16 border-t : Style des cellules de données
• text-center text-gray-500 : Style du message vide

Vous pouvez surcharger ces styles en utilisant CSS personnalisé ou en modifiant les classes Tailwind.

📖 Exemples avancés

Colonnes personnalisées avec rendu

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: "name",
    header: "Nom complet",
    cell: ({ row }) => (
      <div className="font-semibold">{row.getValue("name")}</div>
    ),
  },
  {
    accessorKey: "email",
    header: "Contact",
    cell: ({ row }) => (
      <a href={`mailto:${row.getValue("email")}`} className="text-blue-600">
        {row.getValue("email")}
      </a>
    ),
  },
];

Avec des actions

const columns: ColumnDef<Person>[] = [
  // ... autres colonnes
  {
    id: "actions",
    header: "Actions",
    cell: ({ row }) => (
      <div className="flex gap-2">
        <button
          onClick={() => handleEdit(row.original)}
          className="px-2 py-1 bg-blue-500 text-white rounded"
        >
          Modifier
        </button>
        <button
          onClick={() => handleDelete(row.original)}
          className="px-2 py-1 bg-red-500 text-white rounded"
        >
          Supprimer
        </button>
      </div>
    ),
  },
];

Tri personnalisé

const columns: ColumnDef<Person>[] = [
  {
    accessorKey: "age",
    header: "Âge",
    sortingFn: (rowA, rowB) => {
      return rowA.getValue("age") - rowB.getValue("age");
    },
  },
];

🔧 Dépendances

• @tanstack/react-table: ^8.21.3
• react: ^19.1.0 (peer dependency)
• react-dom: ^19.1.0 (peer dependency)

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou soumettre une pull request.

1. Fork le projet
2. Créez votre branche de fonctionnalité (git checkout -b feature/AmazingFeature)
3. Committez vos changements (git commit -m 'Add some AmazingFeature')
4. Push vers la branche (git push origin feature/AmazingFeature)
5. Ouvrez une Pull Request

📝 Licence

ISC - voir le fichier LICENSE pour plus de détails.

👨‍💻 Auteur

Luca - @Luca-B431

Fait avec ❤️ pour la communauté React