Les 8 meilleurs tableaux de données Custom Web Control pour WinCC Unified et WinCC V8 (gratuits)

Pourquoi un tableau de données Custom Web Control en vaut la peine

Tôt ou tard, tout projet IHM a besoin d’un tableau. Les ordres de fabrication du poste, les vingt derniers lots, des contrôles qualité conformes ou non, des pesées d’inspection, une requête SQL que le directeur d’usine veut voir à l’écran « comme dans Excel ». Les jauges et les trends disent à l’opérateur comment va le process ; un tableau de données lui dit ce qui s’est passé, ligne par ligne, avec des noms, des heures et des valeurs qu’il peut retrouver.

Les objets WinCC standard sont pensés pour des données précises : alarmes, courbes, jeux de paramètres. Quand vous voulez une grille de vos propres enregistrements, avec recherche, pages, couleurs d’état et une ligne sur laquelle l’opérateur peut cliquer, un tableau de données Custom Web Control (CWC) est le raccourci. Un CWC est une petite application web — HTML, CSS et JavaScript emballés dans un ZIP — que WinCC Unified (TIA Portal) et WinCC V8 exécutent dans la vue. Un tableau CWC reçoit généralement ses lignes sous forme de chaîne JSON dans une propriété comme dataJson ou recordsJson, et déclenche des événements, comme RowSelected, auxquels vos scripts IHM peuvent répondre.

Ce qui fait qu’un tableau de données Custom Web Control mérite d’être téléchargé

Avant la liste, la grille d’évaluation. Voici ce que nous avons regardé, à peu près dans l’ordre de ce qui nous agace le plus quand ça manque :

• Lisible d’un coup d’œil. Un en-tête clair, des nombres alignés, des unités et des couleurs d’état qui veulent dire quelque chose. Un tableau que l’opérateur doit déchiffrer est un tableau que personne ne lit.
• Un volume maîtrisé. Recherche, pagination ou limite de lignes (rowsPerPage, pageSize, maxDisplayedRows), pour que la vue reste rapide et que personne ne fasse défiler mille lignes sur un pupitre de 12 pouces.
• Un contrat de données propre. Les lignes dans une propriété documentée et la disposition des colonnes dans une autre, pour savoir exactement ce que votre script doit écrire.
• Une interaction qui mène quelque part. Un événement au clic sur une ligne, une demande de rafraîchissement ou un export CSV transforment une liste en outil. Les fiches qui se contentent de compter leurs propriétés sont passées dans les mentions honorables.
• Le bon tableau pour le bon usage. Un journal historique, un éditeur SQL Server, un journal qualité, une liste de variables en direct, un navigateur de lots, un exportateur, un journal d’inspection et une grille à tout faire : nous avons retenu un champion par usage.

Comment nous les avons choisis (et ce que nous n’avons pas fait)

Début novembre 2026, nous avons cherché dans le catalogue HMIx tous les Custom Web Controls gratuits construits autour de lignes et de colonnes : tableaux de données, journaux, grilles SQL, exportateurs CSV et navigateurs d’enregistrements. Les applications complètes qui contiennent un tableau au passage, comme les gestionnaires de stock ou de lots, attendront un autre jour. Pour chaque candidat, nous avons regardé son vrai aperçu (pas la couverture du catalogue avec son grand titre par-dessus) et lu sa fiche produit pour voir quelles propriétés, quels événements et quelles méthodes elle documente. Les téléchargements n’ont servi qu’à départager les ex aequo.

Les contrôles dont la fiche ne nomme pas les propriétés sont passés dans les mentions honorables. Quatre ont été écartés : trois galeries ne montrent que l’icône du contrôle, il n’y a donc rien à juger, et dans le quatrième, le texte des cellules est pratiquement invisible. Et une mise en garde : nous avons jugé des aperçus et de la documentation ; nous n’avons pas fait tourner ces contrôles dans un Runtime réel ni face à une vraie base de données. Ils ont été générés par IA et chaque fiche produit rappelle de les tester dans votre propre projet TIA Portal avant la mise en production.

Les 8 meilleurs tableaux de données Custom Web Control, un par un

Chaque fiche montre le vrai aperçu, ce que nous avons aimé, ce qu’il faut garder en tête et les propriétés nommées sur sa fiche produit, puis la vignette du catalogue : cliquez dessus pour ouvrir la fiche produit et télécharger le tableau gratuitement.

01Meilleur choix global

Dynamic Data Table

