Générateur de tableaux croisés ad hoc
Les utilisateurs choisissent dimensions et mesures ; le tableau croisé est reconstruit à partir d'un TFDQuery.
Ouvrir la démo en ligne →Chaque composant de la bibliothèque, regroupé en neuf familles. Chacun produit du balisage Bootstrap 5 et fonctionne de la même façon en Delphi, C++ Builder et .NET. La plupart sont orientés données et se lient directement à un TDataSet via LoadFromDataSet / DataSource (ou une source .NET équivalente). Cliquez sur un composant pour accéder à sa propre page avec utilisation et exemples. Tous les composants appliquent un encodage de sortie automatique HTML, d'attributs, JavaScript et d'URL ainsi qu'un assainissement des URL, de sorte que le contenu dynamique est échappé par défaut pour se prémunir contre le XSS et les injections.
14 composants
11 composants
10 composants
23 composants
10 composants
14 composants
4 composants
7 composants
8 classes
Grilles, calendriers et tableaux qui rendent vos jeux de données directement.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Tableau riche en fonctionnalités : tri, filtre, export CSV/PDF, édition en ligne, regroupement, défilement virtuel et requête IA. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Tableau de données de plus haut niveau enveloppant Grid + Pagination avec une barre d'outils, une recherche et un décompte de lignes. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Calendrier en grille mensuelle avec points d'événements et navigation précédent/suivant. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Planificateur de calendrier (vues mois / semaine) rendant les événements par date. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Chronologie verticale d'événements datés, chargeable depuis un jeu de données. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Tableau Kanban de colonnes et de cartes déplaçables. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Diagramme de Gantt de planning de projet avec barres de progression des tâches. | Docs |
| TreeGrid | TsgcHTMLComponent_TreeGrid | Tableau Bootstrap avec des lignes hiérarchiques repliables construites à partir de paires de nœuds Id/ParentId. | Docs |
| PivotTable | TsgcHTMLComponent_PivotTable | Tableau croisé dynamique Bootstrap qui regroupe les lignes et les colonnes et agrège les mesures avec des totaux de ligne, de colonne et généraux. | Docs |
| ActivityFeed | TsgcHTMLComponent_ActivityFeed | Flux d'activité en direct, du plus récent au plus ancien, avec horodatages relatifs et envoi WebSocket hors-bande. | Docs |
| AuditTrail | TsgcHTMLComponent_AuditTrail | Flux de journal d'audit chronologique des actions des utilisateurs et du système avec acteur, action, cible et horodatage. | Docs |
Des visuels pilotés par les données, construits à partir de vos propres chiffres.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Graphique Chart.js : ligne, barre, secteurs, anneau, radar, polaire, bulles et nuage de points. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Jauge SVG semi-circulaire avec seuils de couleur bas / moyen / haut. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Diagramme de flux à nœuds et flèches rendu en SVG en ligne. | Docs |
| Map | TsgcHTMLComponent_Map | Carte interactive Leaflet.js (tuiles OpenStreetMap / CartoDB) avec marqueurs. | Docs |
| Heatmap | TsgcHTMLComponent_Heatmap | Grille de carte de chaleur SVG à échelle de couleur à partir de valeurs de cellules ou d'un jeu de données lié, avec légende et libellés de ligne/colonne. | Docs |
| Sparkline | TsgcHTMLComponent_Sparkline | Sparkline SVG compacte, en ligne, barre ou aire, intégrée dans le texte, à partir d'une série de valeurs ou d'un jeu de données lié. | Docs |
| CandlestickChart | TsgcHTMLComponent_CandlestickChart | Graphique en chandeliers OHLC en SVG avec mèches, couleurs hausse/baisse et bande de volume optionnelle. | Docs |
| QRCode | TsgcHTMLComponent_QRCode | Code QR SVG ISO/IEC 18004 en Pascal pur à partir de tout texte ou URL, avec niveau de correction d'erreur sélectionnable. | Docs |
| Barcode | TsgcHTMLComponent_Barcode | Code-barres Code 128 SVG en Pascal pur à partir de tout texte ASCII, avec légende lisible optionnelle. | Docs |
| TreeMap | TsgcHTMLComponent_TreeMap | Treemap « squarifié » rendu en SVG en ligne, autonome et généré côté serveur, sans bibliothèque de graphiques requise. | Docs |
Tout ce dont vous avez besoin pour capturer des données, avec validation et liaison aux jeux de données.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Générateur de formulaires piloté par les données avec validation, mises en page et génération de formulaires par IA. | Docs |
| Edit | TsgcHTMLComponent_Edit | Champ de saisie de texte sur une ligne avec libellé, texte d'aide et liaison aux jeux de données. | Docs |
| Memo | TsgcHTMLComponent_Memo | Zone de saisie de texte multiligne avec libellé et texte d'aide. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Case à cocher avec libellé et état coché. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Groupe d'options radio mutuellement exclusives. | Docs |
| Select | TsgcHTMLComponent_Select | Liste déroulante de sélection avec groupes d'options, sélection multiple et liaison aux jeux de données. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Saisie avec texte d'addon en préfixe / suffixe. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Champ de saisie adossé à une datalist HTML5 de suggestions. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Champ de saisie natif date / heure / date-heure. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Zone d'envoi de fichiers par glisser-déposer avec soumission de formulaire multipart. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Éditeur de texte enrichi WYSIWYG basé sur Quill avec champ de formulaire masqué. | Docs |
| Rating | TsgcHTMLComponent_Rating | Affichage ou saisie de notation par étoiles (symboles). | Docs |
| MultiSelect | TsgcHTMLComponent_MultiSelect | Une liste déroulante Bootstrap à sélection multiple et recherche, avec puces, options groupées et liaison aux jeux de données. | Docs |
| ColorPicker | TsgcHTMLComponent_ColorPicker | Une saisie de couleur HTML5 native avec un champ de texte hexadécimal optionnel et des nuanciers prédéfinis. | Docs |
| Slider | TsgcHTMLComponent_Slider | Un curseur de plage Bootstrap avec un badge de valeur en direct, des libellés min/max et une coloration. | Docs |
| TimePicker | TsgcHTMLComponent_TimePicker | Une saisie d'heure HTML5 native avec bornes min/max et une granularité à la seconde. | Docs |
| SignaturePad | TsgcHTMLComponent_SignaturePad | Un pavé de signature sur canevas basé sur les événements pointeur, avec les actions Effacer, Annuler et Enregistrer. | Docs |
| Transfer | TsgcHTMLComponent_Transfer | Widget à double liste pour déplacer des éléments entre un panneau disponible et un panneau assigné, avec filtrage et liaison aux jeux de données. | Docs |
| DateTimePicker | TsgcHTMLComponent_DateTimePicker | Sélecteur de date et d'heure HTML5 natif combinant calendrier et horloge dans un seul champ. | Docs |
| DateRangePicker | TsgcHTMLComponent_DateRangePicker | Champs de date de début et de fin appariés pour choisir une plage de dates, avec bornes min/max. | Docs |
| RangeSlider | TsgcHTMLComponent_RangeSlider | Curseur à deux poignées sélectionnant une paire de valeurs basse/haute, avec badges de valeur en direct. | Docs |
| CameraScanner | TsgcHTMLComponent_CameraScanner | Panneau caméra en direct qui scanne codes-barres et QR codes avec le BarcodeDetector natif du navigateur, sans bibliothèque tierce. | Docs |
| NumPad | TsgcHTMLComponent_NumPad | Pavé numérique et monétaire tactile pour la saisie en point de vente, avec boutons de montants rapides et un formatage indépendant de la langue. | Docs |
Cartes, médias et tuiles d'indicateurs pour agencer une page.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Panneau-carte Bootstrap avec en-tête / corps / pied de page, repliable et défilable. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Carte d'indicateur / de statistique de tableau de bord avec icône, flèche de tendance et dégradé optionnel. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Accordéon à repliement vertical de panneaux empilés et déployables. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Diaporama / carrousel d'images avec indicateurs, contrôles et lecture automatique. | Docs |
| Image | TsgcHTMLComponent_Image | Image avec forme, responsive / chargement différé, lien lightbox et légende. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Avatar utilisateur (image ou initiales) avec taille, forme et point d'état de présence. | Docs |
| Video | TsgcHTMLComponent_Video | Lecteur vidéo / audio HTML5 ainsi qu'un assistant d'intégration YouTube. | Docs |
| Badge | TsgcHTMLComponent_Badge | Badge Bootstrap unique avec couleur, forme pilule, une icône en ligne et un mode point de notification positionné. | Docs |
| PDFViewer | TsgcHTMLComponent_PDFViewer | Visionneuse PDF intégrée à la page, basée sur pdf.js, avec navigation entre pages, zoom, recherche, téléchargement et impression. | Docs |
| Chip | TsgcHTMLComponent_Chip | Puce / étiquette compacte avec une icône optionnelle, une couleur et un bouton de fermeture amovible. | Docs |
Boîtes de dialogue, surfaces d'état et états de chargement.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Boîte de dialogue modale avec titre / corps / pied de page, tailles, centrée et arrière-plan statique. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Panneau coulissant hors-canevas depuis la gauche, la droite, le haut ou le bas. | Docs |
| Popover | TsgcHTMLComponent_Popover | Bulle popover sur un élément déclencheur (clic / survol / focus). | Docs |
| Toast | TsgcHTMLComponent_Toast | Notification toast avec en-tête, corps, horodatage et masquage automatique. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Snackbar transitoire de style Material avec une action optionnelle. | Docs |
| Notification | TsgcHTMLComponent_Notification | Centre de notifications déroulant à icône cloche avec un badge de non-lus. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Indicateur de chargement (bordure / croissance), dimensionné et coloré. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Carte de chargement en squelette / espace réservé avec un effet de scintillement animé. | Docs |
| ContextMenu | TsgcHTMLComponent_ContextMenu | Menu contextuel (clic droit) limité à un sélecteur CSS, avec icônes, séparateurs, en-têtes et actions routées côté serveur. | Docs |
| JobProgress | TsgcHTMLComponent_JobProgress | Liste en direct de barres de progression de tâches en arrière-plan avec badges d'état, boutons d'annulation et mises à jour de fragments hors-bande. | Docs |
| LogViewer | TsgcHTMLComponent_LogViewer | Visionneuse de journaux / terminal en streaming avec filtre de niveau, recherche et défilement automatique. | Docs |
| ProgressBar | TsgcHTMLComponent_ProgressBar | Barre de progression Bootstrap, rayée et animée, à segment unique ou empilée multi-segments. | Docs |
| CommandPalette | TsgcHTMLComponent_CommandPalette | Lanceur d'actions rapides Ctrl+K / Cmd+K avec filtrage par sous-chaîne puis flou, catégories et actions routées côté serveur. | Docs |
| EmptyState | TsgcHTMLComponent_EmptyState | Le panneau qu'une grille, une liste ou un résultat de recherche affiche lorsqu'il n'a aucune ligne, avec icône, titre, description et jusqu'à deux boutons. | Docs |
Interface conversationnelle, des simples bulles à un assistant IA en streaming.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Boîte à bulles de chat de style carte avec une barre de saisie et un indicateur de frappe. | Docs |
| Chat | TsgcHTMLComponent_Chat | Chat de style WhatsApp avec messages texte / image / fichier / audio / vidéo, accusés de lecture et réponses. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | Chat d'assistant IA avec sélecteur de fournisseur / modèle, streaming de jetons et citations de sources RAG. | Docs |
| Presence | TsgcHTMLComponent_Presence | Liste « Qui est en ligne » sous forme de pile d'avatars ou de liste, avec mises à jour d'état en direct. | Docs |
Des flux de connexion prêts à l'emploi, des mots de passe aux passkeys.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Formulaire / page de connexion prêt à l'emploi (carte, centré ou pleine page) avec « se souvenir de moi » et alertes. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | Panneau de boutons de connexion sociale OAuth (Google, Facebook, Apple, GitHub, Microsoft et plus). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Page de rappel / d'atterrissage OAuth en état succès, erreur ou chargement avec redirection automatique. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Widget de connexion et d'enregistrement par passkey / WebAuthn sans mot de passe. | Docs |
| RolesPermissions | TsgcHTMLComponent_RolesPermissions | Matrice de rôles / permissions avec une case à cocher par cellule et des mises à jour d'octroi en direct via WebSocket. | Docs |
| UserManagement | TsgcHTMLComponent_UserManagement | Tableau d'administration des utilisateurs avec rôles, statut, recherche et un menu déroulant d'actions par ligne. | Docs |
| ImpersonateBanner | TsgcHTMLComponent_ImpersonateBanner | Bannière d'usurpation d'identité admin affichée lorsqu'on agit en tant qu'un autre utilisateur, avec une sortie en un clic. | Docs |
Les pièces non visuelles qui servent les pages et les maintiennent vivantes.
| Composant | Classe | Description | Aide |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | Moteur HTML lié à un TsgcWebSocketHTTPServer qui sert les pages rendues et les ressources intégrées. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | Moteur htmx câblé au même serveur. Il s'accroche aux gestionnaires HTTP et WebSocket, distribue les requêtes et messages entrants, et pousse ou diffuse des fragments HTML vers les navigateurs connectés en temps réel (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Assemble les composants enregistrés en une page responsive complète (avec un éditeur visuel à la conception). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Enveloppe le contenu du corps dans un document HTML Bootstrap 5 complet avec thème, langue et direction. | Docs |
| ThemeController | TsgcHTMLThemeController | Sélecteur de thème à l'exécution dont la propriété Theme (ptDefault, ptDark, ptDarkPro) applique le thème sélectionné et la feuille de style partagée à la page. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Générateur CSS dont le Mode (tmLight, tmDark, tmSystem) écrit les variables CSS de Bootstrap à partir des valeurs de propriétés, avec un script optionnel de synchronisation sur la préférence du système d'exploitation pour tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Fragment htmx hors-bande pour envoyer une mise à jour de page partielle du serveur vers le navigateur. | Docs |
| HTMXRouter | TsgcHTMX_Router | Table de routage de Routes qui fait correspondre un chemin de requête entrant et le distribue (via HandleRequest) au gestionnaire OnRoute de cette route. | Docs |
Chaque capacité listée sur cette page est mise en œuvre par l'une de ces applications.
Les utilisateurs choisissent dimensions et mesures ; le tableau croisé est reconstruit à partir d'un TFDQuery.
Ouvrir la démo en ligne →
Recherche instantanée et édition en ligne, injectées sous forme de fragments sans recharger la page.
Ouvrir la démo en ligne →
Les mêmes composants produisent une mise en page pour scanner portable à une largeur de téléphone.
Ouvrir la démo en ligne →