Reddot UI Library

Docs
Table

Table

A responsive table component for displaying structured data.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/table.json

Utilisation

Importez les composants table :

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  TableFooter
} from "@/components/ui/table"

Exemple d'implémentation :

const invoices = [
  {
    invoice: "INV001",
    paymentStatus: "Payée",
    paymentMethod: "Carte de crédit",
    totalAmount: "$250.00",
  },
  {
    invoice: "INV002",
    paymentStatus: "En attente",
    paymentMethod: "PayPal",
    totalAmount: "$150.00",
  },
  // Plus de factures...
]
 
export function TableDemo() {
  return (
    <Table>
      <TableCaption>Liste de vos factures récentes.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Facture</TableHead>
          <TableHead>Statut</TableHead>
          <TableHead>Méthode</TableHead>
          <TableHead className="text-right">Montant</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.paymentStatus}</TableCell>
            <TableCell>{invoice.paymentMethod}</TableCell>
            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$2,500.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Exemples

Table simple

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
 
export function SimpleTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Nom</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Rôle</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Jane Smith</TableCell>
          <TableCell>jane@example.com</TableCell>
          <TableCell>Utilisateur</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Table avec actions

import { Button } from "@/components/ui/button"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { MoreHorizontal } from "lucide-react"
 
export function TableWithActions() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Produit</TableHead>
          <TableHead>Prix</TableHead>
          <TableHead>Stock</TableHead>
          <TableHead className="text-right">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Laptop</TableCell>
          <TableCell>999€</TableCell>
          <TableCell>5</TableCell>
          <TableCell className="text-right">
            <Button variant="ghost" size="sm">
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

API Reference

Table

Conteneur principal du tableau.

PropTypeDefaultDescription
classNamestring-Classes CSS additionnelles.

TableHeader

En-tête du tableau contenant les titres de colonnes.

TableBody

Corps du tableau contenant les lignes de données.

TableFooter

Pied de tableau optionnel pour les totaux ou résumés.

TableRow

Une ligne du tableau.

PropTypeDefaultDescription
classNamestring-Classes CSS additionnelles.

TableHead

Cellule d'en-tête du tableau.

PropTypeDefaultDescription
classNamestring-Classes CSS additionnelles.

TableCell

Cellule de données du tableau.

PropTypeDefaultDescription
classNamestring-Classes CSS additionnelles.

TableCaption

Légende du tableau pour l'accessibilité.

Usage avancé

Pour des tableaux plus complexes avec tri, filtrage et pagination, combinez avec @tanstack/react-table.

Consultez la documentation Data Table pour plus de détails.

Conseils d'utilisation

Responsive

  • Utilisez des classes de largeur pour contrôler les colonnes
  • Considérez l'utilisation d'un défilement horizontal sur mobile
  • Utilisez text-right pour aligner les nombres

Accessibilité

  • Toujours fournir un TableCaption pour décrire le contenu
  • Utiliser des en-têtes appropriés avec TableHead
  • Maintenir un contraste de couleur suffisant

Performance

  • Pour de grandes quantités de données, considérez la virtualisation
  • Implémentez la pagination pour améliorer les performances
  • Utilisez React.memo pour les lignes complexes