Blazor Tree Grid Example - Sticky Header
This sample demonstrates the Tree Grid component with the sticky header feature. While scrolling the demo page, the Tree Grid header is fixed at the top of its parent element.
Asset ID Press Enter to sort | Asset Name Press Enter to sort | Serial Number Press Enter to sort | Category Press Enter to sort | Status Press Enter to sort | Purchase Date Press Enter to sort | Warranty Expire Date Press Enter to sort |
|---|
| AST001 | Development Department | |||||
| AST002 | Dell XPS 13 | DXPS13-001 | Laptop | In Use | 10/02/2025 | 10/02/2027 |
| AST003 | MacBook Pro 16 | MBP16-002 | Laptop | In Use | 15/02/2025 | 15/02/2027 |
| AST004 | Lenovo ThinkPad X1 | LTPX1-003 | Laptop | Suspended | 20/02/2025 | 20/02/2027 |
| AST005 | Dell OptiPlex 7080 | DOP7080-004 | Desktop | In Use | 05/03/2025 | 05/03/2027 |
| AST006 | Anker PowerPort Charger | APPC-004 | Charger | In Use | 20/04/2025 | 20/04/2027 |
| AST007 | iMac 27-inch | IMAC27-005 | Desktop | In Use | 10/03/2025 | 10/03/2027 |
| AST008 | HR Department | |||||
| AST009 | HP Pavilion 15 | HPP15-006 | Laptop | In Use | 05/04/2025 | 05/04/2027 |
| AST010 | Logitech MX Master 3 | LMXM3-007 | Mouse | In Use | 10/04/2025 | 10/04/2027 |
| AST011 | Anker PowerPort Charger | APPC-006 | Charger | In Use | 20/04/2025 | 20/04/2027 |
| AST012 | MacBook Pro 16 | MBP16-004 | Laptop | In Use | 15/02/2025 | 15/02/2027 |
| AST013 | Canon Pixma TR4520 | CPTR4520-009 | Printer | In Use | 05/05/2025 | 05/05/2027 |
| AST014 | Finance Department | |||||
| AST015 | Microsoft Ergonomic Mouse | MEM-010 | Mouse | In Use | 05/06/2025 | 05/06/2027 |
| AST016 | Belkin Boost Charger | BBC-011 | Charger | In Use | 10/06/2025 | 10/06/2027 |
| AST017 | HP EliteBook 850 | HPEB850-012 | Laptop | In Use | 20/06/2025 | 20/06/2027 |
| AST018 | Lenovo Yoga 7i | LY7I-023 | Laptop | In Use | 25/06/2025 | 25/06/2027 |
| AST019 | Support Department | |||||
| AST020 | Dell Latitude 7420 | DL7420-013 | Laptop | In Use | 05/08/2025 | 05/07/2027 |
| AST021 | HP EliteBook 840 | HPEB840-014 | Laptop | In Use | 10/08/2025 | 10/07/2027 |
| AST022 | Lenovo ThinkPad E14 | LTPE14-015 | Laptop | Suspended | 15/08/2025 | 15/07/2027 |
| AST023 | Anker PowerPort Charger | APPC-007 | Charger | In Use | 20/04/2025 | 20/04/2027 |
| AST024 | Zendesk Support Suite | ZSS-016 | Software | Active | 20/08/2025 | 20/07/2027 |
| AST025 | Network Department | |||||
| AST026 | Cisco Catalyst 9200 | CC9200-017 | Switch | In Use | 05/05/2025 | 05/07/2027 |
| AST027 | Aruba 2930F | A2930F-018 | Switch | In Use | 10/05/2025 | 10/07/2027 |
| AST028 | Fortinet FortiGate 60F | FF60F-019 | Firewall | In Use | 15/05/2025 | 15/07/2027 |
| AST029 | Netgear Nighthawk Router | NNR-022 | Router | In Use | 20/05/2025 | 20/07/2027 |
| AST030 | Lenovo Yoga 7i | LY7I-025 | Laptop | In Use | 25/06/2025 | 25/06/2027 |
| AST031 | Front Office Department | |||||
| AST032 | Dell OptiPlex 3080 | DOP3080-020 | Desktop | In Use | 15/06/2025 | 15/07/2027 |
| AST033 | HP LaserJet Pro | HPLJP-021 | Printer | In Use | 20/06/2025 | 20/07/2027 |
| AST034 | Microsoft Surface Laptop | MSL-023 | Laptop | In Use | 25/06/2025 | 25/07/2027 |
| AST035 | Anker PowerPort Charger | APPC-008 | Charger | In Use | 20/04/2025 | 20/04/2027 |
| AST036 | Logitech Wireless Mouse | LWM-024 | Mouse | In Use | 30/06/2025 | 30/07/2027 |
The Tree Grid headers can be fixed while scrolling the record vertically. This is a useful feature for large datasets as it allows users to easily understand the context of the data being displayed without losing sight of the column headers. To implement this set the EnableStickyHeader property to true.
More information on the sticky header can be found in documentation section.