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 | Employee Name | Designation | Mail | Location | Status | Trustworthiness | Rating | Software Proficiency | Current Salary | Address |
---|
1000 |
Michael | Manager | [email protected] | ![]() | Active | ![]() | $104,075.00 | 59 rue de lAbbaye | |||
1001 |
Kathryn | CFO | [email protected] | ![]() | Active | ![]() | $208,150.00 | Luisenstr. 48 | |||
1002 |
Tamer | Designer | [email protected] | ![]() | Inactive | ![]() | $312,225.00 | Rua do Paço, 67 | |||
1003 |
Martin | Developer | [email protected] | ![]() | Active | ![]() | $416,300.00 | 2, rue du Commerce | |||
1004 |
Davolio | Program Director | [email protected] | ![]() | Inactive | ![]() | $520,375.00 | Boulevard Tirou, 255 | |||
1005 |
Nancy | System Analyst | [email protected] | ![]() | Active | ![]() | $624,450.00 | Rua do mailPaço, 67 | |||
1006 |
Fuller | Project Lead | [email protected] | ![]() | Active | ![]() | $728,525.00 | Hauptstr. 31 | |||
1007 |
Leverling | Manager | [email protected] | ![]() | Active | ![]() | $832,600.00 | Starenweg 5 | |||
1008 |
Peacock | CFO | [email protected] | ![]() | Inactive | ![]() | $936,675.00 | Rua do Mercado, 12 | |||
1009 |
Margaret | Designer | [email protected] | ![]() | Active | ![]() | $1,040,750.00 | Carrera 22 con Ave. Carlos Soublette #8-35 | |||
1010 |
Buchanan | Developer | [email protected] | ![]() | Inactive | ![]() | $1,144,825.00 | Kirchgasse 6 | |||
1011 |
Janet | Program Director | [email protected] | ![]() | Active | ![]() | $1,248,900.00 | Sierras de Granada 9993 | |||
1012 |
Andrew | System Analyst | [email protected] | ![]() | Active | ![]() | $1,352,975.00 | Mehrheimerstr. 369 | |||
1013 |
Callahan | Project Lead | [email protected] | ![]() | Active | ![]() | $1,457,050.00 | Rua da Panificadora, 12 | |||
1014 |
Laura | Manager | [email protected] | ![]() | Inactive | ![]() | $1,561,125.00 | 2817 Milton Dr. | |||
1015 |
Dodsworth | CFO | [email protected] | ![]() | Active | ![]() | $1,665,200.00 | Kirchgasse 6 | |||
1016 |
Anne | Designer | [email protected] | ![]() | Inactive | ![]() | $1,769,275.00 | Åkergatan 24 | |||
1017 |
Bergs | Developer | [email protected] | ![]() | Active | ![]() | $1,873,350.00 | 24, place Kléber | |||
1018 |
Vinet | Program Director | [email protected] | ![]() | Active | ![]() | $1,977,425.00 | Torikatu 38 | |||
1019 |
Anton | System Analyst | [email protected] | ![]() | Active | ![]() | $2,081,500.00 | Berliner Platz 43 | |||
1020 |
Fleet | Project Lead | [email protected] | ![]() | Inactive | ![]() | $2,185,575.00 | 5ª Ave. Los Palos Grandes | |||
1021 |
Zachery | Manager | [email protected] | ![]() | Active | ![]() | $2,289,650.00 | 1029 - 12th Ave. S. | |||
1022 |
Van | CFO | [email protected] | ![]() | Inactive | ![]() | $2,393,725.00 | Torikatu 38 | |||
1023 |
King | Designer | [email protected] | ![]() | Active | ![]() | $2,497,800.00 | P.O. Box 555 | |||
1024 |
Jack | Developer | [email protected] | ![]() | Active | ![]() | $2,601,875.00 | 2817 Milton Dr. | |||
1025 |
Rose | Program Director | [email protected] | ![]() | Active | ![]() | $2,705,950.00 | Taucherstraße 10 | |||
1026 |
Michael | System Analyst | [email protected] | ![]() | Inactive | ![]() | $2,810,025.00 | 59 rue de lAbbaye | |||
1027 |
Kathryn | Project Lead | [email protected] | ![]() | Active | ![]() | $2,914,100.00 | Via Ludovico il Moro 22 | |||
1028 |
Tamer | Manager | [email protected] | ![]() | Inactive | ![]() | $3,018,175.00 | Avda. Azteca 123 | |||
1029 |
Martin | CFO | [email protected] | ![]() | Active | ![]() | $3,122,250.00 | Heerstr. 22 | |||
1030 |
Davolio | Designer | [email protected] | ![]() | Active | ![]() | $3,226,325.00 | Berguvsvägen 8 | |||
1031 |
Nancy | Developer | [email protected] | ![]() | Active | ![]() | $3,330,400.00 | Magazinweg 7 | |||
1032 |
Fuller | Program Director | [email protected] | ![]() | Inactive | ![]() | $3,434,475.00 | Berguvsvägen 8 | |||
1033 |
Leverling | System Analyst | [email protected] | ![]() | Active | ![]() | $3,538,550.00 | Gran Vía, 1 | |||
1034 |
Peacock | Project Lead | [email protected] | ![]() | Inactive | ![]() | $3,642,625.00 | Gran Vía, 1 | |||
1035 |
Margaret | Manager | [email protected] | ![]() | Active | ![]() | $3,746,700.00 | Carrera 52 con Ave. Bolívar #65-98 Llano Largo | |||
1036 |
Buchanan | CFO | [email protected] | ![]() | Active | ![]() | $3,850,775.00 | Magazinweg 7 | |||
1037 |
Janet | Designer | [email protected] | ![]() | Active | ![]() | $3,954,850.00 | Taucherstraße 10 | |||
1038 |
Andrew | Developer | [email protected] | ![]() | Inactive | ![]() | $4,058,925.00 | Taucherstraße 10 | |||
1039 |
Callahan | Program Director | [email protected] | ![]() | Active | ![]() | $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.