Kendo UI for Angular

Angular Data Grid (Table) Component

Get enterprise performance, features, and accessibility – and enjoy implementing it!

  • Best-in-class Angular data grid built for performance with must-have features such as paging, sorting, filtering, grouping and many more.
  • Built natively for Angular to take full advantage of framework performance and features.
  • Part of the 100+ component Kendo UI for Angular library.
kendo-ui-angular-header
logos_customers-2x

Everything You Need in a Grid

100+ features, performance, theming, accessibility, and everything your users expect. Each feature is meticulously documented and easy to implement. Below are just some of the most popular features. 

  • Super Customizable

    Our grid gives you ultimate flexibility whether it is applying themes, using row templates, applying conditional formatting, embedding other components, and just about anything you can think of. The best part is that is just takes a few lines of code.

    Learn More

  • Page, Sort, Filter, Group

    Let users slice and dice their data by providing the UI to do paging, single or multi-column sorting, filtering, or grouping, all through quick configuration options.

    Learn More

  • CRUD

    Choose from various ways to enable CRUD operations such as row by row, individual cells, or external form. The Angular Grid can then work with any Angular service layer to persist changes back to a database.

    Learn More

  • Column Interactions

    Users can toggle between showing or hiding columns, resize and reorder columns, drag columns to be grouped, and more. These options can be applied across all columns or defined on a column-by-column basis.

    Learn More

  • Virtualization

    Enable both row virtualization and column virtualization. Users maintain a buttery smooth scrolling experience in both horizontal and vertical scrolling even when data sets are very large.

    Learn More

  • PDF and Excel Export

    The content of the grid can be exported to either an Excel file or a PDF file with a single button click. A large set of configuration options to ensure any exported file fulfills all requirements.

    Learn More

  • Accessibility

    Accessibility is important but can be tedious. We have it covered. Our Angular Grid is AAA rated with WCAG 2.0 and is compliant with Section 508 and WAI-ARIA standards.

    Learn More

More Angular Data Grid Features

Performance

Data Binding

Data Operations

Complex Data Tables

Export

Key features
Performance

Server-side Operations

Perform paging, sorting, filtering, and editing on the server and let the Angular Data Grid consume the results. You can choose to perform these operations on the client as well. It’s completely up to you!
server_communication
Performance

Paging

Paging is the most popular method developers use to optimize loading times. With paging implemented, the Grid will only load the number of rows that you specify for a particular page. The Kendo UI for Angular pager is configurable, responsive, accessible, and themable, so implementing it is a breeze.
See the Angular Grid Paging demo
angular-grid-paging
Performance

Virtual Scrolling (Row and Column)

 Virtual scrolling is essentially an alternative method of paging. Rather than have a numbered control used to navigate subsets, each subsequent data subset (or page) is loaded as a user scrolls to the end of the current view. Virtual scrolling can be enabled both for vertical row scrolling and horizontal column scrolling. 
See Angular Grid Virtualization demo.
angular-grid-component---sticky-columns
Performance

Live Loading Support

 In many cases, especially in fintech, instant data updates are important. Users want to see data as soon as it changes without needing to explicitly refresh their view. Kendo UI for Angular’s native Grid takes advantage of the Angular framework’s ability to partially update the DOM and can update single cells without retendering the entire view.
liveloading
Data Binding

Loading Indicator

The Kendo UI for Angular Data Grid includes a built-in indicator that displays when data operations are in progress. Any time data is loading, the user will see a spinning icon. Custom indicators are supported in cases where you need to implement your own.
See the Angular Data Grid Data Binding demo
loading-indicator
Data Operations

Editing

There are various ways user can edit data items in the Kendo UI for Angular Grid. They can edit row by row through a dedicated edit button, edit individual cells by clicking on them or use an external form to edit the currently selected item. The Angular Grid can then work with any Angular service layer to persist changes back to a database. 
See the Angular Data Grid Editing demo
editing
Data Operations

Filtering

With the out-of-the-box filtering feature of the Kendo UI for Angular Grid, users can quickly slice and dice the data bound to the Angular Data Table with ease. Filtering can be done through a dedicated filter row, which displays a dedicated row just for filters, or through a filter menu that pops up when clicking on a filter icon in the header of a column. The Angular Data Grid can also be extended to provide a custom component to handle filtering, allowing you to have full control over the user experience. 
See Angular Grid Filtering demos
angular-grid-filter-rows
Data Operations

Sorting

Enable users to sort data items in the Angular Data Table in an ascending or descending order with the Kendo UI for Agular sorting function. Users can click on the column header to cycle through sorting in an ascending, descending or no sort order. You can also allow users to sort a single or multiple columns or disable sorting on a column-by-column basis. Developers can also render the Angular Data Grid with pre-sorted data, defining which columns to sort and in which order ahead of time. 
See Angular Grid Sorting demo
angular-grid-sorting
Data Operations

Grouping and Aggregates

Users can drag and drop columns in the Kendo UI for Angular Grid to group them by field. This is not limited to a single column and there is no limit to the number of groups and subgroups that can be defined. When grouped, each group can be expanded or collapsed by users clicking on the appropriate expand/collapse icons. Each group can also provide aggregate information in both a header and a footer area and each group can be sorted in an ascending or descending order. 
See Angular Grid Grouping and Aggregates demo
angular-grid-grouping
Data Operations

Column Interactions

The Kendo UI for Angular Grid provides built-in functionality for various column interactions. Users can toggle between showing or hiding columns, resize and reorder columns, drag columns to be grouped and more. These options can be applied across all columns or defined on a column-by-column basis.
See Angular Grid Column Interactions demos
angular-grid-reordering
Data Operations

Frozen Columns

The Kendo UI for Angular Grid allows for frozen columns (also known as locked columns) to be configured upon initial rendering or on –the fly. Columns can be added to the left-hand side or right-hand side of the Angular Data Table.
See Angular Grid Frozen Columns demo
angular-grid-frozen-columns
Data Operations

Sticky Columns/Rows

In just a few steps, you can designate one or more columns or rows to always be visible (or stick) to the right or left side or the top or bottom of your grid while the user scrolls. This is a great way to ensure that the most important information is visible when you have limited space.
See the Angular Grid sticky columns and sticky rows demos.
angular-grid-component---sticky-columns
Data Operations

Selection

The Kendo UI for Angular Grid features selection in multiple forms, including single row and multi-row selection. You can enable users to select an individual row through clicking on it, select multiple rows by CTRL-clicking on them or through a column of dedicated checkboxes.
See Angular Grid Selection demos
angular-grid-selection
Complex Data Tables

Master-Detail Tables

With the built-in Hierarchy feature, the Kendo UI for Angular Grid can showcase multiple Angular Data Tables in a master-detail, also called parent-child, relationship. The hierarchy allows for each Angular Data Table to have its own unique set of features enabled (like sorting, paging, filtering, etc.) based on the data it should display. With no limit for now deep the hierarchy can go, the Angular Data Grid is perfect for displaying any type of related data tables.
See Angular Grid Hierarchy demo
angular-grid-hierarchy
Complex Data Tables

Tree View

Many competing data grid libraries have a Tree View mode for displaying hierarchical data, but Kendo UI for Angular includes a dedicated component for this. The TreeView component uses the same performance, data binding flexibility, and customizability found in the Data Grid, but delivers features specific to a Tree View scenario. It is included with Kendo UI, so you get the best of both worlds!
Read about the Angular TreeView component
angular-treeview-overview
Export

Export to Excel and PDF

The React Grid features integration with the Excel and PDF Export libraries in the KendoReact library. This integration allows for all content found within the Data Grid to be exported to either Excel or PDF with a single click. With a large set of configuration options available, developers can decide if only the current data set displayed should be exported or if the entire data set should be included in the export, and every exported file can be customized on-the-fly.
See Angular Grid Export to Excel and PDF demos
Kendo UI for Angular Excel Export - UI Component Integration
Performance

No Records Template

The Data Grid will display a message when there is no data to display but many developers would like to customize their own. In this case, they can easily do so using the familiar “ng-template”.

See the Angular Grid No Records Template demo

Kendo_Grid_No_Items_Template
inverted-top-curve-blue

Why Developers Love Using the Kendo UI for Angular Data Grid

  • TypeScript for Maintenance and Scalability
  • Blazing Performance
  • Full Accessibility
  • Documentation and Demos
  • Responsive Design
  • Localization and Globalization
  • Customize Everything
  • Themes and Design Systems
  • Integrate with Other Components in Kendo UI for Angular
kendo-illustration
trust-radius-badge

Telerik and Kendo UI Earns Multiple TrustRadius Best of Development 2021 awards

Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.

trust-radius-badge

Kendo UI Earned TrustRadius' Top Rated 2021 award

Progress Kendo UI has earned TrustRadius’ Top Rated Award for Software Components.

The Kendo UI Advantage

We are heavily invested in making sure your experience with the Angular grid is as successful and enjoyable as it can be. We are constantly publishing resources, refining our docs and demos, and even streaming on Twitch. Here is some of our most popular resources.

Frequently Asked Questions

  • What Makes the Kendo UI for Angular Data Grid Better?
  • What are some common use cases for the Kendo UI for Angular Data Grid?
  • Can I try the Kendo UI for Angular Data Grid?