ac_datagrid_pro : Datagrid JavaScript sans dépendance NEW

Composant JavaScript pur, zéro dépendance, compatible Laravel, Symfony, Node, Django

Mode data, zéro backend, zéro serveur

La grille ci-dessous fonctionne sans aucun backend. Les données sont un tableau JavaScript passé directement, aucune API, aucune base de données, aucun serveur requis. Tri, filtres, recherche, export, colonnes fixes : tout fonctionne en mémoire.

Démarrez en 5 lignes de code, passez data: [...] au lieu de url: et la grille détecte automatiquement le mode client.

Même composant, connecteur PHP vanilla sur 300 000 lignes
Connecteur PHP vanilla

La grille ci-dessous interroge en temps réel une base MySQL de 300 000 praticiens / 6 Millions de patients via un connecteur PHP vanilla. Tri, recherche, pagination, filtres, tout est traité côté serveur. Le navigateur ne reçoit que la page de résultats demandée.

Mode démonstration, lectures réelles sur 300 000 praticiens / 6 Millions de patients · modifications simulées (aucune écriture en base)

Console événements

Même composant, connecteur Laravel 11 sur 300 000 lignes
Connecteur Laravel 11

La grille ci-dessous interroge en temps réel une base MySQL de 300 000 praticiens / 6 Millions de patients via un vrai connecteur Laravel 11 hébergé sur laravel.artisan-code.fr. Controller Eloquent, routes API, Models, du Laravel standard, sans aucune magie cachée.

Mode démonstration, lectures réelles sur 300 000 praticiens / 6 Millions de patients · modifications simulées (aucune écriture en base)

⚡ Les temps de réponse incluent un double saut réseau (sous-domaine distinct). En production Laravel sur le même serveur, les performances sont identiques au connecteur PHP vanilla.

Console événements Laravel

Code source du connecteur Laravel
// routes/api.php, une seule ligne suffit
Route::post('/praticiens', [PraticienController::class, 'handle']);

// Côté JavaScript :
new AcDatagridPro({
    url:     'https://laravel.artisan-code.fr/api/praticiens',
    preset:  'full',
    columns: [ ... ]
});
// Une seule méthode publique, dispatch selon l'action reçue
public function handle(Request $request): JsonResponse
{
    return match($request->input('action')) {
        'load'    => $this->load($request),
        'insert'  => $this->insert($request),
        'update'  => $this->update($request),
        'delete'  => $this->delete($request),
        'options' => $this->options($request),
    };
}

// Chargement paginé, Eloquent standard
private function load(Request $request): JsonResponse
{
    $query = Praticien::query()
        ->select('p.id', 'p.nom', 'p.prenom', 'm.libelle as metier', ...)
        ->from('demo_praticiens as p')
        ->join('demo_metiers as m', 'm.id_metier', '=', 'p.id_metier');

    // Recherche globale
    if ($search = $request->input('search')) {
        $query->where(fn($q) => $q
            ->where('p.nom', 'like', "%$search%")
            ->orWhere('m.libelle', 'like', "%$search%"));
    }

    // Tri multi-colonnes (Shift+clic sur les en-têtes)
    foreach ($request->input('sort', []) as $s) {
        $query->orderBy($colMap[$s['column']], $s['direction']);
    }

    return response()->json([
        'status'   => 'ok',
        'data'     => $query->offset(($page-1) * $perPage)->limit($perPage)->get(),
        'total'    => $query->count(),
        'page'     => $page,
        'per_page' => $perPage,
    ]);
}

Fonctionnalités

Backend agnostique

Pas de PHP intégré, pas de SQL. La grille parle JSON avec n'importe quel backend : Laravel, Symfony, Express, Django, Go, ou même un fichier statique. Un contrat d'API clair en entrée et en sortie.

Server-side processing

Tri, recherche, pagination et filtres délégués au backend. Seule la page affichée transite. Compatible avec des tables de 2 000 000 de lignes sans ralentissement.

