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:
- Virtualized Rows and Columns so you can load millions of records
- Inline Editing with Cell, Row, and Batch Update options
- Excel-style Filtering and full Excel Keyboard Navigation capability
- Interactive Outlook-style Grouping
- Column Summaries based on any data in a grid cell or column
- Cell and Row Selection for Single and Multi-Select
- Full touch support for mobile app development
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Ignite UI for Blazor Supported Browsers
- Chrome
- Edge / Edge Chromium
- Firefox
- Safari
- Internet Explorer 11 with polyfills
Ignite UI for Blazor Support Options
- Start at the Blazor Support home page
- Read the Blazor Documentation and experiment with Blazor Samples
- Read the Blazor Blogs to stay up to date
- Submit a Support Case after signing into your account
- Learn from the Blazor Reference Applications
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
- Virtualized Rows and Columns so you can load millions of records
- Inline Editing with Cell, Row, and Batch Update options
- Excel-style Filtering and full Excel Keyboard Navigation capability
- Interactive Outlook-style Grouping
- Column Summaries based on any data in a grid cell or column
- Cell and Row Selection for Single and Multi-Select
- Full touch support for mobile app development