Démo DataTable - Composant de Table Personnalisée (PHP)

Démonstration Interactive

Testez le composant DataTable avec des données générées en PHP

Données générées en PHP

10 clients chargés depuis le serveur PHP

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)}

                    />

API PHP

Exemples d'intégration avec PHP

Génération de Données PHP

// Exemple de génération de données

                        <?php

                        $customers = [

                          [

                            'id' => 1,

                            'name' => 'Client A',

                            'systems_count' => 5

                          ]

                        ];

                        $jsonData = json_encode($customers);

                        ?>

Intégration dans HTML

// Passage des données à JavaScript

                        <script>

                        const phpData = <?php echo $jsonData; ?>;

                        </script>

Exemple Complet PHP

// Fichier complet avec PHP

                    <?php

                    // Récupération des données depuis la base

                    $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');

                    $stmt = $pdo->query('SELECT * FROM customers');

                    $customers = $stmt->fetchAll(PDO::FETCH_ASSOC);

                    ?>

                    <script>

                    const serverData = <?php echo json_encode($customers); ?>;

                    </script>