A Blazor DataGrid built for millions of rows
The Blazor DataGrid is a high-performance component for displaying and managing tabular data in Blazor applications. It supports local and remote data binding, inline and dialog editing, sorting, Excel-like filtering, paging, grouping, aggregation, column customization, and row selection. Developers can also export grid data to Excel, CSV, and PDF.
The DataGrid uses row and column virtualization to render only the rows and columns currently in view, loading data on demand as users scroll. Paging, infinite scrolling, virtual scrolling, and server-side data processing are supported for large-scale operations.
Interact with the Live Blazor DataGrid
The grid above focuses on handling large datasets. Try Live Demo opens the full grid experience so you can explore the sorting, filtering, and column formatting features interactively.
Runs in-browser. No installation required.
Installation & Quick Start
Follow these four steps to integrate the DataGrid into your Blazor application.
1
Install the DataGrid package
Install the required NuGet packages using the Package Manager Console (PMC).
Install-Package Syncfusion.Blazor.Grid
Install-Package Syncfusion.Blazor.Themes2
Register Syncfusion Blazor Service
Register the Syncfusion Blazor service in the Program.cs file and include the required namespace reference using Syncfusion.Blazor;.
builder.Services.AddSyncfusionBlazor();3
Add Theme Stylesheet and Script
Add the Syncfusion theme stylesheet at the end of the <head> section and the required script at the end of the <body> section in the Components/App.razor file to apply styling and enable component functionality.
// Add theme stylesheet in the <head>
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
// Add script in the <body>
<script src="_content/Syncfusion.Blazor.Grid/scripts/sf-grid.min.js" type="text/javascript"></script>4
Add Syncfusion Blazor DataGrid component
Add the Syncfusion Blazor DataGrid component in ~/Components/Pages/Home.razor.
@rendermode InteractiveServer
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@OrderData">
<GridColumns>
<GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderDetails> OrderData { get; set; }
protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
public class OrderDetails
{
public static List<OrderDetails> Order = new List<OrderDetails>();
public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.Freight = Freight;
this.ShipCountry = ShipCountry;
}
public static List<OrderDetails> GetAllRecords()
{
if (Order.Count == 0)
{
Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
}
return Order;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCountry { get; set; }
}
}No credit card required.
Why Choose the Syncfusion Blazor DataGrid Component?
High performance
Render and interact with large datasets smoothly using row and column virtualization. The Blazor DataGrid is optimized for fast loading, scrolling, sorting, filtering, and real-time data updates.
Seamless data binding
Bind data with various local or remote data sources, including JSON, REST APIs, OData, and custom services. Use the built-in DataManager to handle querying, data operations, and communication with remote endpoints.
AI-Assisted Development
Build sophisticated grid experiences faster with the Agentic UI Builder and Syncfusion Agent Skills. Generate layouts, column configurations, filtering, CRUD workflows, and dashboard interfaces with minimal manual effort.
Attractive customizable themes
Cutting-edge design with built-in themes: Fluent, Tailwind CSS, Bootstrap, Material, Fabric, and more. Utilize the online Theme Studio tool to customize themes easily.
Easy export and printing
Export the DataGrid in various file formats, including Excel, PDF, and CSV. Print all the rows, regardless of the number of pages, as well as just the currently viewed page.
Globalization and localization
Enable users from different locales to use the control by formatting dates, currency, and numbering to suit preferences.
AI-ready grid for smarter data analysis
Build smarter Blazor applications with a DataGrid that supports AI features out of the box. Add semantic search and anomaly detection to uncover insights and improve data reliability.
-
Semantic search: Connect your natural language processing (NLP) model to enable natural language queries, eliminating the need for exact keywords.
- See how to add semantic search
-
Anomaly detection: Integrate machine learning (ML) services to identify irregular trends and prevent data issues.
- See how to add anomaly detection
Local and remote data binding
Connect the Blazor DataGrid to local collections, IEnumerable data, RESTful APIs, OData services, GraphQL endpoints, and custom web services with ease. Built-in DataManager support streamlines data retrieval, querying, and synchronization while enabling efficient server-side operations such as paging, sorting, filtering, grouping, and CRUD actions. Whether binding to in-memory business objects, dynamic data, or remote services, the DataGrid delivers a consistent and scalable data management experience.
Sorting, filtering, searching
Find and organize records with built-in sorting, filtering, and search capabilities. Sort single or multiple columns, apply custom sorting logic, and refine results using Excel-like, Check Box, Menu, or Filter Bar filtering with customizable options.
Inline editing: create, edit, delete
Manage data efficiently with built-in create, edit, and delete operations. Edit records using inline, dialog, cell, or batch editing modes, customize editors with templates, and connect CRUD actions to local or remote data sources through DataManager support.
Row grouping and aggregation
Organize data efficiently by grouping records across one or more columns and generate meaningful summaries with built-in aggregation support. Display totals, counts, averages, and custom aggregate values at group and grid levels to quickly analyze trends and key metrics within large datasets.
Row, cell and column selection
Select rows, cells, or columns with flexible single, multiple, and checkbox selection modes. Maintain selections across sorting, filtering, paging, and other data operations to simplify data review, comparison, and bulk actions.
Column customization and resizing
Customize columns with powerful configuration options, including resizing, reordering, formatting, templates, column chooser, frozen columns, spanning, and multi-level headers. Easily control column visibility and layout to create responsive, data-rich views tailored to your application needs.
Row customization and detail rows
Customize row appearance and behavior with row templates, detail templates, row spanning, and drag-and-drop reordering. Display additional record information in expandable detail rows and tailor row layouts to create more engaging and data-rich user experiences.
Cell and column templates
Customize the DataGrid using column, header, detail, and edit templates to display rich content, interactive controls, and custom layouts. Tailor data presentation with flexible templating options that help create engaging, application-specific user experiences.
Export to Excel, CSV, and PDF
Export DataGrid data to Excel, CSV, and PDF formats or print records directly from the browser. Preserve grouping, summaries, and formatting during export, with flexible options to customize output for reporting and data-sharing needs.
Theming and appearance
Customize the DataGrid appearance with built-in themes including Fluent, Bootstrap, Material, Tailwind CSS, and more. Easily adapt styles, colors, and layouts to match your application’s branding while maintaining a consistent experience across desktop and mobile devices.
Adaptive and responsive layout
Adapt seamlessly to desktops, tablets, and mobile devices with the DataGrid’s responsive and adaptive UI. Filtering, sorting, searching, editing, column menus, and paging automatically optimize for smaller screens, delivering a touch-friendly experience without additional configuration.
Localization and globalization
Adapt the DataGrid for global audiences with built-in localization and globalization support. Format dates, numbers, and currencies based on regional settings, support multiple languages, and enable RTL layouts to deliver a consistent user experience across different locales.
Web standards
Deliver accessible and standards-compliant data experiences with keyboard navigation, screen reader support, RTL layouts, localization, and touch-friendly interactions. Built-in accessibility and globalization features help ensure consistent usability across users, devices, and regions.
Blazor live DataGrid
The DataGrid is optimized for handling and updating a large number of records in real-time, making it suitable for binding financial records and more.
Grid interaction & layout features
Row height
Row height is a major factor when displaying a large number of records in the viewport. It is easily customizable and the row height can be set conditionally.
Copy to clipboard
The clipboard allows users to copy selected rows or cells’ data into it. Use the Ctrl+C and Ctrl+Shift+H key combinations to copy data with and without headers, respectively.
Context menu
Perform various actions in a Blazor DataGrid using the pop-up menu that appears when a cell, header, or pager is right-clicked. In addition to default menu items, custom context menu items can be added.
Width and height
Set the width and height properties to change the size of a data grid. When the content overflows the grid element, horizontal and vertical scrollbars will appear. To fill the data grid’s parent container, simply set the height and width to 100%.
Stacked headers
Stacked headers allow grouping and visualizing column headers in a stacked manner. The number of columns that can be stacked is unlimited. Perform all Blazor DataGrid actions even when the columns are stacked.
Tooltips
Enhance the user experience with tooltips that support rich content in the Blazor DataGrid. Display images, icons, and custom components alongside plain text for more contextual and visually engaging interactions that improve clarity and usability within the grid interface.
Accessibility
Keyboard navigation
The Blazor DataGrid ensures that every cell is keyboard-accessible. Major features like sort, select, and edit can be performed using keyboard commands alone; no mouse interaction is required. This helps in creating highly accessible applications using this component.
Screen reader
Provides complete WAI-ARIA accessibility support. The DataGrid UI includes high-contrast visual elements that help people with visual impairments have the best viewing experience. Also, valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Right to left (RTL)
Right-to-left rendering displays the text and layout of the Blazor DataGrid from right to left. This improves the user experience and accessibility for users of RTL languages.
Mobile-optimized and touch-friendly
The Blazor DataGrid has a highly responsive layout and a finely optimized design for desktops, tablets, and smartphones.
Touch support
User-friendly touch gestures and an interactive UI design help produce the best user experience. All Blazor DataGrid features work on touch devices with zero configuration.
Responsive pager
The Blazor DataGrid pager changes its complete UI responsively based on the grid dimensions. Its optimized design provides the best UI interaction on different devices.
Other supported frameworks
The DataGrid is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Blazor DataGrid works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
AI-assisted development
Build feature-rich Blazor DataGrid experiences faster
Accelerate grid development with Syncfusion AI tools that turn requirements into fully configured datagrid experiences with minimal manual setup.
Agentic UI Builder
Turn prompts into ready-to-use UI screens, layouts, and workflows with Syncfusion Blazor components.
Example Prompt Create an order management dashboard with a datagrid, charts, filters, and export actions.
Agent Skills
Accelerate development with Syncfusion AI Agent Skills for faster implementation and integration.
Example Prompt Generate a Blazor DataGrid with grouping, Excel-style filtering, toolbar actions, and PDF export.
AI Coding Assistant
Accelerate development with AI that generates, configures, and troubleshoots component code directly in your IDE.
Example Prompt Show how to bind remote data and enable virtualization in the Syncfusion Blazor DataGrid.
Not sure how to create your first Blazor DataGrid? Our tutorial videos and documentation can help.
I’d love to watch it now Start with the Blazor server-side DataGridFrequently Asked Questions
What is a Blazor DataGrid?
The Syncfusion Blazor DataGrid is a feature-rich, enterprise-grade UI component for displaying and managing tabular data in Blazor applications. It supports data binding, sorting, filtering, grouping, paging, searching, editing, virtualization, templates, data export, and extensive customization for building responsive, data-intensive applications.
Does the Blazor DataGrid support virtualization?
Yes. The Syncfusion Blazor DataGrid supports Row Virtualization and Column Virtualization for efficiently handling large datasets and grids with many columns. Row virtualization renders only the rows visible in the viewport and dynamically loads rows as users scroll, while column virtualization renders only visible columns for efficient horizontal scrolling. Both can be enabled together to reduce rendering overhead and maintain responsive performance with large data collections.
Does the Blazor DataGrid support CRUD operations?
Yes. The Syncfusion Blazor DataGrid supports Create, Read, Update, and Delete (CRUD) operations directly within the grid, allowing users to manage data without navigating to separate pages. It provides flexible editing options, including Inline Editing for editing records within the grid, Dialog Editing for form-based editing, Batch Editing for making multiple cell changes before saving, and Template Editing for creating customized editing experiences. Built-in Data Annotation validation helps enforce validation rules during data entry.
Can I export data to Excel, CSV, and PDF in Blazor DataGrid?
Yes. The Syncfusion Blazor DataGrid supports exporting grid data to Excel, CSV, and PDF formats. It provides flexible export options to preserve and customize data, formatting, styles, and layouts where supported, making it easier to generate reports, share data, and use exported content for further analysis.
Is a Blazor DataGridView or Blazor GridView the same as a Blazor DataGrid?
Not exactly. Terms such as Blazor DataGridView and Blazor GridView may be used when searching for a tabular data component in Blazor, but Syncfusion officially provides this functionality through the Blazor DataGrid. The component is designed for displaying and managing tabular data and supports both local and remote data sources.
What is the difference between a Blazor DataGrid and a Blazor data table?
A Blazor data table is typically used to display tabular data. A Blazor DataGrid provides advanced capabilities such as inline editing, Excel-like filtering, sorting, grouping, aggregation, virtualization, frozen rows and columns, and data export.
Is the Syncfusion Blazor DataGrid free?
No, the Blazor DataGrid component is a commercial product and requires a paid license. However, eligible individuals and small businesses can use it under the free Syncfusion Community License. See the Community License page for the current eligibility requirements.
How do I bind remote data sources in Blazor DataGrid?
The Syncfusion Blazor DataGrid supports Remote Data Sources, enabling data binding to web services, REST APIs, and remote endpoints for scalable data-driven applications. It supports server-side data integration through ORM frameworks such as Entity Framework and Dapper, along with adaptors such as Web API, OData V4, and GraphQL.
Why choose the Syncfusion Blazor DataGrid?
Developers choose the Syncfusion Blazor DataGrid to build feature-rich business applications faster with less custom code.
Key benefits include:
Built-in data operations such as filtering, sorting, grouping, editing, aggregation, and exporting.
High performance for large datasets through row and column virtualization support.
- Flexible customization through templates, themes, and responsive layouts.
- Enterprise-ready features including Excel exporting, PDF exporting, and advanced filtering.
- Faster development by reducing the need to build complex grid functionality from scratch.
Can I customize columns and layouts in the Blazor DataGrid?
Yes. The Syncfusion Blazor DataGrid provides extensive column and layout customization options for different data presentation requirements. It supports Column Formatting, Column Resizing, Column Reordering, Frozen Columns, Column Spanning, and a Column Chooser for dynamically showing or hiding columns. It also supports responsive column visibility and Adaptive Layout capabilities to optimize the Grid experience across different screen sizes and devices.
How does the Syncfusion Blazor DataGrid compare to Microsoft QuickGrid?
Microsoft QuickGrid is a lightweight Blazor DataGrid built for basic data presentation scenarios. It works well for simple applications that need a minimal grid component.
The Blazor DataGrid is a full-featured enterprise grid designed for complex, data-intensive applications. It includes advanced capabilities such as grouping, aggregation, CRUD editing, Excel-like filtering, virtualization, exporting to Excel/PDF/CSV, templating, and extensive customization.
Trusted by the world’s leading companies
Our Customers Love Us
Syncfusion Blazor DataGrid resources
Figma download
Blazor Components – 145+ UI and DataViz Components
Standalone UI SDKs
Integrate the DataGrid, Chart, Scheduler, Gantt, Rich Text Editor, File Manager, and Diagram UI components into applications to enable rich interaction and visualization, delivering a seamless user experience.
Document Solutions
Integrate the PDF Viewer, DOCX Editor, Spreadsheet Editor, and document-processing libraries into the Blazor applications to enable a smooth user experience.