S’il ne fallait en garder qu’un, ce serait celui-ci. Une grille sombre et posée, avec un champ « Search all columns... » en haut, la date et l’heure de chaque enregistrement en bleu à chasse fixe et cinq colonnes process : niveau de cuve, vitesse de pompe, position de vanne, température et pression. En bas, « Page 1 of 2 (20 records) » et un petit pagineur. Rien de tape-à-l’œil, tout est là où on l’attend, avec deux avis cinq étoiles en novembre 2026.

Il est taillé pour les données historiques. D’après sa fiche, il génère lui-même les colonnes Date et Heure et ajoute cinq colonnes process configurables, définies dans columnSettings et alimentées par historicalData. rowsPerPage règle la pagination, searchPlaceholder et noDataMessage couvrent les textes, et backgroundColor s’accorde à votre thème. RowSelected et PageChanged permettent à vos scripts de réagir, et la méthode exportToCsv télécharge les lignes filtrées pour un rapport.

Ce qu’on aime

• +Recherche, pagination et export CSV dans un seul contrôle soigné
• +Date et heure gérées pour vous, valeurs en colonnes claires
• +Interface courte : deux propriétés JSON font l’essentiel du travail

À garder en tête

• –Cinq colonnes process, d’après sa fiche : pour des enregistrements plus larges, prenez un autre tableau
• –L’aperçu ne montre aucun bouton d’export : appelez exportToCsv depuis un bouton à vous

Propriétés à relier

• historicalData
• columnSettings
• rowsPerPage
• searchPlaceholder
• noDataMessage
• backgroundColor

Dynamic Data Table

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

02Le meilleur pour les enregistrements SQL Server (ajout, modification et suppression)

Table SQL Server

Celui des gens qui vivent dans une base de données. Une barre d’outils claire avec un champ de recherche, un « Add New » bleu, « Edit », un « Delete » rouge et un bouton de rafraîchissement surmonte un tableau triable avec les colonnes ID, horodatage, nom de variable, valeur, unité, état et opérateur. Le pied de page affiche « SQL Server: Connected to [Production_DB] » d’un côté et « No row selected » de l’autre. Avec quatre avis à 4,75 étoiles de moyenne en novembre 2026, c’est le tableau le plus évalué de cet article.

Sa fiche compte 21 propriétés et en nomme vingt. Le côté SQL est explicite : sqlSelectQuery, sqlInsertQuery, sqlUpdateQuery et sqlDeleteQuery contiennent les modèles de requêtes, primaryKeyColumn identifie la ligne, et la connexion passe soit par dbConnectionString, soit par dbServer, dbDatabase, dbUser et dbPassword. showAddButton, showEditButton et showDeleteButton décident de ce que l’opérateur a le droit de faire, chacun avec son libellé. Les boutons lèvent AddRequested, EditRequested, DeleteRequested et RefreshRequested pour vos scripts WinCC, et setTableData, setConnectionStatus et clearSelection permettent aux scripts de répondre.

Ce qu’on aime

• +Workflow complet d’ajout, de modification et de suppression, avec un événement par action
• +Des boutons que vous pouvez masquer par vue ou par rôle utilisateur
• +Le tableau le plus évalué de cet article

À garder en tête

• –Lisez la documentation incluse pour savoir où s’exécutent réellement les requêtes dans votre architecture avant de promettre du SQL en direct, et ne mettez jamais un mot de passe de base de données dans une variable lisible par les opérateurs
• –Dans l’aperçu, tous les textes sont en italique, « Search records... » est coupé en haut, « Add New » passe à la ligne et la colonne opérateur déborde du cadre

Propriétés à relier

• sqlSelectQuery
• sqlInsertQuery
• sqlUpdateQuery
• sqlDeleteQuery
• primaryKeyColumn
• dbConnectionString
• dbServer
• dbDatabase
• dbUser
• dbPassword
• showAddButton
• showEditButton
• showDeleteButton
• addLabel
• editLabel
• deleteLabel
• searchPlaceholder
• connectionStatusText
• noSelectionText
• backgroundColor

Table SQL Server

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

03Le meilleur pour les journaux de contrôle qualité

Quality Control Log

Le plus beau tableau de la liste. Quatre cartes de synthèse trônent en haut : Total Checks 20, Passed 11 (55 %), Failed 4 (20 %) et Warnings 5 (25 %), chacune avec sa couleur. En dessous, un tableau dense liste des identifiants de lots à partir de B-1024, un paramètre avec sa propre icône (température à cœur, pression de scellage, volume de remplissage, pH…), la valeur avec son unité, un badge lumineux OK, WARNING ou FAIL, l’heure et l’opérateur avec un avatar rond à ses initiales.

