Blazor DataGrid Example - Keyboard Navigation
Drag a column header here to group its column
Order ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Customer ID Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Freight Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu | Ship Country Press Enter to sort. Press Ctrl space to group. Press Alt Down to open filter Menu |
|---|
| 10001 | ALFKI | $2.30 | 5/15/1991 | Denmark |
| 10002 | ANATR | $3.30 | 4/4/1990 | Brazil |
| 10003 | ANTON | $4.30 | 11/30/1957 | Germany |
| 10004 | BLONP | $5.30 | 10/22/1930 | Austria |
| 10005 | BOLID | $6.30 | 2/18/1953 | Switzerland |
| 10006 | ALFKI | $4.60 | 5/15/1991 | Denmark |
| 10007 | ANATR | $6.60 | 4/4/1990 | Brazil |
| 10008 | ANTON | $8.60 | 11/30/1957 | Germany |
| 10009 | BLONP | $10.60 | 10/22/1930 | Austria |
| 10010 | BOLID | $12.60 | 2/18/1953 | Switzerland |
| 10011 | ALFKI | $6.90 | 5/15/1991 | Denmark |
| 10012 | ANATR | $9.90 | 4/4/1990 | Brazil |
This sample demonstrates the comprehensive keyboard navigation support in the DataGrid component.
The Blazor DataGrid supports extensive keyboard shortcuts for efficient navigation and interaction. The following keyboard shortcuts are available:
FOCUS ELEMENTS
- Alt + J - Move focus to the DataGrid
- Home - Move to the first cell of the focused row
- End - Move to the last cell of the focused row
- Ctrl + Home - Move to the first cell of the first row
- Ctrl + End - Move to the last cell of the last row
- ↓, ↑, ←, → - Navigate between cells
- Alt + W - Move focus to the first cell of grid content
PAGING
- Page Down - Navigate to the next page
- Page Up - Navigate to the previous page
- Ctrl + Alt + Page Down - Navigate to the last page
- Ctrl + Alt + Page Up - Navigate to the first page
SELECTION
- Shift + Arrow Keys - Extend selection upward or downward
- Ctrl + A - Select all rows/cells on current page
- Tab/Shift + Tab - Move cell selection right/left
- Esc - Deselect all rows/cells
EDITING
- F2 - Start editing
- Esc - Cancel editing
- Del - Delete selected record
- Insert - Create new record
- Tab/Shift + Tab - Navigate between editable cells
- Enter/Shift + Enter - Save and navigate
FILTERING, SORTING, GROUPING
- Alt + ↓ - Open filter menu when header is focused
- Ctrl + Enter - Multi-sort on focused column header
- Shift + Enter - Clear sorting
- Enter - Sort (ascending/descending)
- Alt + ↓ - Expand selected group
- Ctrl + ↓ - Expand all visible groups
CLIPBOARD & PRINT
- Ctrl + C - Copy selected rows/cells
- Ctrl + Shift + H - Copy with headers
- Ctrl + P - Print DataGrid