Ignite UI Logo for developer web applications

The Fastest Blazor Data Grid

A Blazor data table, more commonly known as a Blazor data grid, is a component allowing you to visualize your bound data as a series of rows and columns. These data grids have been accessible for quite a long time on desktop-related platforms such as WPF and Windows Forms but have only more recently become available for the development of web applications. Modern web applications use tables and data grids that are feature-rich with the ability to data bind, cell and row selection, cell and row editing and error validation, column summaries, interactive Outlook-style grouping, Microsoft Excel-style filtering, and virtualized rows and columns so that you can potentially load millions of records.

Blazor Grid Example

In this Blazor grid example, you can see how users can customize their view of the data by using features and functionality of the grid, such as search and filtering, columns sorting, resizing, pinning and hiding, row grouping, grid summaries, horizontal and vertical, and cell styling which includes embedded in the cell linear progress bar indicator component and sparkline component.

Like this sample? Get access to our complete Blazor toolkit and start building your own apps in minutes. Download it for free.

Why Use a Blazor Data Grid?

Blazor data grids are essential in use cases where high volumes of data must be stored and sorted through quickly. This can include industries such as financial services, banking and insurance, which often use high-volume, high-velocity data. The success of these companies is dependent upon the features, functionality and performance of these data grids. When stock decisions need to be made in microseconds, for example, it’s imperative that the data grid performs with no lag time or flicker.

Blazor Data Grid Features

The Ignite UI for Blazor Data Grid is not just for high-volume and real-time data. It is a feature-rich Blazor grid that gives you capabilities that you would never be able to accomplish with so little code on your own. This example demonstrates a few of the data grid’s key features:

The Fastest Blazor Data Grid Example

Demo

Data Virtualization and Performance

Data Virtualization and Performance

The Ignite UI for Blazor Data Grid component has built-in virtualization for the rows and cells of the grid, meaning that the only rows and cells that are kept in memory are the ones that are in view at a particular time, regardless of whether your data source is local or remote. This affords the best possible performance with seamless vertical and horizontal, Excel-like scrolling with no visual delay or screen flicker, even when plotting millions of records into the grid.


Quick and Easy to Customize, Build and Implement Blazor Tables

The Ignite UI for Blazor Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code.


Blazor Grid Cell and Row Selection

Animation of cell selection capabilities within Blazor Data Grid
Blazor Grid Cell and Row Selection

The Ignite UI for Blazor Data Grid component includes the options to select rows and cells using both the user’s mouse and touchscreen. The available modes for cell and row selection include MultipleCell, MultipleRow, SingleCell, SingleRow, and RangeCell.

Blazor Grid Filtering

Icon of filtering capabilities within Blazor Data Grid
Blazor Grid Filtering

The Ignite UI for Blazor Data Grid allows users to filter its columns with the data type as criteria for the filters applied. For example, if your column represents a string property of your data item, you can use filtering options such as Contains, Starts With, Ends With, etc.

Blazor Grid Column Moving

Animation of column moving functionality within Blazor Data Grid
Blazor Grid Column Moving

The Blazor Data Grid has the in-built ability to click and drag your columns in order to reorder and rearrange them. While dragging the columns, the ability to animate the column moving is available for more control of the user experience of your application.

Blazor Grid Column Pinning

Icon of column pinning functionality within the Blazor Data Grid
Blazor Grid Column Pinning

The ability to fix columns to the left or right side is present in the Blazor Data Grid component. When a column is fixed or pinned, it will maintain its position while the user scrolls the grid horizontally.

Blazor Grid Column Resizing

Grid of data with column resizing features enabled for Blazor Data Grid component
Blazor Grid Column Resizing

The Blazor Data Grid allows your users to resize the columns that exist in the grid. The data table is feature rich in this area in that the user can configure the resizing mode such that the resizing operation either happens immediately or is deferred until the drag is released.

Blazor Grid Column Sorting

Blazor sortable grid example
Blazor Grid Column Sorting

Looking for a Blazor sortable grid for your project? The Ignite UI for Blazor Data Grid component has the in-built ability to sort column data with the configuration of the sorting between Single, Multi, and Tri-State also being available. Sorting a particular column in the grid by default is done by clicking the column header, but you can also do this by using the column options dialog.

Blazor Grid Column Summaries

Icon of column summary functionality of the Blazor Data Grid
Blazor Grid Column Summaries

The user has the in-built ability to apply column summaries in the Blazor Data Grid component. These summaries have the ability to display the Sum, Minimum, Maximum, among others, of numeric data and can be configured to display in the footer or group headers of the grid.