Sa fiche liste 10 propriétés et en nomme neuf : title et subtitle, les libellés des cartes totalLabel, passedLabel, failedLabel et warningsLabel, showFilters et searchPlaceholder pour la recherche et les filtres d’état, et backgroundColor. OnRowSelection ouvre la porte à une vue de détail du lot, et les méthodes clearSearch et setFilter permettent à un script de sauter directement aux non-conformités.

Ce qu’on aime

• +Compteurs de synthèse et journal détaillé dans un seul contrôle
• +Des badges d’état qui ressortent sans crier
• +Recherche et filtrage par état intégrés

À garder en tête

• –La fiche ne nomme pas la propriété qui porte les enregistrements : vérifiez la liste Interface dans TIA Portal avant de relier quoi que ce soit
• –Dans l’aperçu, l’en-tête avec le titre et les filtres est flou et le bord droit des cartes de synthèse est coupé

Propriétés à relier

• title
• subtitle
• totalLabel
• passedLabel
• failedLabel
• warningsLabel
• showFilters
• searchPlaceholder
• backgroundColor

Quality Control Log

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

04Le meilleur tableau léger pour les valeurs de variables en direct

Data Table

Parfois, il suffit d’une liste propre. Celle-ci affiche nom de variable, valeur, unité et état pour dix signaux, de PUMP-001 à 145.2 m³/h jusqu’à COOL-001 à 22.1 °C, avec une pastille colorée pour Active, Idle, Error ou Offline. La ligne sélectionnée est marquée d’une barre bleue sur son bord gauche. Contraste élevé, zéro décoration, lisible à un mètre.

Son interface est tout aussi sobre. dataJson porte les lignes et columns définit le schéma, rowHeight et headerHeight règlent la densité, emptyMessage couvre le cas sans données et backgroundColor s’accorde à votre vue. D’après sa fiche, l’en-tête reste figé, RowSelected se déclenche au clic et selectedRowIndex peut réécrire la sélection dans une variable (décochez Lecture seule pour elle). clearSelection et scrollToTop remettent la vue à zéro.

Ce qu’on aime

• +Très lisible, avec un en-tête figé pour les longues listes
• +Sélection réécrite dans une variable pour des faceplates liés
• +Rapide à relier : une propriété de données et une définition de colonnes

À garder en tête

• –Sa fiche ne mentionne ni recherche, ni tri, ni pagination : gardez-le pour les listes courtes
• –La moitié de l’aperçu est vide sous les lignes : dimensionnez-le selon votre nombre de lignes

Propriétés à relier

• dataJson
• columns
• selectedRowIndex
• rowHeight
• headerHeight
• emptyMessage
• backgroundColor

Data Table

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

05Le meilleur pour parcourir les enregistrements de lots page par page

Paginated Records Table

Le tableau le plus récent de cet article, publié en octobre 2026, et un tableau bien pensé. Cinq enregistrements de lots remplissent le contrôle, de B-24-0412 « Tomato Sauce 500 » sur la ligne L2 à B-24-0416 « Basil Purée », avec recette, ligne, heure de début et une quantité en kg alignée à droite. Le pied de page affiche « Rows 1–5 of 47 » à côté d’un pagineur avec première, précédente, numéros de page, suivante et dernière.

Ses 17 propriétés décrivent un partage des tâches net. Les scripts de votre projet interrogent la base de données et écrivent la page courante dans rows, la taille de la base dans totalCount et la page confirmée dans pageIndex après un événement PageChanged. pageSize, columns (libellés, alignement et unités) et rangeTemplate façonnent la vue. Un clic sur une ligne, ou la touche Entrée ou Espace, déclenche RowClicked et ouvre un panneau sur fond assombri avec le nom, la valeur et l’unité de chaque paramètre enregistré, que vous fournissez via selectedParameters et parametersRowId.

Ce qu’on aime

• +Pagination côté serveur : le pupitre ne garde que les lignes affichées
• +Un panneau de détail des paramètres pour chaque enregistrement, fermable avec Échap
• +Navigation au clavier et libellés accessibles

À garder en tête

• –Les lignes sont très hautes dans l’aperçu : on voit peu d’enregistrements à la fois
• –Rien ne marche sans vos scripts : les requêtes vivent dans votre projet, pas dans le contrôle

Propriétés à relier

• rows
• totalCount
• pageIndex
• pageSize
• columns
• rangeTemplate
• selectedParameters
• parametersRowId
• backgroundColor

Paginated Records Table

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

06Le meilleur pour exporter des données historiques en CSV

Historical Data CSV Exporter

