👁 Image
Syncfusion.Blazor.Grid 33.2.13

Syncfusion® Blazor DataGrid

High-performance Blazor DataGrid for modern applications. Display, edit, and manage tabular data from IEnumerable collections, OData services, or remote sources with built-in paging, sorting, filtering, grouping, and virtualization.

👁 Blazor DataGrid

Key Features

• Fast rendering with virtualization and row/column virtualization
• Sorting, filtering, grouping, and searching capabilities
• Inline, batch, and dialog editing modes
• Template columns, column resizing, reordering, and freezing
• Excel and PDF export (requires additional Syncfusion export packages)
• Keyboard navigation, accessibility, and RTL support
• Responsive design with mobile touch optimization

Add Stylesheet and Script References

• For Blazor Web App / Blazor Server App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor service in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add Blazor DataGrid component to your Razor page.

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
 <GridColumns>
 <GridColumn Field="OrderID" HeaderText="Order ID" Width="120" TextAlign="TextAlign.Right"></GridColumn>
 <GridColumn Field="CustomerName" HeaderText="Customer Name" Width="150"></GridColumn>
 <GridColumn Field="OrderDate" HeaderText="Order Date" Width="130" Format="d" TextAlign="TextAlign.Right"></GridColumn>
 <GridColumn Field="Freight" HeaderText="Freight" Width="120" Format="C2" TextAlign="TextAlign.Right"></GridColumn>
 </GridColumns>
</SfGrid>

@code {
 private List<Order> Orders = new List<Order>
 {
 new Order { OrderID = 10248, CustomerName = "VINET", OrderDate = new DateTime(2023, 7, 4), Freight = 32.38 },
 new Order { OrderID = 10249, CustomerName = "TOMSP", OrderDate = new DateTime(2023, 7, 5), Freight = 11.61 },
 new Order { OrderID = 10250, CustomerName = "HANAR", OrderDate = new DateTime(2023, 7, 8), Freight = 65.83 }
 };

 public class Order
 {
 public int OrderID { get; set; }
 public string CustomerName { get; set; }
 public DateTime OrderDate { get; set; }
 public double Freight { get; set; }
 }
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET