DataTable

Le composant DataTable offre une solution complète et performante pour afficher et gérer des tableaux de données complexes. Il supporte le tri, la pagination, la virtualisation et l'affichage/masquage de colonnes, idéal pour :

• Afficher des listes de données volumineuses
• Implémenter des tableaux administratifs avec filtrage et tri
• Gérer des colonnes fixes et défilables
• Afficher des états de chargement et validation
• Créer des interfaces de gestion de données performantes

Le composant offre une expérience utilisateur fluide avec support du tri multicouche, pagination côté serveur et gestion avancée de la visibilité des colonnes.

Utilisation basique

Affiche un tableau simple avec des données passées via l'objet table créé avec @tanstack/react-table.

import { DataTable } from '@/components/data-table';
import { ColumnDef, useReactTable, getCoreRowModel } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Nom',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
];

export default function Component() {
  const data: User[] = [
    { id: '1', name: 'Alice', email: 'alice@example.com' },
    { id: '2', name: 'Bob', email: 'bob@example.com' },
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return <DataTable table={table} />
}

Utilisation avec pagination

Active l'affichage des contrôles de pagination pour naviguer entre les pages des données.

import { DataTable } from '@/components/data-table';
import { ColumnDef, useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Nom',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
];

export default function Component() {
  const data: User[] = [
    // ... données
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: {
      pagination: {
        pageIndex: 0,
        pageSize: 10,
      },
    },
  });

  return <DataTable table={table} showPagination={true} />
}

Utilisation avec tri

Configure les colonnes pour supporter le tri en cliquant sur l'en-tête. Le tri est géré via la métadonnée sortable et l'icône ArrowUpDown change selon l'état du tri.

import { DataTable } from '@/components/data-table';
import { ColumnDef, useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    meta: {
      sortable: true,
    },
  },
  {
    accessorKey: 'name',
    header: 'Nom',
    meta: {
      sortable: true,
    },
  },
  {
    accessorKey: 'email',
    header: 'Email',
    meta: {
      sortable: true,
    },
  },
];

export default function Component() {
  const data: User[] = [
    // ... données
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  return <DataTable table={table} />
}

Utilisation avec colonnes masquables

Affiche un bouton pour basculer la visibilité des colonnes. Seules les colonnes sans columnDropdownRender: false sont affichées dans le sélecteur.

import { DataTable, DataTableColumnsDropdown } from '@/components/data-table';
import { ColumnDef, useReactTable, getCoreRowModel, getVisibleLeafColumns } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
    meta: {
      columnDropdownRender: false,
    },
  },
  {
    accessorKey: 'name',
    header: 'Nom',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
];

export default function Component() {
  const data: User[] = [
    // ... données
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <div className="space-y-4">
      <DataTableColumnsDropdown table={table} />
      <DataTable table={table} />
    </div>
  )
}

Utilisation avec colonnes fixes

Marque une colonne comme action (à droite fixe) qui reste visible lors du défilement horizontal. La colonne est mise en évidence si le tableau est scrollé.

import { DataTable } from '@/components/data-table';
import { ColumnDef, useReactTable, getCoreRowModel } from '@tanstack/react-table';

type User = {
  id: string;
  name: string;
  email: string;
};

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: 'Nom',
  },
  {
    accessorKey: 'email',
    header: 'Email',
  },
  {
    id: 'actions',
    header: 'Actions',
    cell: () => <button>Éditer</button>,
    meta: {
      actionColumn: true,
    },
  },
];

export default function Component() {
  const data: User[] = [
    // ... données
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return <DataTable table={table} />
}

Référence API

DataTable

Prop	Type	Default	Description
table	ITable<any>	-	Instance du tableau créée avec useReactTable de @tanstack/react-table
showPagination	boolean	false	Affiche les contrôles de pagination si true et s'il y a plus d'une page

DataTableColumnsDropdown

Prop	Type	Default	Description
table	ITable<any>	-	Instance du tableau pour gérer la visibilité des colonnes

DataTablePagination

Prop	Type	Default	Description
table	ITable<any>	-	Instance du tableau pour gérer la pagination et l'affichage des contrôles

Métadonnées de colonne (Column Meta)

Les métadonnées personnalisées pour les colonnes permettent de configurer le comportement et l'apparence :

meta: {
  // Affichage et visibilité
  columnDropdownRender?: boolean;      // Affiche la colonne dans le sélecteur de colonnes
  columnDropdownText?: string;          // Texte alternatif dans le sélecteur de colonnes

  // Tri
  sortable?: boolean;                   // Permet le tri de la colonne

  // Alignement du texte
  textAlign?: 'left' | 'center' | 'right';
  headerTextAlign?: 'left' | 'center' | 'right';
  contentTextAlign?: 'left' | 'center' | 'right';

  // Styling
  className?: string;                   // Classes CSS appliquées à la cellule et l'en-tête
  headerClassName?: string;              // Classes CSS appliquées à l'en-tête
  cellClassName?: string;                // Classes CSS appliquées à la cellule

  // Colonnes fixes
  actionColumn?: boolean;                // Fixe la colonne à droite avec styling spécial
}

Typescript

DataTableProps

interface DataTableProps {
  table: ITable<any>;
  showPagination?: boolean;
}

interface DataTableColumnsDropdownProps {
  table: ITable<any>;
}

interface DataTablePaginationProps {
  table: ITable<any>;
}

Performance

Le composant utilise plusieurs optimisations pour maintenir les performances :

• Utilisation de @tanstack/react-virtual pour la virtualisation potentielle
• Memoization des rendus de cellules et lignes
• Support du chargement en arrière-plan via l'état validating
• Gestion efficace du re-rendu lors des changements de page