Angular Grid Overview

Updated on May 7, 2026

The Kendo UI for Angular Data Grid includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, exporting to PDF and Excel, and accessibility support.

Jumpstart Your Grid

With the Agentic UI Generator, you can build components and layouts using natural language prompts — directly inside AI-powered IDEs like VS Code and Cursor. Get intelligent assistance with component implementation, styling, layout design, and iconography powered by our documentation and APIs.

Try the Agentic UI Generator

The Grid is built from the ground up and specifically for Angular, so that you get a high-performance control which delivers lightning-fast performance, integrates tightly with your application and with the rest of the Kendo UI for Angular components, and is highly customizable.

Angular Grid Example

Change Theme

Theme

Loading ...

Getting Started with the Kendo UI for Angular Data Grid

To get started with the Kendo UI for Angular Data Grid, you can follow the steps in the following comprehensive article: Getting Started with the Kendo UI for Angular Grid.

You can accelerate your Grid journey with the Kendo UI for Angular Agentic UI Generator and the Component Assistant prompts.

Angular Grid Key Features

The Kendo UI for Angular Grid component delivers a range of handy and developer-friendly features whose number and further development are not limited by the list in this section. The Kendo UI for Angular team constantly invests efforts to improve the performance and add more value to the existing Grid library as well as develop new features to it.

Data Binding

The Grid features built-in and custom data-binding directives, which encapsulate the logic for handling data operations such as sorting and filtering out-of-the-box. The Angular Data Grid also allows you to add a loading indicator as well as perform CRUD operations with Firebase, and bind and edit data with Progress JSDO. Read more about the data binding functionality of the Grid...

Editing

Depending on your users' requirements, you can opt for the inline or the in-cell edit modes, provide editing from an external form or Redux Form, and also further customize the Grid. Read more about the editing feature of the Data Grid...

Paging

The Angular Grid enables you to split its content into pages by adding a pager and using its extensive set of configuration options such as implementing a responsive behavior, customizing its appearance, defining the space between its elements, and more. Read more about the pager options of the Grid...

Sorting

The Grid supports a number of sorting options including sorting and unsorting single and multiple columns, pre-sorting its data records, setting the sorting direction, and more. Read more about the sorting options of the Grid...

Filtering

The Grid provides options for displaying only those data records which meet specified criteria and also for additionally customizing its filtering behavior by using its built-in filter templates or reusable custom filter components. Read more about filtering the Grid records...

Grouping

The Grid provides dynamic grouping of data records including aggregate values, group templates, sticky group headers and footers, and the option to pre-group data. Read more about grouping the records of the Grid...

Smart Grid Features

The Angular Grid provides AI-powered features that enhance user experience through natural language interactions and intelligent data operations:

SmartBox Tool—Versatile search box that combines traditional search, semantic search, and AI Assistant capabilities in one unified interface. Users can switch between search modes and perform Grid operations through natural language prompts.
AI Toolbar Assistant—Enables users to perform complex data operations like sorting, filtering, and grouping using natural language prompts. The AI Assistant interprets user requests and automatically applies the corresponding Grid operations.
AI Chat Assistant—Integrates the Chat component with the Grid to create a conversational interface where users can manage Grid data through natural language commands in a chat-style dialog.
AI Column Assistant—Provides personalized insights and analysis for individual Grid rows through an interactive AI-powered column that allows users to ask questions about specific data records and receive contextual responses.
AI-Powered Row Highlighting—Enables users to visually identify specific data patterns and outliers using natural language prompts without applying traditional filters that hide data.

These smart features integrate seamlessly with your custom AI service to provide an intuitive and accessible way to interact with the Grid data without requiring knowledge of specific UI controls.

Export to PDF, Excel, and CSV

When implementing the Angular Grid export to PDF, you can set the fonts, the exact portion and layout of the exported content, also customize the columns and other elements of the output result. When exporting to Excel, you can export specific data and customize the exported columns. When exporting to CSV, you can configure delimiters, line separators, encoding options, and control which data to export. Read more on exporting the Grid to PDF, exporting the Grid to Excel, and exporting the Grid to CSV.

Rows Options

The Data Grid provides a full-scale set of row configuration options such as setting its row selection feature through checkboxes and applying row selection to single or multiple rows.

Also, you may need to implement the sticky row feature, which means that you can stick and always display some of the Grid rows even when the user scrolls the table.

Additionally, you can render supplementary information about the data in a specific row it by utilizing the detail row template, and to persist the expanded state of that row too.

The Data Grid provides an extensive collection of row configuration options, including:

Row selection—Allows you to select rows through interaction with the row itself or a checkbox. Supports single and multiple row selection.
Sticky rows—Allows you to display specific rows at all times even when user scrolls the data table.
Detail row template—Allows you to render supplementary information about the data in a specific row. Supports persisting the expanded state of the detail row.
Row reordering—Allows you to reorder rows by dragging and dropping them.
Row spanning—Allows you to span the Grid cells over multiple rows.
Row pinning—Allows you to pin rows to the top or bottom of the Grid so they remain visible while scrolling.
Row styling—Allows you to style the rows of the Grid using a callback function.
AI-powered row highlighting—Allows you to highlight rows using natural language prompts through the AI Assistant Toolbar Tool.

Columns Options

The Data Grid provides an extensive collection of column configuration options, including:

Hiding columns—Allows you to show or hide columns.
Spanning columns—Spanning of the row content over multiple cells of data.
Setting multi-column headers—Grouping columns under a common header.
Column menu for quick actions—You can show or hide columns, filter, sort, and group them.
Locking (freezing) columns or sticking columns—Allows you to display specific column data at all times.
Reordering columns—You can reorder any column and with any available Grid feature, including locked columns.
Resizing columns—Allows you to resize columns in real-time by dragging the edges of the column headers.
Styling columns—Allows you to style the columns of the Grid using a callback function.
AI Column Assistant—Allows you to add an AI-powered column that provides personalized insights and analysis for individual Grid rows through natural language interactions.

Virtualization

The Data Grid supports a virtual scroll mode for its row data, which means that the component dynamically renders only a portion of the rows. This virtualization approach boosts the performance of the component when it has to display large data tables. Read more about the virtualization feature of the Grid...

Sizing

The Grid provides predefined options which allow you to set the different padding to the Grid building blocks. For more information, refer to the sizing options of the Grid.

Resizing

Users can customize the Grid and improve its usability by resizing it to suit their preferences. While the Grid has a fixed size by default, you can enable resizing for greater flexibility. Read more about the resizing feature of the Grid...

Styling

Our components are designed to look great out of the box, but we understand that every application is different. That's why the Progress Design System Kit provides resources to help you customize the look and feel of your Kendo UI for Angular Data Grid component. If time is of the essence, our ThemeBuilder application can help you quickly and seamlessly modify the component's appearance.

Chart Integration

The Grid provides built-in options to quickly generate charts and visually represent trends, patterns, and more. Read more about the Grid Chart integration

Globalization

The Kendo UI for Angular Data Grid supports globalization to ensure that it can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Grid supports rendering in a right-to-left (RTL) direction. Read more about the globalization of the Grid...

Accessibility

The Data Grid is WCAG 2.2 AA and Section 508 compliant, incorporating WAI-ARIA best practices for modern web accessibility. The Grid is also tested against the popular screen readers, including JAWS and NVDA. Read more about the accessibility of the Grid...

The Data Grid supports a number of keyboard shortcuts which allow users to accomplish various commands. Read more about the keyboard navigation of the Grid...

Trial Version of Kendo UI for Angular

The Kendo UI for Angular Grid is part of the Kendo UI for Angular library. Kendo UI for Angular offers a 30-day trial with a full-featured version of the library—no restrictions! What’s more, you are eligible for full technical support during your trial period in case you have any questions. Sign up for a free 30-day trial of Kendo UI for Angular.

Frequently Asked Questions

What is Angular Data Grid?

The Kendo UI for Angular Data Grid Table is a high-performance, native Angular component designed to display tabular data. It provides features like data binding, editing, sorting, filtering, grouping, paging, row reordering, and exporting to PDF and Excel. Built with accessibility in mind, the Data Grid ensures all users can interact effectively.

How to Create a Grid Table in Angular?

To create an Angular Grid view in Angular, you need to install the Kendo UI for Angular Grid package and then import the GridModule in your application. After that, you can use the kendo-grid component in your Angular application. For more information, refer to the Getting Started with the Kendo UI for Angular Grid article.

Which Grid is Best for Angular?

The Kendo UI for Angular Data Grid is a strong contender for your Angular project. Built specifically for Angular, it delivers exceptional performance, accessibility, seamless integration with other Kendo UI components, and extensive customization options. This combination makes it a highly attractive choice for complex data visualization needs.

Support Options

For any questions about the use of the Kendo UI for Angular Grid, or any of our other components, there are several support options available:

Kendo UI license holders and anyone in an active trial can take advantage of the Kendo UI for Angular outstanding customer support delivered by the actual developers who built the library. To submit a support ticket, use the Kendo UI support system.
Kendo UI for Angular forums are part of the free support you can get from the community and from the Kendo UI team on all kinds of general issues.
Kendo UI for Angular feedback portal and Kendo UI for Angular roadmap provide information on the features in discussion and also the planned ones for release.
Kendo UI for Angular uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
Of course, the Kendo UI for Angular team is active on StackOverflow as well and you can find a wealth of questions and answers there.
Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.