3 modes d'édition

Inline : édition directe dans la ligne. Modal : formulaire dans une modale. Cell : double-clic sur une cellule. CRUD granulaire, activez/désactivez chaque action individuellement.

Import CSV & Export

Import CSV en 3 étapes avec mapping visuel. Export CSV (compatible Excel) et XLSX natifs. Zéro dépendance, tout est généré en JavaScript vanilla.

4 thèmes + personnalisation

Sobre, Techno, Nature, Pastel, ou créez le vôtre. Formatage conditionnel par cellule avec couleurs, icônes et styles selon les valeurs.

Lignes épinglées & sous-grilles

Épinglez des lignes en haut. Sous-grilles maître/détail avec chargement dynamique. Colonnes fixes, déplaçables, masquables, redimensionnables.

Zéro dépendance

Un seul fichier JavaScript. Pas de npm, pas de React, pas de jQuery, pas de framework. Fonctionne avec une simple balise <script> ou via import ES module.

Licence perpétuelle

Un paiement unique au lieu des abonnements annuels de 500 à 2000€ des concurrents. Code source lisible, non obfusqué, adaptable à vos besoins.

Pourquoi pas ag-Grid ou Handsontable ?

ag-Grid / Handsontable / Tabulator

Abonnements annuels de 500 à 2000€ par développeur. Écosystème npm obligatoire, bundler requis, documentation labyrinthique. ag-Grid pèse 300+ Ko minifié. La plupart nécessitent une licence séparée pour le server-side processing. Et quand la version majeure change, préparez-vous à réécrire votre intégration.

ac_datagrid_pro

Un seul paiement, pour toujours. Un fichier JavaScript qui s'intègre à n'importe quel backend en 5 minutes. Pas de npm, pas de bundler, pas de React. Le server-side processing est natif. Le code est lisible, documenté, et vous pouvez l'adapter. Compatible Laravel, Symfony, Node, Django, ou votre API maison.

Intégration en 3 minutes

1

Incluez le script

<script src="ac_datagrid_pro.js"></script>

// ou en module ES
import AcDatagridPro from './ac_datagrid_pro.js';
2

Instanciez la grille

const grille = new AcDatagridPro({
    target:     '#ma-grille',
    url:        '/api/clients',
    serverside: true,
    editMode:   'modal',
    theme:      'sobre',
    crud:       { insert: true, update: true, delete: true },
    export:     ['csv', 'xlsx'],
    columns: [
        { field: 'id',    title: 'ID',    editable: false },
        { field: 'nom',   title: 'Nom',   required: true },
        { field: 'email', title: 'Email', type: 'email' },
        { field: 'ville', title: 'Ville' },
    ],
});
3

Implémentez votre API (5 actions JSON)

// Votre backend reçoit du JSON, répond du JSON.
// 5 actions : load, insert, update, delete, options.
// C'est tout. Voir la documentation du contrat d'API.

ac_datagrid_pro : à partir de 149€ TTC

Licence perpétuelle par développeur, mises à jour incluses 1 an

La licence comprend :

  • Le fichier source ac_datagrid_pro.js (code lisible, non obfusqué)
  • La documentation complète au format PDF
  • La documentation du contrat d'API (HTML)
  • Support technique par email pendant 1 an
  • Adaptateur Laravel inclus
Commander

Paiement sécurisé par PayPal. Livraison immédiate par email (code source, documentation et facture).

Découvrir les autres classes

Composants JavaScript/PHP autonomes, zéro dépendance

99€

ac_datagrid

Grille de données PHP/JS server-side, jusqu'à 2 000 000 de lignes.

49€

ac_text_to_html

Éditeur WYSIWYG JavaScript vanilla, zéro dépendance.

99€

ac_sidebar

Barre de navigation JS configurable, menus et rôles.

Gratuit

17 classes gratuites

Notifications, sliders, tags, signature, PDF et plus.