Pour la demande classique : « je peux avoir les données de cette nuit dans Excel ? ». Deux sélecteurs de date et d’heure fixent la fenêtre, de 09:16 à 10:16 dans l’aperçu, et un tableau prévisualise les enregistrements avec un horodatage et quatre variables d’archivage : température TT_101 en °C, pression PT_201 en bar, débit FT_301 en m³/h et niveau LT_401 en %. Le pied de page affiche « Configured: 4 tags • Previewing: 15 of 26 records », à côté d’un grand bouton vert « Export CSV ».

Sa fiche nomme tout le flux. startTimestamp et endTimestamp contiennent la fenêtre (décochez Lecture seule pour que le choix de l’opérateur arrive jusqu’aux variables), startLabel et endLabel traduisent les légendes, et loggingTags liste les colonnes. Votre script répond à QueryRequested en écrivant les enregistrements dans historicalDataJson, maxPreviewRows limite l’aperçu, et l’export produit un CSV nommé avec fileNamePrefix et lève ExportTriggered. previewButtonText, exportButtonText, setHistoricalData et triggerExport complètent le tout.

Ce qu’on aime

• +Un flux complet requête, aperçu et export sur une seule vue
• +Des noms de fichiers cohérents pour les rapports de poste et d’audit
• +Un look clair, façon bureautique, qui convient aux vues de reporting

À garder en tête

• –Dans l’aperçu, un bouton sous les sélecteurs de date est presque entièrement caché derrière le tableau
• –Il ne lit pas votre archive tout seul : un script doit remplir historicalDataJson

Propriétés à relier

• startTimestamp
• endTimestamp
• loggingTags
• historicalDataJson
• maxPreviewRows
• fileNamePrefix
• startLabel
• endLabel
• previewButtonText
• exportButtonText
• backgroundColor

Historical Data CSV Exporter

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

07Le meilleur pour les journaux d’inspection et de pesage

Inspection Log

Un journal sans fioritures, tout droit sorti d’une ligne de production. « TUBE WEIGHT INSPECTION LOG » coiffe un tableau clair et bordé avec numéro de tube, date et heure, poids et état du poids pour les tubes 101 à 108. Les poids tournent autour de 17.7 à 17.9, et les trois marqués « OK HIGH » ont droit à une cellule jaune vif qui saute aux yeux. Un badge « STANDALONE / READY » dans le coin indique l’état de la connexion.

Sa fiche compte 7 propriétés et les nomme toutes : recordsJson reçoit les enregistrements (par exemple le résultat d’une requête SQL), maxDisplayedRows garde la vue courte, titleText et connectionStatusText l’étiquettent, headerColor et backgroundColor fixent la palette, et highlightHighWeightColor choisit la couleur d’alerte. RowSelected et RefreshRequested dialoguent avec vos scripts, tandis que appendRecord ajoute les résultats en direct un par un et clearRecords démarre une nouvelle session.

Ce qu’on aime

• +Impossible de rater un résultat hors tolérance
• +appendRecord pour un flux en direct depuis une trieuse pondérale
• +Un look classique et imprimable qui plaît aux équipes qualité

À garder en tête

• –Pensé pour des poids : d’autres inspections imposent de renommer les colonnes, et la colonne poids n’affiche aucune unité
• –Sa fiche parle de lignes surlignées, mais dans l’aperçu seule la cellule d’état passe au jaune

Propriétés à relier

• recordsJson
• maxDisplayedRows
• titleText
• connectionStatusText
• highlightHighWeightColor
• headerColor
• backgroundColor

Inspection Log

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

08Le chouchou du public : le plus flexible (Tabulator)

Custom table

Le doyen de la liste, publié en juillet 2025, et le tableau le plus téléchargé du catalogue avec 45 téléchargements en novembre 2026. L’aperçu est une démo, pas une vue d’usine : une fenêtre à barre de titre bleue contient les colonnes Name, Salary et Rating pour Donald, Peter et Ronaldo, avec des barres de progression vertes et des notes en étoiles. La ligne de Peter est sélectionnée, et une ligne en dessous répète le clic : « The content of the selected row is: {"name":"Peter"} ».

Ce qui lui manque en look, il le rattrape en possibilités. D’après sa fiche, il repose sur Tabulator, une bibliothèque de tableaux open source bien connue : filtrage, formateurs de colonnes et style dynamique sont donc au rendez-vous. Vous l’alimentez par deux propriétés, TableDataString pour les lignes et ColumnStyleString pour les définitions de colonnes, et un événement de clic indique à votre script quelle ligne et quelle colonne ont été cliquées, prêt à ouvrir une popup ou à changer de vue. Le téléchargement inclut un projet d’exemple et des instructions d’intégration en anglais.

Ce qu’on aime

