Démo DataTable - Composant de Table Personnalisée

Démonstration Interactive

Testez le composant DataTable avec des données d'exemple

Fonctionnalités Avancées

Découvrez toutes les capacités du composant DataTable

Filtrage Avancé

Filtrez vos données par colonne avec des options personnalisées et une recherche globale.

Tri Multi-colonnes

Triez vos données sur plusieurs colonnes avec des indicateurs visuels clairs.

Export & Impression

Exportez vos données en CSV et imprimez vos tables avec une mise en page optimisée.

Colonnes Personnalisables

Redimensionnez, réorganisez et personnalisez l'affichage de vos colonnes.

Sélection Multiple

Sélectionnez plusieurs lignes pour des opérations en lot avec des actions personnalisées.

Internationalisation

Support complet de l'internationalisation avec des traductions personnalisables.

Comment Utiliser

Intégrez facilement le composant dans votre projet

Installation

# Installation via npm

                        npm install dragon-datatable

Import du Composant

// Import ES6

                        import { DataTable, Column } from 'dragon-datatable';

Configuration de Base

// Configuration des colonnes

                        const columns = [

                          {

                            key: 'name',

                            label: 'Nom',

                            sortable: true,

                            filterable: true

                          }

                        ];

Exemple Complet

// Utilisation du composant

                    <DataTable

                      data={data}

                      columns={columns}

                      translations={translations}

                      initialPageSize={25}

                      title="Ma Table"

                      onRowClick={(row) => console.log(row)}

                    />