Blazor Tree Grid Example - Reorder
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 Press Enter to sort. Press Alt Down to open filter Menu | Full Name Press Enter to sort. Press Alt Down to open filter Menu | Designation Press Enter to sort. Press Alt Down to open filter Menu | Joined Date Press Enter to sort. Press Alt Down to open filter Menu | Country Press Enter to sort. Press Alt Down to open filter Menu | Availability Press Enter to sort. Press Alt Down to open filter Menu | Email Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| EMP001 | Sophia Turner | Chief Executive Officer | 02/02/1991 | London, UK | Yes | |
| EMP002 | Lucas Walker | VP Engineering | 16/02/2010 | Chicago, IL | Yes | |
| EMP003 | Charlotte Harris | VP Marketing | 17/03/2011 | San Francisco, CA | Yes | |
| EMP004 | Amelia Martin | VP Sales | 18/04/2012 | New York, USA | No | |
| EMP005 | Ethan Lewis | Chief of Staff | 19/05/2013 | London, UK | Yes | |
| EMP006 | William Brown | Chief Technology Officer | 03/03/1992 | Seattle, WA | Yes | |
| EMP007 | Isabella Moore | Lead Developer | 26/12/2002 | Seattle, WA | No | |
| EMP008 | Liam Taylor | Senior Architect | 27/01/2003 | Los Angeles, CA | Yes | |
| EMP009 | Ava Anderson | DevOps Manager | 01/02/2004 | Chicago, IL | Yes | |
| EMP010 | Noah Thomas | QA Lead | 02/03/2005 | San Francisco, CA | Yes |
This sample demonstrates the reordering functionality in Tree Grid. Columns can be rearranged by dragging and dropping the headers.
Column reordering allows changing the sequence of columns to suit preferences, and it is enabled by setting the AllowReordering property to true.
In this demo, columns can be reordered by dragging and dropping the column header from one index to another. This feature allows you to dynamically rearrange the column layout, providing flexibility in how data is presented in the Tree Grid.
More information about column reordering can be found in this documentation section.