Blazor Grid Column Types

Icon representation of column type features on the Blazor Data Grid
Blazor Grid Column Types

The Ignite UI for Blazor Data Grid allows the user to utilize a variety of data-type specific column types to most effectively display their data. If the data is a bit more complex, there is an additional Template Column, allowing the ability to define your own cell content for the display of a particular part of the grid’s data source.

Blazor Grid Column Animations

Animation of column animation functionality features on the Blazor Data Grid
Blazor Grid Column Animations

Column animations are available in the Blazor Data Grid component for different user actions such as column showing or hiding. Each of the user actions that can be animated has a dedicated animation property that can be set that will fire for the column header as well as all of the cells belonging to the column animated.

Blazor Grid Column Options Dialog

Icon of column options dialog features on the Blazor Data Grid
Blazor Grid Column Options Dialog

Each column in the Blazor Data Grid can be sorted, grouped, hidden, moved, and pinned from the same place – the column options dialog. Each of the column headers of the grid show a Kebab menu on mouse-hover that when clicked, will show this dialog.

Blazor Grid Column and Row Outlook Style Grouping

Animation of outlook style grouping features on the Blazor Data Grid
Blazor Grid Column and Row Outlook Style Grouping

The Blazor Data Grid component includes the ability to group columns, directly inspired by the way groupings are visualized in Microsoft Outlook. It is also possible to group multiple columns in the grid and display them with multiple group headers or combine them all into one.

Blazor Grid Row Pinning

Animation of data grid row pinning features on the Blazor Data Grid
Blazor Grid Row Pinning

The Ignite UI for Blazor Data Grid component has the in-built ability to pin rows to the top of the grid, rendering them just under the headers. These rows will vertically remain there until unpinned while the user vertically scrolls the grid.

Blazor Grid Keyboard Navigation

Animation of data grid keyboard navigation features on the Blazor Data Grid
Blazor Grid Keyboard Navigation

The Blazor Data Grid component allows users to enable keyboard navigation that behaves just like in Microsoft Excel. Accessibility and usability can be improved with navigation in mind by using the arrow keys as well as the tab and Enter keys on the user’s keyboard.

Blazor Grid Features


Download the Fastest Blazor Grid Today!

download now
30 days free trial. No credit card required.

Ignite UI for Blazor Supported Browsers

The Blazor Data Grid is supported on all modern web browsers, including:
  • Chrome
  • Edge / Edge Chromium
  • Firefox
  • Safari
  • Internet Explorer 11 with polyfills

Ignite UI for Blazor Support Options

There are multiple options to get access to our award-winning support at Infragistics for the Blazor product.

Ignite UI for Blazor Trial License and Commercial

Ignite UI for Blazor is a commercially licensed product available via a subscription model. You can try the Ignite UI for Blazor product for free when you register for a 30-day trial. When you are done with your Trial Period, you can purchase a license from our web site or by calling sales in your region.


Frequently Asked Questions

Why should I choose the Infragistics Ignite UI for Blazor Data Grid?
What is the Pricing for the Infragistics Ignite UI for Blazor Data Grid?
Ignite UI for Blazor is a commercially licensed product available via a subscription model. A single developer license starts at $749 USD for a one-year subscription, which includes one year of standard support and product updates. This subscription includes the Blazor Grid, plus Blazor Charts and dozens on other Blazor UI Controls.
We also offer discounts for multi-year licenses. Please refer to our Pricing page for more information on pricing.
If you are developing applications on multiple platforms, consider our complete app development package, Infragistics Ultimate, which include desktop platforms like WPF and Windows Forms, plus all modern web toolsets for Angular, React, Web Components, ASP.NET MVC and ASP.NET Core.
Can I purchase the Infragistics Ignite UI for Blazor Data Grid control separately?
No, you cannot purchase the Blazor Data Grid separately. It is part of a the Ignite UI for Blazor product, which includes dozens of UI controls and components, plus over 60 charts, including Blazor Financial Charting. If you are interested in other modern web platforms like Angular, React, ASP.NET MVC, Web Components or ASP.NET Blazor, check out our Ignite UI product bundle, which gives you every web platform for only $100 more on your subscription. That is hundreds of controls, components, and data visualizations for a very low price.
Can I purchase the Infragistics Ignite UI for Blazor Data Grid control separately?
To get started with the Blazor Data Grid, follow the steps in the getting started guide. We also maintain a library of sample applications, which are designed to not only inspire but are best practices guides for Blazor development.