Ignite UI Logo for developer web applications

Web Components Table: Full-Featured, High-Performance Web Components Data Grid

The Ignite UI for Web Components Data Table / Data Grid allows you to quickly bind and display your data with little coding or configuration. We designed the Web Components Data Grid to meet the challenge of displaying large amounts of data with the interaction features your users expect.

React Framework logo

Web Components Data Grid Key Features

This example demonstrates key features of the data grid, including:

Real-Time Data with Live Streaming

Optimized for live, streaming data, and virtualized to handle unlimited rows or columns of data, the Web Components Table is the only choice for the most demanding data requirements.

Scrolling Ignite UI for Angular Data Grid component showing off its performance and data visualization capbilities

Web Components Data Grid Features

The Web Components Data Grid is fast, and can take care of any real-time, high-volume data needs, but it is really designed for delivering a highly productive, interactive experience to your users. In the next section, we will explore the key features of the Web Components Data Grid and give you a better idea of how it can help you deliver the next amazing experience to your users.

Ignite UI for Web-components Data Grid component displaying a single cell selection, multi cell and row selection

Cell and Row Selection

The Web Components Data Grid includes every option for mouse and touch driven selection by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.

Learn More

Ignite UI for Web Components Data Grid component displaying grid filtering

Grid Filtering

The Web Components Data Grid includes column filtering based on the data type of the column being filtered. For example, if your column is a DateTime field you can use filters like Last Month, This Quarter, Next Week, etc.

Learn More

Ignite UI for React Data Grid component displaying column moving

Column Moving

Rearranging column order is as easy as Click and Drag in the Web Components Data Grid. We’ve also included a complete animation engine, giving you control over the UX of this interaction.

Learn More

Ignite UI for Web Components Data Grid component displaying column pinning

Column Pinning

With Right and Left column pinning in the Web Components Data Grid, users can lock a single column or multiple columns in any order, so that the column maintains position, while scrolling horizontally.

Learn More

Data Grid component displaying column resizing

Column Resizing

The Web Components Data Grid supports the ability to resize columns, giving your customers flexibility over how they display the Data Grid columns, with respect to the other columns in the table.

Learn More

Ignite UI for Web Components Data Grid component displaying column sorting

Column Sorting

The Web Components Data Grid supports ascending and descending column sorting with a Single, Multi or Tri-State Column Sorting configuration. Sorting is triggered on header click or using the Column Options dropdown.

Learn More

Ignite UI for Web Components Data Grid component displaying column summaries

Column Summaries

The Web Components Data Grid supports column summaries in the footer area of the Data Grid, or in the Group Headers. This is great for showing values like Count, Sum, Min, Max, Avg, etc.

Learn More

Ignite UI for Web Components Data Grid component displaying column types

Column Types

The Web Components Data Grid supports a variety of column types, plus a Template Column type and a Sparkline Template type, giving you complete flexibility over the way your data is displayed in the Grid.

Learn More

Ignite UI for Web Components Data Grid component displaying column animations

Column Animations

The Web Components Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Web Components Data Grid is set, the corresponding animation will fire for all of the cells in that column.

Learn More

Ignite UI for Web-components Data Grid component displaying column options dialog

Column Options Dialog

The Web Components Data Grid supports the ability to group, hide, move, pin, filter, and sort columns directly from a UI exposed on each column header. The Column Options are on by default for every column, via the Kebab menu on column hover.

Learn More

Ignite UI for Web Components Data Grid component displaying Outlook style grouping

Outlook-Style Grouping Row / Column Grouping

The Web Components Data Grid lets you group rows into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.

Learn More

Ignite UI for Web Components Data Grid component displaying grid paging

Grid Paging

The Web Components Data Grid Paging component is designed to take in an array of data and output portions of that data as a page, with a simple navigation UI.

Learn More

Ignite UI for Web-components Data Grid component displaying row pinning

Row Pinning

The Web Components Data Grid allows you to pin rows to the top of the Data Grid. When a row is pinned, it will be duplicated at the top of the Data Grid and remain fixed there with a light gray background and its actual (or original) row in the Data Grid will be rendered with low opacity, making it clear to the user this is a special row.

Learn More

Ignite UI for Web Components Data Grid component displaying keyboard navigation

Keyboard Navigation

The Web Components Data Grid supports extensive Excel-like keyboard navigation. Ensure accessibility compliance and improve usability, enabling Excel-like keyboard navigation in the Web Components Data Grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection using the mouse or keyboard to select or de-select full rows.

Learn More

Ignite UI for Web Components Supported Browsers

The Web Components Data Grid is supported on all modern web browsers, including:

  • Chrome
  • Edge / Edge Chromium
  • Firefox
  • Safari
  • Internet Explorer 11 with polyfills

Ignite UI for Web Components Support Options

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

Ignite UI for Web Components Trial License and Commercial

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

Frequently Asked Questions

We have compiled the following section with frequently asked questions that will help you get started with the Web Components Data Grid and Ignite UI for Web Components.

Questions and Answers for Ignite UI for Web Components Data Grid

Why should I choose the Infragistics Ignite UI Web Components Data Grid?

What is the Pricing for the Infragistics Ignite UI Web Components Data Grid?

Ignite UI for Web Components 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 Web Components Grid, plus Web Components Charts and dozens on other Web Components 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, Web Components, ASP.NET MVC and ASP.NET Core.

Can I purchase the Infragistics Ignite UI Web Components Data Grid control separately?

No, you cannot purchase the Web Components Data Grid separately. It is part of a the Ignite UI for Web Components product, which includes dozens of UI controls and components, plus over 60 charts, including Web Components Financial Charting. If you are interested in other modern web platforms like Angular, 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 1 very low price.

How do I Install Web Components and the Infragistics Ignite UI Web Components Data Grid control?

To get started with the Web Components Data Grid, follow the steps in the getting started guide. If you need more inspiration, take a look at our reference applications, which are designed to not only inspire but are best practices guides for Web Components development.

Ignite UI Spaceman building rocket

UI Web Components to Ignite your Next Project

Choose the Plan that's Right for You!

The comprehensive, UI components library for React.

$0 per developer, royalty-free subscription

Multi-year discount

No multi-year discounts available.

The comprehensive UI components library for web, mobile, and desktop.

$0 per developer, royalty-free subscription

Multi-year discount

No multi-year discounts available.

Connect with Infragistics

Follow Us for the Latest News and Updates

Ignite UI rocket taking off