Composant JavaScript pur, zéro dépendance, compatible Laravel, Symfony, Node, Django
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.
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)
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.
// 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, ]); }
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.
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.
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 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.
Sobre, Techno, Nature, Pastel, ou créez le vôtre. Formatage conditionnel par cellule avec couleurs, icônes et styles selon les valeurs.
Épinglez des lignes en haut. Sous-grilles maître/détail avec chargement dynamique. Colonnes fixes, déplaçables, masquables, redimensionnables.
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.
Un paiement unique au lieu des abonnements annuels de 500 à 2000€ des concurrents. Code source lisible, non obfusqué, adaptable à vos besoins.
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.
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.
<script src="ac_datagrid_pro.js"></script> // ou en module ES import AcDatagridPro from './ac_datagrid_pro.js';
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' },
],
});
// 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.
Licence perpétuelle par développeur, mises à jour incluses 1 an
La licence comprend :
ac_datagrid_pro.js (code lisible, non obfusqué)Paiement sécurisé par PayPal. Livraison immédiate par email (code source, documentation et facture).
Composants JavaScript/PHP autonomes, zéro dépendance