Blazor DataGrid Example - Overview
This sample shows an overview of Blazor DataGrid features as well as large data performance metrics. To change the number of rows and columns in a datasource, use the dropdown menus.
Employee ID Press Enter to sort. Press Alt Down to open filter Menu | Employee Name Press Enter to sort. Press Alt Down to open filter Menu | Designation Press Enter to sort. Press Alt Down to open filter Menu | Mail Press Enter to sort. Press Alt Down to open filter Menu | Location Press Enter to sort. Press Alt Down to open filter Menu | Status Press Enter to sort. Press Alt Down to open filter Menu | Trustworthiness Press Enter to sort. Press Alt Down to open filter Menu | Rating Press Alt Down to open filter Menu | Software Proficiency Press Alt Down to open filter Menu | Current Salary Press Enter to sort. Press Alt Down to open filter Menu | Address Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| 1000 |
Michael | Manager | michael40@sample.com | 
UK | Active | 
Insufficient | $104,075.00 | 59 rue de lAbbaye | |||
| 1001 |
Kathryn | CFO | kathryn32@arpy.com |
USA | Active | 
Perfect | $208,150.00 | Luisenstr. 48 | |||
| 1002 |
Tamer | Designer | tamer17@rpy.com |
Sweden | Inactive | 
Sufficient | $312,225.00 | Rua do Paço, 67 | |||
| 1003 |
Martin | Developer | martin52@mail.com |
France | Active |
Insufficient | $416,300.00 | 2, rue du Commerce | |||
| 1004 |
Davolio | Program Director | davolio13@jourrapide.com |
Canada | Inactive |
Sufficient | $520,375.00 | Boulevard Tirou, 255 | |||
| 1005 |
Nancy | System Analyst | nancy40@sample.com |
Argentina | Active |
Perfect | $624,450.00 | Rua do mailPaço, 67 | |||
| 1006 |
Fuller | Project Lead | fuller32@arpy.com |
Austria | Active |
Insufficient | $728,525.00 | Hauptstr. 31 | |||
| 1007 |
Leverling | Manager | leverling17@rpy.com |
Germany | Active |
Perfect | $832,600.00 | Starenweg 5 | |||
| 1008 |
Peacock | CFO | peacock52@mail.com |
Mexico | Inactive |
Sufficient | $936,675.00 | Rua do Mercado, 12 | |||
| 1009 |
Margaret | Designer | margaret13@jourrapide.com |
UK | Active |
Insufficient | $1,040,750.00 | Carrera 22 con Ave. Carlos Soublette #8-35 | |||
| 1010 |
Buchanan | Developer | buchanan40@sample.com |
USA | Inactive |
Sufficient | $1,144,825.00 | Kirchgasse 6 | |||
| 1011 |
Janet | Program Director | janet32@arpy.com |
Sweden | Active |
Perfect | $1,248,900.00 | Sierras de Granada 9993 | |||
| 1012 |
Andrew | System Analyst | andrew17@rpy.com |
France | Active |
Insufficient | $1,352,975.00 | Mehrheimerstr. 369 | |||
| 1013 |
Callahan | Project Lead | callahan52@mail.com |
Canada | Active |
Perfect | $1,457,050.00 | Rua da Panificadora, 12 | |||
| 1014 |
Laura | Manager | laura13@jourrapide.com |
Argentina | Inactive |
Sufficient | $1,561,125.00 | 2817 Milton Dr. | |||
| 1015 |
Dodsworth | CFO | dodsworth40@sample.com |
Austria | Active |
Insufficient | $1,665,200.00 | Kirchgasse 6 | |||
| 1016 |
Anne | Designer | anne32@arpy.com |
Germany | Inactive |
Sufficient | $1,769,275.00 | Åkergatan 24 | |||
| 1017 |
Bergs | Developer | bergs17@rpy.com |
Mexico | Active |
Perfect | $1,873,350.00 | 24, place Kléber | |||
| 1018 |
Vinet | Program Director | vinet52@mail.com |
UK | Active |
Insufficient | $1,977,425.00 | Torikatu 38 | |||
| 1019 |
Anton | System Analyst | anton13@jourrapide.com |
USA | Active |
Perfect | $2,081,500.00 | Berliner Platz 43 | |||
| 1020 |
Fleet | Project Lead | fleet40@sample.com |
Sweden | Inactive |
Sufficient | $2,185,575.00 | 5ª Ave. Los Palos Grandes | |||
| 1021 |
Zachery | Manager | zachery32@arpy.com |
France | Active |
Insufficient | $2,289,650.00 | 1029 - 12th Ave. S. | |||
| 1022 |
Van | CFO | van17@rpy.com |
Canada | Inactive |
Sufficient | $2,393,725.00 | Torikatu 38 | |||
| 1023 |
King | Designer | king52@mail.com |
Argentina | Active |
Perfect | $2,497,800.00 | P.O. Box 555 | |||
| 1024 |
Jack | Developer | jack13@jourrapide.com |
Austria | Active |
Insufficient | $2,601,875.00 | 2817 Milton Dr. | |||
| 1025 |
Rose | Program Director | rose40@sample.com |
Germany | Active |
Perfect | $2,705,950.00 | Taucherstraße 10 | |||
| 1026 |
Michael | System Analyst | michael32@arpy.com |
Mexico | Inactive |
Sufficient | $2,810,025.00 | 59 rue de lAbbaye | |||
| 1027 |
Kathryn | Project Lead | kathryn17@rpy.com |
UK | Active |
Insufficient | $2,914,100.00 | Via Ludovico il Moro 22 | |||
| 1028 |
Tamer | Manager | tamer52@mail.com |
USA | Inactive |
Sufficient | $3,018,175.00 | Avda. Azteca 123 | |||
| 1029 |
Martin | CFO | martin13@jourrapide.com |
Sweden | Active |
Perfect | $3,122,250.00 | Heerstr. 22 | |||
| 1030 |
Davolio | Designer | davolio40@sample.com |
France | Active |
Insufficient | $3,226,325.00 | Berguvsvägen 8 | |||
| 1031 |
Nancy | Developer | nancy32@arpy.com |
Canada | Active |
Perfect | $3,330,400.00 | Magazinweg 7 | |||
| 1032 |
Fuller | Program Director | fuller17@rpy.com |
Argentina | Inactive |
Sufficient | $3,434,475.00 | Berguvsvägen 8 | |||
| 1033 |
Leverling | System Analyst | leverling52@mail.com |
Austria | Active |
Insufficient | $3,538,550.00 | Gran Vía, 1 | |||
| 1034 |
Peacock | Project Lead | peacock13@jourrapide.com |
Germany | Inactive |
Sufficient | $3,642,625.00 | Gran Vía, 1 | |||
| 1035 |
Margaret | Manager | margaret40@sample.com |
Mexico | Active |
Perfect | $3,746,700.00 | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | |||
| 1036 |
Buchanan | CFO | buchanan32@arpy.com |
UK | Active |
Insufficient | $3,850,775.00 | Magazinweg 7 | |||
| 1037 |
Janet | Designer | janet17@rpy.com |
USA | Active |
Perfect | $3,954,850.00 | Taucherstraße 10 | |||
| 1038 |
Andrew | Developer | andrew52@mail.com |
Sweden | Inactive |
Sufficient | $4,058,925.00 | Taucherstraße 10 | |||
| 1039 |
Callahan | Program Director | callahan13@jourrapide.com |
France | Active |
Insufficient | $4,163,000.00 | Av. Copacabana, 267 | |||
The Blazor DataGrid is used to display and manipulate tabular data, and it includes configuration options for controlling how the data is presented and manipulated. It can read data from data sources such as IEnumerable, OData web services, or SfDataManager Component and assign data fields to columns. It also shows a column header to identify the field and supports grouped records.
Blazor DataGrid features such as Virtual Scrolling, Filtering, Sorting, Column Template, and so on are used in this demo, along with a large data source.
More information on the Blazor DataGrid Virtual scrolling can be found in this Virtualization.