Blazor Tree Grid Example - Default Filtering
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Employee ID | Name | Designation | Joined Date | Address | Contact |
|---|---|---|---|---|---|
| EMP001 | Sophia Turner | Chief Executive Officer | 2/2/1991 | 456 Oak Ave, Chicago | |
| EMP002 | Lucas Walker | VP Engineering | 2/16/2010 | 321 Elm St, Seattle | |
| EMP003 | Charlotte Harris | VP Marketing | 3/17/2011 | 555 Maple Dr, Los Angeles | |
| EMP004 | Amelia Martin | VP Sales | 4/18/2012 | 22 King St, London | |
| EMP005 | Ethan Lewis | Chief of Staff | 5/19/2013 | 94 Lakeview Rd, Chicago | |
| EMP006 | William Brown | Chief Technology Officer | 3/3/1992 | 789 Pine Rd, London | |
| EMP007 | Isabella Moore | Lead Developer | 12/26/2002 | 94 Lakeview Rd, Chicago | |
| EMP008 | Liam Taylor | Senior Architect | 1/27/2003 | 123 Main St, New York | |
| EMP009 | Ava Anderson | DevOps Manager | 2/1/2004 | 456 Oak Ave, Chicago | |
| EMP010 | Noah Thomas | QA Lead | 3/2/2005 | 789 Pine Rd, London | |
| EMP011 | Emma Davis | Chief Marketing Officer | 4/4/1993 | 321 Elm St, Seattle | |
| EMP012 | James Carter | Digital Marketing Head | 10/9/2012 | 789 Pine Rd, London | |
| EMP013 | Sophia Turner | Brand Manager | 11/10/2013 | 321 Elm St, Seattle | |
| EMP014 | William Brown | Content Strategist | 12/11/2014 | 555 Maple Dr, Los Angeles | |
| EMP015 | Emma Davis | PR Manager | 1/12/2015 | 22 King St, London | |
| EMP016 | Oliver Wilson | Chief Financial Officer | 5/5/1994 | 555 Maple Dr, Los Angeles | |
| EMP017 | Lucas Walker | Financial Controller | 8/19/2004 | 22 King St, London | |
| EMP018 | Charlotte Harris | Senior Accountant | 9/20/2005 | 94 Lakeview Rd, Chicago | |
| EMP019 | Amelia Martin | Tax Specialist | 10/21/2006 | 123 Main St, New York | |
| EMP020 | Ethan Lewis | Data Analyst | 11/22/2007 | 456 Oak Ave, Chicago | |
| EMP021 | Isabella Moore | VP Sales - North America | 6/6/1995 | 22 King St, London | |
| EMP022 | Isabella Moore | Regional Sales Manager | 6/2/2014 | 456 Oak Ave, Chicago | |
| EMP023 | Liam Taylor | Account Executive | 7/3/2015 | 789 Pine Rd, London | |
| EMP024 | Ava Anderson | Sales Coordinator | 8/4/2016 | 321 Elm St, Seattle | |
| EMP025 | Noah Thomas | Business Development | 9/5/2017 | 555 Maple Dr, Los Angeles | |
| EMP026 | Liam Taylor | VP Sales - Europe | 7/7/1996 | 94 Lakeview Rd, Chicago | |
| EMP027 | James Carter | Engineering Manager | 4/12/2006 | 555 Maple Dr, Los Angeles | |
| EMP028 | Sophia Turner | Tech Lead | 5/13/2007 | 22 King St, London | |
| EMP029 | William Brown | Senior Developer | 6/14/2008 | 94 Lakeview Rd, Chicago | |
| EMP030 | Emma Davis | Scrum Master | 7/15/2009 | 123 Main St, New York | |
| EMP031 | Ava Anderson | VP Engineering | 8/8/1997 | 123 Main St, New York | |
| EMP032 | Lucas Walker | Talent Acquisition Lead | 2/22/2016 | 123 Main St, New York | |
| EMP033 | Charlotte Harris | HR Business Partner | 3/23/2017 | 456 Oak Ave, Chicago | |
| EMP034 | Amelia Martin | Compensation Analyst | 4/24/2000 | 789 Pine Rd, London | |
| EMP035 | Ethan Lewis | Facilities Manager | 5/25/2001 | 321 Elm St, Seattle | |
| EMP036 | Noah Thomas | Director of Human Resources | 9/9/1998 | 456 Oak Ave, Chicago | |
| EMP037 | Isabella Moore | Supply Chain Manager | 12/5/2008 | 321 Elm St, Seattle | |
| EMP038 | Liam Taylor | Logistics Head | 1/6/2009 | 555 Maple Dr, Los Angeles | |
| EMP039 | Ava Anderson | Procurement Lead | 2/7/2010 | 22 King St, London | |
| EMP040 | Noah Thomas | Operations Analyst | 3/8/2011 | 94 Lakeview Rd, Chicago | |
| EMP041 | Mia Jackson | Director of Operations | 10/10/1999 | 789 Pine Rd, London | |
| EMP042 | James Carter | UX Lead | 10/15/2000 | 94 Lakeview Rd, Chicago | |
| EMP043 | Sophia Turner | Product Designer | 11/16/2001 | 123 Main St, New York | |
| EMP044 | William Brown | User Researcher | 12/17/2002 | 456 Oak Ave, Chicago | |
| EMP045 | Emma Davis | UX Writer | 1/18/2003 | 789 Pine Rd, London | |
| EMP046 | Lucas Walker | Director of Product Management | 11/11/2000 | 321 Elm St, Seattle | |
| EMP047 | Lucas Walker | Support Manager | 8/25/2010 | 789 Pine Rd, London | |
| EMP048 | Charlotte Harris | L2 Support Engineer | 9/26/2011 | 321 Elm St, Seattle | |
| EMP049 | Amelia Martin | Customer Success | 10/27/2012 | 555 Maple Dr, Los Angeles | |
| EMP050 | Ethan Lewis | Implementation Specialist | 11/1/2013 | 22 King St, London | |
| EMP051 | Charlotte Harris | Chief Executive Officer | 12/12/2001 | 555 Maple Dr, Los Angeles | |
| EMP052 | Isabella Moore | VP Engineering | 6/8/2002 | 22 King St, London | |
| EMP053 | Liam Taylor | VP Marketing | 7/9/2003 | 94 Lakeview Rd, Chicago | |
| EMP054 | Ava Anderson | VP Sales | 8/10/2004 | 123 Main St, New York | |
| EMP055 | Noah Thomas | Chief of Staff | 9/11/2005 | 456 Oak Ave, Chicago | |
| EMP056 | Amelia Martin | Chief Technology Officer | 1/13/2002 | 22 King St, London | |
| EMP057 | James Carter | Lead Developer | 4/18/2012 | 456 Oak Ave, Chicago | |
| EMP058 | Sophia Turner | Senior Architect | 5/19/2013 | 789 Pine Rd, London | |
| EMP059 | William Brown | DevOps Manager | 6/20/2014 | 321 Elm St, Seattle | |
| EMP060 | Emma Davis | QA Lead | 7/21/2015 | 555 Maple Dr, Los Angeles | |
| EMP061 | Ethan Lewis | Chief Marketing Officer | 2/14/2003 | 94 Lakeview Rd, Chicago | |
| EMP062 | Lucas Walker | Digital Marketing Head | 2/1/2004 | 555 Maple Dr, Los Angeles | |
| EMP063 | Charlotte Harris | Brand Manager | 3/2/2005 | 22 King St, London | |
| EMP064 | Amelia Martin | Content Strategist | 4/3/2006 | 94 Lakeview Rd, Chicago | |
| EMP065 | Ethan Lewis | PR Manager | 5/4/2007 | 123 Main St, New York | |
| EMP066 | Harper Lee | Chief Financial Officer | 3/15/2004 | 123 Main St, New York | |
| EMP067 | Isabella Moore | Financial Controller | 12/11/2014 | 123 Main St, New York | |
| EMP068 | Liam Taylor | Senior Accountant | 1/12/2015 | 456 Oak Ave, Chicago | |
| EMP069 | Ava Anderson | Tax Specialist | 2/13/2016 | 789 Pine Rd, London | |
| EMP070 | Noah Thomas | Data Analyst | 3/14/2017 | 321 Elm St, Seattle |
This sample demonstrates a filter bar that lets users type values to filter individual columns.
Enable filtering by setting AllowFiltering to true. A filter bar appears below the header for entering filter values. Configure behavior via TreeGridFilterSettings.
Hierarchical filtering modes (HierarchyMode):
Parent(default) – Show filtered records with parentsChild– Show filtered records with childrenBoth– Show filtered records with parents and childrenNone– Show only filtered records
In this demo, Parent mode is enabled by default.
More information on filtering can be found in the documentation section.