Data Table | Custom Web Control | WinCC Unified & V8

Custom Web Control

About Data Table

The Data Table is a high-performance Custom Web Control designed specifically for WinCC Unified and WinCC V8 environments. It provides a high-contrast, professional data grid for displaying structured process information, ensuring that critical production data remains legible in demanding industrial settings. By utilizing a sticky header and dynamic row generation, it allows operators to navigate large datasets without losing context of the information architecture.

Key Features

• Interactive Navigation: Features a sticky header for constant visibility of column titles and visual feedback during row selection.
• Dynamic Data Handling: Efficiently renders complex datasets through the dataJson property and provides a customizable emptyMessage for instances when no data is present.
• Event-Driven Integration: Includes a RowSelected event that triggers upon user interaction, allowing for seamless synchronization with other HMI elements.
• Built-in Methods: Includes programmatic control via clearSelection and scrollToTop methods to reset the view or clear operator inputs.

Customization

Engineers can fully tailor the visual and functional behavior of the grid. Key properties include backgroundColor for UI consistency, while rowHeight and headerHeight allow for precise layout adjustments. The columns array enables flexible schema definition, ensuring the table adapts to any data structure provided via the dataJson string.

Use Cases

• Batch Management: Displaying active and historical batch recipes with selection capabilities for detailed analysis.
• Alarm Logs: Presenting structured event logs where high contrast and sticky headers improve readability.
• Inventory Tracking: Monitoring raw material levels and storage locations in real-time.

Compatibility

This control is fully compatible with WinCC Unified (TIA Portal) and WinCC V8. It supports direct tag binding for all properties, enabling rapid deployment without complex scripting.

💡 TIA Portal Reminder: Ensure the "Read only" option is unchecked in TIA Portal when linking tags to properties that require bidirectional communication, such as selectedRowIndex, to ensure the HMI can write back to the PLC.

⚠️ AI-Generated: This custom web control was automatically generated using AI. Please test and validate all functionalities before deploying in a live production environment.

⚠️ AI-Generated: This custom web control was automatically generated using AI technology. It may contain errors or unexpected behavior. Users are responsible for testing and validating before using in production environments.