Kendo UI For Angular Data Grid And Angular Material: Have Your Cake And Eat It Too
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
This article has been kindly supported by our dear friends at Progress Telerik who are committed to giving developers the tools they need to harness and master the technological evolution shaping our society and the world. Thank you!
Designing and building data tables that handle large amounts of data requires a lot of consideration, planning, expertise, and time. The data tables have to be easy to read and navigate, allow users to search, filter, and group existing data as well as be able to load new data seamlessly. Some use cases may require that the data be editable within the table. While there exist tables like the Angular Material Table that can handle some basic tasks, the majority lack these crucial features. With the Kendo UI for Angular Data Grid, you can simplify the process of adding data tables with a material design feel to your application.
But what is Kendo UI? Kendo UI for Angular is a feature-rich component library that ships with more than 100 native Angular components. It covers everything from UX, performance, design, accessibility, globalization, and data handling. It offers three themes: standard, material, and bootstrap, and provides a theme builder if you wish to create a custom one.
Some of the components it ships with include data grids, charts, diagrams, schedulers, editors, date inputs, progress indicators, bar and QR code generators, upload inputs, gauges, and conversational UI, just to name a few. It’s built with quality and consistency in mind and strictly adheres to industry standards, making it ideal for enterprise applications. Its wide array of components can be applied to innumerable use cases. As such, you’ll find that you only need to rely on one library in your application. Since all the UI and UX design and implementation are already done, you don’t need to be an expert to use it. It saves you time during app development as its components only require minimal configuration to use.
The Data Grid is a comprehensive native table component that the Kendo UI for Angular library offers. Its UI is highly customizable, accessible, and automatically performs data filtering, sorting, and grouping. Besides that, it has first-rate features like in-table editing and CRUD operations, live reload, virtualization, and PDF and Excel exports. Rows and columns can be configured to be frozen, sticky, or selectable. Complex and hierarchical data can be adequately visualized using its detail template feature, multi-column headers, or even tree views. These are just a few of the things you can do with the Data Grid.
The Data Grid can be applied to a multitude of use cases. It can be used for simpler data tables, for KPI dashboards, in CRMs or POS systems. It can also be used for financial reporting or in inventory systems. The Data Grid makes visualizing, reading, and working with detailed complex data easier. It streamlines in-table data modification. Most importantly, it makes fetching and interacting with large amounts of data a whole lot simpler.
Angular Material is one of the most popular component libraries used in a majority of Angular applications. Its popularity is due to its clean material design, high-quality features, versatility, and ease of use with Angular. While it does offer a table, it lacks some crucial data handling features. In this article, we shall examine some of the features of the Kendo UI for Angular Data Grid in comparison to those offered by the Angular Material Table.
Kendo UI For Angular Data Grid vs. Angular Material Table
1. Pagination
The Data Grid handles pagination automatically only with minimal configuration. Its kendoGridBinding data binding directive specifically handles paging in the grid. The only thing you need to do to enable it is to set its pageable option to true and set the size of the page with the pageSize option. The Data Grid will then automatically have a paginator added to it. If you’d like to customize your paginator further, the Data Grid allows you to use Pager Templates that you can use with pre-built pager building blocks or with other Kendo UI for Angular components. For example, the PagerInfoComponent allows you to add information about the current page to the paginator.
In Angular Material, you have to explicitly add the mat-paginator component after a table. You then have to implement the pagination logic by listening for the paginator’s page event. Alternatively, you could specify the paginator as a paginator for the table’s MatTableDataSource. Adding a paginator to an Angular Material Table would involve a lot more work.
Pagination in Angular Material is a lot more involved because you not only have to add it to the table explicitly, but you also have to implement pagination logic. Comparatively, pagination in the Kendo UI for Angular Data Grid can be achieved in just a few simple steps.
2. Sorting, Filtering, And Grouping
Similar to pagination, the kendoGridBinding data binding directive handles sorting automatically. All you have to do is set its sortable option to true to enable it. Sorting functionality is then applied to each of the columns on the data grid. To achieve sorting in an Angular Material Table, you’d have to add the matSort directive to the table component. Then for each column, you wish to sort, you’d have to add the mat-sort-header directive to each column header cell. Lastly, you’d have to implement sorting logic or provide the MatSort directive to the table’s MatTableDataSource if it has one.
The kendoGridBinding directive also performs filtering automatically when added to a Data Grid with the filterable option set to true. The directive adds filter input fields to each column and allows you to filter text, dates, numbers, and boolean values. You can also set ranges and make comparisons on the data. The filters are customizable and can be extended. If you wish, you can customize the filter to be presented as menus or pop-ups. The directive can handle local and server-side filtering. In Angular Material, you would have to manually add an input field to your table to capture filter terms. You would then have to use the filterPredicate function of MatTableDataSource to enable filtering.
In addition to sorting and filtering, the kendoGridBinding directive enables the grouping of data within the data grid. It allows you to group either local or server-side data using single or multiple fields. The grouping is achieved by dragging and dropping column headers to a group panel. The grouped data is presented in data rows that are expendable, collapsible, dismissible, and sortable. You can also apply group aggregates to them and customize them using built-in group templates. To enable grouping, all you have to do is set the groupable option of the directive to true. The Angular Material table offers no grouping functionality. You would have to implement this complicated functionality from scratch.
3. Editing
To enable editing on the Data Grid, you’d use the kendoGridReactiveEditing and kendoGridTemplateEditing directives. These directives enable you to perform CRUD operations within the grid. Editing can be performed on a per-row or per-cell basis. Each of the directives requires that you provide a callback function that returns a form group as its value. kendoGridReactiveEditing works with reactive forms while kendoGridTemplateEditing works with template-driven forms. The data grid will then automatically handle CRUD operations.
Edits are usually in-line or in-cell but can be configured to be performed within pop-ups. Additionally, you can set up deletion confirmation pop-ups and configure custom input controls and validation on the edited data. Editing controls are not limited to text boxes, as you can also use date pickers, numeric text boxes, and checkboxes while editing within the grid.
The Angular Material Table makes no provisions for in-table editing. So, you would have to implement editing for the table data, which can get complicated.
4. Column Configuration
The Data Grid allows you to configure columns in different ways. For one, you can hide columns by enabling a hide option on it. You can also lock columns when a user scrolls through the Data Grid to keep the column visible all the time. You’d do this using the locked option on the column. Moreover, the Data Grid supports sticky columns that are similar to locked columns but can be placed on either side of the viewport. You’d enable sticky columns with the sticky option.
With the Data Grid, cells can span multiple columns with spanned columns. Spanned columns are added using the kendo-grid-span-column element. Additionally, you may choose to customize how column headers, footers, and cells look using column templates made available through various directives. You also have the option to group multiple columns under one column header with multi-column headers. Moreover, the Data Grid facilitates column resizing and reordering.
On the other hand, the Angular Material Table only supports one column configuration feature — sticky columns. This is achieved using the sticky or stickyEnd directives.
5. Row Configuration
When it comes to rows, the Data Grid supports row and cell selection. It facilitates single-row and multiple-row, checkboxes-only, and select-all selection. Additionally, you can select single or multiple cells. Rows can also be configured to be sticky using the rowSticky callback option. If you are working with detailed or complex data, you can take advantage of the Detail Row Template feature to properly visualize the data by embedding custom components. This feature is especially helpful for hierarchically ordered data.
The Angular Material Table does not have formal support for a row or cell selection, and embedding custom components within the table can be difficult. Although sticky rows can be achieved on the table through CSS styling.
6. Virtualization
Through the Data Grid’s column virtualization and virtual scrolling feature, you can choose only to render columns and rows that are in the viewport respectively. For column virtualization, you only have to set the virtualColumns property to true on the grid to enable it. For virtual rows, set the scrollable option to virtual. Unfortunately, the Angular Material Table has no support for virtualization.
7. Globalization
The Data Grid offers support for the loading of multiple locale data sets through the Kendo UI for Angular Internationalization package. This package also ships with an Intl Service that exposes formatting and parsing methods for dates and numbers. The package provides Intl Pipes for transforming locale values. Moreover, the grid offers Right-to-Left language support. With this package, you can easily load different locales at runtime within the grid.
When it comes to internationalization in Angular Material, only mat-pagination offers support. The Angular Material Table offers no explicit support for it.
8. PDF And Excel Exports
Exporting grid data to Excel or PDF is possible using the data grid. To enable it, you’d just have to add a kendo-grid-pdf or kendo-grid-excel component to the grid and bind their respective export methods to download buttons. With the PDF export component, you can configure page size, change column sizes, use templates, combine multiple grids in one PDF file, set up external export with triggers, and use custom fonts, among other handy features. Using the Excel export component, you can choose specific data or columns to export, customize columns and workbooks, set up external export with triggers, and export asynchronous data. The Angular Material Table has no support for either Excel or PDF exports.
9. Accessibility
The data grid meets two accessibility standards: WAI-ARIA and Section 508. It strictly follows best practices and requirements laid out in WAI-ARIA and Section 508 to ensure that it is keyboard navigable and works well with screen readers. While all Angular Material Tables automatically are assigned the role= “table” attribute, it’s not stated whether they meet any accessibility guidelines or standards.
How Kendo UI for Angular Data Grid Makes Developing Data-Heavy Tables Simpler
The numerous features that the Data Grid ships with make it flexible enough to fit a wide range of use cases, from simpler data tables to more complex data grid applications. The components it’s bundled with can be combined with it to meet more niche user needs. The Data Grid is available in multiple themes, including a material one, so it would fit well in an app that already uses Angular Material.
While the Data Grid can be immediately used with minimal modification, it still offers a wide range of configuration options if you choose to use them. The Kendo UI for Angular library has a well-documented API, and its site has an assortment of guides, tutorials, and support documents. Demos and sample applications are also available. The Kendo UI community offers support in their forums, Github repositories, and on Stack Overflow. So its learning curve is gentle.
By using the Data Grid, you free up crucial engineering time as it requires minimal modification and can pretty much be used out of the box. This leaves engineers more time to focus on solving more important problems crucial to reaching main business goals. In the long run, using the Data Grid is more cost-effective as engineering time and expertise that would go into building a data grid UI from scratch are saved. The Kendo UI for Angular ships with 100+ components that you could use in your application in addition to the Data Grid.
Conclusion
The Kendo UI for Angular Data Grid is a comprehensive table component that can seamlessly visualize large amounts of data. It automatically handles pagination, sorting, filtering, and grouping. Moreover, its rows and columns are highly customizable and can be virtualized and globalized. It meets multiple accessibility standards and offers both PDF and Excel data exports. If you’re migrating from using the Angular Material Table, the Data Grid offers a compatible material theme. To learn more about the Data Grid, check out its documentation on the Kendo UI for Angular site.
(yk, il)