Production-ready data table with server-side pagination, advanced filtering, sorting, export, bulk actions, and responsive mobile view. Built with TanStack Table.

Advanced Data Table

Un composant de tableau de données avancé et prêt pour la production, conçu pour les applications SaaS. Il offre de nombreuses fonctionnalités telles que la recherche, le tri, la pagination, la sélection, les actions en masse, l'export et bien plus encore.

Installation

Le composant est déjà inclus dans le projet. Importez-le depuis :

advanced-data-table.tsx

import { AdvancedDataTable } from "@/components/saascn/advanced-data-table";

Utilisation de base

Voici un exemple simple d'utilisation :

import { AdvancedDataTable } from "@/components/saascn/advanced-data-table";
import type { DataTableColumnDef } from "@/components/saascn/advanced-data-table";

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}

const columns: DataTableColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: "Name",
  },
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "role",
    header: "Role",
  },
];

const users: User[] = [
  { id: "1", name: "John Doe", email: "john@example.com", role: "Admin" },
  { id: "2", name: "Jane Smith", email: "jane@example.com", role: "User" },
];

export function MyTable() {
  return (
    <AdvancedDataTable
      data={users}
      columns={columns}
      getRowId={(row) => row.id}
    />
  );
}

Fonctionnalités principales

Recherche

Activez la recherche avec la prop searchable :

<AdvancedDataTable
  data={users}
  columns={columns}
  searchable
  searchPlaceholder="Rechercher des utilisateurs..."
/>

Sélection de lignes

Permettez aux utilisateurs de sélectionner une ou plusieurs lignes :

<AdvancedDataTable
  data={users}
  columns={columns}
  selectable
  selectionMode="multiple" // ou "single"
  onSelectionChange={(rows) => {
    console.log("Lignes sélectionnées:", rows);
  }}
/>

Actions sur les lignes

Ajoutez des actions pour chaque ligne :

import { createCrudActions } from '@/components/saascn/advanced-data-table'

const rowActions = createCrudActions<User>({
  onView: (row) => {
    console.log('Voir:', row)
  },
  onEdit: (row) => {
    console.log('Modifier:', row)
  },
  onDelete: (row) => {
    console.log('Supprimer:', row)
  },
})

<AdvancedDataTable
  data={users}
  columns={columns}
  rowActions={rowActions}
/>

Actions en masse

Ajoutez des actions pour les lignes sélectionnées :

import type { BulkAction } from '@/components/saascn/advanced-data-table'

const bulkActions: BulkAction<User>[] = [
  {
    id: 'export',
    label: 'Exporter la sélection',
    onAction: (rows) => {
      console.log('Exporter:', rows)
    },
  },
  {
    id: 'delete',
    label: 'Supprimer',
    variant: 'destructive',
    onAction: (rows) => {
      console.log('Supprimer:', rows)
    },
  },
]

<AdvancedDataTable
  data={users}
  columns={columns}
  selectable
  bulkActions={bulkActions}
/>

Export de données

Activez l'export vers différents formats :

<AdvancedDataTable
  data={users}
  columns={columns}
  exportable
  exportFormats={["csv", "json", "xlsx"]}
  exportFilename="users-export"
/>

Tri et filtres

Le tri est activé par défaut. Vous pouvez également ajouter des filtres personnalisés :

<AdvancedDataTable
  data={users}
  columns={columns}
  sortable
  multiSort // Permet le tri sur plusieurs colonnes
  filterable
  filterSlot={<YourCustomFilterComponent />}
/>

Pagination

La pagination est activée par défaut. Personnalisez-la :

<AdvancedDataTable
  data={users}
  columns={columns}
  paginated
  pageSizeOptions={[10, 20, 50, 100]}
  initialPageSize={20}
/>

Mode serveur (Server-side)

Pour de grandes quantités de données, utilisez le mode serveur :

import { createSupabaseAdapter } from '@/components/saascn/advanced-data-table'

const adapter = createSupabaseAdapter<User>({
  client: supabase,
  table: 'users',
  searchableColumns: ['name', 'email'],
})

<AdvancedDataTable
  fetcher={adapter.fetch}
  columns={columns}
  serverSide
/>

Personnalisation des colonnes

Vous pouvez personnaliser l'affichage des cellules :

const columns: DataTableColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: "Name",
    cell: ({ row }) => {
      const user = row.original;
      return (
        <div className="flex items-center gap-2">
          <Avatar>
            <AvatarImage src={user.avatar} />
            <AvatarFallback>{user.name[0]}</AvatarFallback>
          </Avatar>
          <span>{user.name}</span>
        </div>
      );
    },
  },
  {
    accessorKey: "status",
    header: "Status",
    cell: ({ row }) => {
      const status = row.getValue("status") as string;
      return (
        <Badge variant={status === "active" ? "default" : "secondary"}>
          {status}
        </Badge>
      );
    },
  },
];

Options de style

Personnalisez l'apparence du tableau :

<AdvancedDataTable
  data={users}
  columns={columns}
  striped // Lignes alternées
  bordered // Bordure visible
  compact // Mode compact
  className="custom-class"
/>

Props principales

Prop	Type	Défaut	Description
`data`	`TData[]`	-	Données à afficher (mode client)
`fetcher`	`DataTableFetcher<TData>`	-	Fonction de récupération (mode serveur)
`columns`	`DataTableColumnDef<TData>[]`	-	Définition des colonnes
`serverSide`	`boolean`	`false`	Active le mode serveur
`searchable`	`boolean`	`false`	Active la recherche
`selectable`	`boolean`	`false`	Active la sélection
`exportable`	`boolean`	`false`	Active l'export
`paginated`	`boolean`	`true`	Active la pagination
`sortable`	`boolean`	`true`	Active le tri
`filterable`	`boolean`	`false`	Active les filtres
`rowActions`	`RowAction<TData>[]`	`[]`	Actions sur les lignes
`bulkActions`	`BulkAction<TData>[]`	`[]`	Actions en masse
`onRowClick`	`(row: TData) => void`	-	Callback au clic sur une ligne

Exemple complet

Consultez le fichier de démo pour un exemple complet avec toutes les fonctionnalités :

src/app/demo/[name]/ui/advanced-data-table-demo.tsx

Data Table

On this page