• +Tabulator sous le capot : formateurs, filtres et tri, avec une documentation en ligne
• +Événement de clic ligne et colonne pour descendre dans le détail
• +Projet d’exemple inclus, et le tableau le plus téléchargé

À garder en tête

• –Look daté et données de démo dans l’aperçu : prévoyez de le rhabiller
• –Vous écrivez les définitions de colonnes sous forme de chaîne JSON, ce qui demande un peu de lecture de la doc Tabulator

Propriétés à relier

• TableDataString
• ColumnStyleString

Custom table

Gratuit · WinCC Unified & V8 · CWC (.zip)

↓Voir et télécharger gratuitement✦Modifier avec l’IA

Mention honorable : un tableau de plus qui vaut le coup d’œil

Un contrôle séduisant qui n’a pas intégré le top 8, parce que sa fiche produit ne nomme pas ses propriétés. Cliquez sur la vignette pour ouvrir sa fiche produit.

• 

  Modern table

  Un moniteur d’équipements avec horloge en direct, compteurs de performance globale et d’alertes, et un tableau d’appareils avec badges d’état, température, barres de charge, état de santé et un bouton « VER ». Les textes de l’aperçu sont en espagnol, et la fiche annonce 14 propriétés, 2 événements et 2 méthodes sans les nommer.

  Voir le produit →

Comment utiliser un tableau de données Custom Web Control dans WinCC Unified (et WinCC V8)

La version courte, pour quand vous avez déjà choisi votre tableau. Notre guide des Custom Web Controls détaille chaque étape avec schémas et captures d’écran.

1. 1

   Téléchargez le ZIP

   Ouvrez la fiche produit, connectez-vous avec votre compte gratuit et téléchargez le tableau. Le ZIP téléchargé contient la documentation et, à l’intérieur, le paquet du contrôle nommé {GUID}.zip : c’est ce fichier intérieur qu’il vous faut.

2. 2

   Copiez-le dans votre projet TIA Portal

   Copiez le fichier {GUID}.zip, toujours compressé, dans le dossier de votre projet, sous UserFiles\CustomControls (créez les deux dossiers s’ils n’existent pas). Ne l’extrayez pas.

3. 3

   Actualisez Mes contrôles et faites-le glisser

   Dans TIA Portal, ouvrez la task card Outils, développez la palette Mes contrôles et cliquez sur Actualiser. Le tableau apparaît dans la liste : faites-le glisser sur votre vue et laissez-lui assez de place pour ses colonnes.

4. 4

   Reliez et testez les propriétés

   Sélectionnez le contrôle et, dans la fenêtre d’inspection, ouvrez Propriétés → Propriétés → Interface. Ces tableaux reçoivent leurs lignes sous forme de chaîne JSON (dataJson, historicalData, recordsJson, TableDataString…) : commencez donc par une variable interne de type chaîne et un petit script de test qui écrit deux ou trois lignes, puis lancez Runtime. Décochez Lecture seule pour les propriétés que le contrôle réécrit, comme selectedRowIndex ou pageIndex. Une fois que les lignes s’affichent correctement, passez à vos vraies données.

5. 5

   Sous WinCC V8

   Chaque tableau du top de cet article est indiqué comme compatible WinCC V8 sur sa fiche produit. Le paquet est le même ; suivez la documentation WinCC V8 pour importer et configurer des Custom Web Controls dans cet environnement.

Astuce de pro : n’envoyez au tableau que ce que l’opérateur peut lire. Utilisez les limites de lignes que proposent ces contrôles (rowsPerPage, pageSize, maxDisplayedRows, maxPreviewRows) et, pour les gros volumes, interrogez une page à la fois, comme le fait le Paginated Records Table. Une chaîne JSON de milliers de lignes réécrite chaque seconde, c’est un travail pénible pour un Unified Comfort Panel et inutile pour la personne qui est devant.

Questions fréquentes

Notre verdict

Si vous n’en téléchargez qu’un, prenez le Dynamic Data Table : recherche, pagination et export CSV dans une grille posée que vous aurez reliée en quelques minutes. Pour un éditeur SQL Server, le Table SQL Server ; pour la qualité, le Quality Control Log ; pour une courte liste de valeurs en direct, le Data Table ; pour de gros historiques de lots, le Paginated Records Table ; pour « il me le faut dans Excel », le Historical Data CSV Exporter ; pour une trieuse pondérale, l’Inspection Log ; et quand vous voulez toute la boîte à outils de Tabulator, le Custom table.

Et si vos enregistrements réclament un tableau qu’aucun ne dessine (c’est toujours le cas), n’oubliez pas que le générateur qui les a créés n’est qu’à un clic.