The Definitive Guide to Angular DataGrids

DataGrids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible as quickly as possible. DataGrids are more useful than ever now that they can run in powerful JavaScript frameworks like Angular.

Angular is a ubiquitous framework for building modern web applications. It offers a complete set of features for enterprise developers to use, similar to what was formerly built in .NET or Java systems. Those same applications can now be built for the web and run on any device with a browser.

One thing not included in Angular itself is an Angular DataGrid, but there are open-source and third-party options to choose from. An Angular DataGrid is a custom Angular component similar to traditional DataGrids but can be used in Angular, including markup, binding, and rendering using the Angular framework.

Why DataGrids?

Even if you’re not a developer, you’re probably familiar with the paradigm of a DataGrid. Grouping and sorting data isn’t merely for the meticulous; it’s human nature. DataGrids appeal to the instinct that drives us to organize, take in, and understand as much data as possible as efficiently as possible.

The usefulness and universality of DataGrids have allowed them to permeate throughout time, but not without some amount of evolution. With the advent of screens in the digital age, the DataGrid has changed more than ever before.

Now, grids are more useful than ever, not only for displaying data but also for editing it. Could you imagine creating a sales report or monthly budget using Microsoft Word? Microsoft Excel would be the natural choice for most users with automatic conveniences, such as sorting, filtering, and autocomplete, in addition to advanced features like custom formulas.

Beyond the helpful and time-saving features, most users would naturally choose Excel because it’s what they first experienced when it came to DataGrids on a computer. Excel is familiar. Any good UX designer or business analyst will tell you that educating users is difficult and expensive. Because of this, one of the most significant advantages of DataGrids, in general, is that they are intuitive.

Although Excel has become the most common example of software that uses a DataGrid, the paradigm has increased throughout the software world. As web apps continue to replace the traditional native applications that we’re used to, it only makes sense that DataGrids would also make their way to web app UIs.

At Mescius, we’ve found that industries across the board are including DataGrid UI components in new web app projects.

Whether you’re building an app to track manufacturing stats, analyze financial data, or create sales reports, chances are you’ve already considered the intuitiveness a DataGrid would add. As we’ll see, Wijmo’s Angular DataGrid can maximize your returns by providing the best DataGrid UX with the best performance available.

Angular DataGrid components like FlexGrid provide natural, intuitive interfaces between humans and data.

Tables vs. DataGrids

If you aren’t using a DataGrid, then you are likely using an HTML table element in your application to display lists of data. HTML tables are an excellent tool for basic data display, but they quickly fall short when your end users expect Excel-like features in your app.

Even relatively simple features, like dynamic sorting and filtering, are not built into HTML tables. The list of DataGrid features that tables do not include is too long to mention.

You might think HTML tables feature better performance than DataGrids, but that is only true in specific scenarios. Tables can outperform DataGrids when there are limited numbers of rows and columns. The simple reason is that HTML tables require DOM to be rendered for all columns, rows, and cells. DataGrids, on the other hand, can virtualize rendering so that only visible cells are rendered and recycled as the view changes. So, when working with large volumes of data, DataGrids outperform tables by far.

When choosing between tables and DataGrids, it comes down to two key factors. If the answer to either or both of these is “yes,” then you need a DataGrid:

1. Do your users want to interact (organize, analyze, edit, etc.) with your data in a way that is similar to Excel?
2. Do you need to bind to thousands of records?

Again, if the answer to either of these is “yes,” then a DataGrid is the right choice for you. If not, then a simple HTML table should suffice.

The Top Features of an Angular DataGrid

An Angular DataGrid provides various functionalities to the applications that contain them. The primary uses include displaying, editing, and analyzing data. Let’s look at the top features for each use case and how we define them in a DataGrid API.

Top Displaying Features

The Angular DataGrid display features help users read and understand the data more quickly and efficiently. Developers can improve how the raw data is presented to the user by making it more readable with cell formatting, merging, and column bands. Users can make the data easier to view with features like column reordering, resizing, and scrolling.

Angular FlexGrid with collapsible row details:

A more complete list of top display features include:

• Cell formatting — Format numbers and dates such as rounding numbers, displaying percentages, and displaying dates as month names.
• Cell merging — Adjacent cells containing the same values are merged into one larger cell automatically by the application or manually by the user.
• Custom cell rendering — This allows the developer to put custom UI elements within a DataGrid cell, such as buttons, images, or virtually anything that can be rendered in Angular. This is sometimes referred to as a Cell Template.
• Column bands — This is a visual grouping of related columns, such as grouping Street, City, and Postal Code under an “Address” band.
• Column reordering and resizing — At runtime, users can change the order and size of columns to suit their needs.
• Scrolling — Scrolling is essential to reach additional data rows and columns that don’t fit on the screen.
• Collapsible row details — Display less important information about a record within a collapsible panel on each row.
• Frozen columns and rows — This affixes any number of rows and columns to prevent them from scrolling out of view.
• Right-to-Left — This feature flips the columns and text to read from right to left, which is critical for some cultures.
• Themes and styles — This provides more than one look and feel to deliver modern-designed or company-branded UIs. A rich UI control provides extensive style customization.

Top Editing Features

The Angular DataGrid editing features enable users to insert, update, and even delete data at the underlying source. While extra code is typically required to complete the connection and pass updates to the data source, the DataGrid control is responsible for accepting the user’s input in the most efficient and intuitive way possible.

Angular FlexGrid with input validation errors:

For example, when you need to make your data editable by a user, you can build an Angular application containing a DataGrid. Users can navigate the DataGrid cell by cell and insert or edit the values. Additional editing features include adding new rows, input validation, clipboard support, importing data from external files, and even specialized cell editors such as calendars for dates, checkboxes for Boolean values, etc. A more complete list of top editing features includes:

• Cell navigation and editing by keyboard — This feature allows the user to navigate and edit cells through the keyboard. We often follow the behavior of Microsoft Excel by using a combination of the tab, arrow, control, and enter keys to perform all editing operations.
• Read-only cells and columns — This allows the developer to make any column or cell non-editable.
• Input masking and validation — This prevents the user from entering invalid information, such as poorly formatted emails, IDs, phone numbers, locations, and date ranges.
• Select cells — This feature allows the user to select or highlight any number of rows or individual cells. Cell selection is often used for additional drill-down or export, so the developer may restrict the selection based on the application requirements.
• Add new rows — This feature allows the user to add new records to the data source through the DataGrid itself. While many UI designers choose a separate input form for this operation, it’s helpful also to have this feature in the DataGrid for quicker solutions.
• Delete rows — This feature allows the user to delete records from the data source through the DataGrid itself. It can be supported with the delete key or a button embedded in a cell.
• Custom cell editors — The developer can specify a specialized editor for specific columns and data types. For example, editing colors is best implemented with a color picker rather than a textbox.
• Clipboard support — Users can edit the DataGrid using their keyboard’s cut, copy, and paste commands.
• Importing data — Import tabular data from common sources like Microsoft Excel, CSV, JSON, and XML.

Top Analyzing Features

While displaying and editing data are the most common use cases, the true potential of an Angular DataGrid lies in its analytical features. DataGrids make great analysis tools — especially for creating “live” reports — and are often included in dashboards.

Angular FlexGrid control with tree-grid subtotals:

Advanced Angular DataGrids typically include analytical features like sorting, grouping, and filtering. These actions allow the user to drill-down, slice, and aggregate the entire data set to discover trends and insights on the data set. For example, sorting and grouping allow the user to organize the data meaningfully to find the highest or lowest records. Filtering is an essential feature that lets the user search and find specific records. A more complete list of top analyzing features includes:

• Sorting by column — This feature allows the user to sort the entire DataGrid by a single column’s values in ascending or descending order. It is typically performed by clicking the column header and displaying an up or down arrow.
• Sorting by multiple columns — This feature allows the user to sort across multiple columns at the same time. It is typically performed by clicking the column header while simultaneously pressing a key.
• Grouping by column — This feature allows the developer to group the data within the DataGrid by a single column, which organizes the data similarly to sorting but with added header rows to separate each group.
• Drag-and-drop grouping — This allows the user to perform grouping at runtime by dragging any number of column headers into a grouping panel or by grouping through a menu.
• Excel-like filtering — This provides filters within each column header to enable conditional and value-based filters for the user.
• Filter row — This provides a filter input box for each column in a fixed row at the top or bottom of the DataGrid.
• Full-text filtering (search box) — This provides filtering functionality to the DataGrid from an external text box. It is commonly referred to as “searching” as it feels like a Google search box for your DataGrid.
• Subtotals and aggregates — When a DataGrid is grouped, it may optionally display aggregated subtotals for each group. The aggregated values are typically displayed in the group header row. Totals may also be calculated for the entire data set and displayed at the bottom footer of the DataGrid.
• Conditional formatting — This applies special formatting to cells based on their value. A common example is shading cells with different colors based on various thresholds.
• Custom calculations — With custom columns, you can provide additional calculations that may not be present in the raw data. For example, if your data set includes column fields for “Price” and “Discount,” the DataGrid could display a custom column with a calculation of Price*Discount.

How to Build an Angular DataGrid

Follow these steps to get started using a third-party Angular DataGrid such as the Wijmo FlexGrid component.

To start, we will assume you have an existing Angular app. You can create one easily by using the Angular CLI.

Step 1: Install Packages from npm

In order to use the Angular FlexGrid, we will need to add the dependent packages from npm. This command will install all of the required packages.

npm install @mescius/wijmo.angular2.all

Step 2: Import the Grid and Data

Now that we have the required packages, we need to import the modules in our app so that we can use the Angular DataGrid in our component views.

We also need to include some data. In this sample, it’s just a hardcoded array, but you would likely call a web service to fetch data.

import { Component } from '@angular/core';
import { WjGridModule, WjFlexGrid } from '@mescius/wijmo.angular2.grid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    data: any[];
    @ViewChild('flex') flex: WjFlexGrid;

    constructor() {
        this.data = [
            { id: 0, country: "US", sales: 1318.37, expenses: 4212.41 },
            { id: 1, country: "Germany", sales: 5847.95, expenses: 89.79 },
            { id: 2, country: "UK", sales: 502.55, expenses: 2878.50 },
            { id: 3, country: "Japan", sales: 4675.40, expenses: 488.65 },
            { id: 4, country: "Italy", sales: 2117.57, expenses: 925.60 },
            { id: 5, country: "Greece", sales: 322.10, expenses: 4163.96 }
        ];
    }
}

@NgModule({
    imports: [WjGridModule, BrowserModule],
    declarations: [AppComponent]
})
export class AppModule {
}

Step 3: Add Angular DataGrid Markup

In our component view (app.component.html) we can declare our Angular DataGrid in markup. The best Angular DataGrids are fully configurable in markup, including bindings, columns, and custom cell templates.

<wj-flex-grid #flex [itemsSource]="data" style="height: 500px;">
  <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" format="n2"></wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Expenses'" [binding]="'expenses'" format="n2"></wj-flex-grid-column>
</wj-flex-grid>

Step 4: Import Required CSS Files

For FlexGrid to look and work correctly, you must load Wijmo CSS files into your application. The styles are shipped in the @mescius/wijmo.styles npm package.

You can load styles in your Angular CLI application by adding this import statement to the top of the default styles.css file:

@import '@mescius/wijmo.styles/wijmo.css';

Step 5: Run the Angular DataGrid

That’s it! Just run your application and see your Angular DataGrid in action. Your grid will already support sorting, editing, selection, and more.

How to Optimize Angular DataGrid Performance

As discussed earlier, features are important, but performance is an arguably more significant benefit of DataGrids when working with large volumes of data. Let’s look at some techniques that can improve DataGrid performance.

• Modular architecture — The best DataGrids are built using a module design pattern. Only key features are included in the core grid, and developers can pick and choose which specialized features to include. By only including what is needed, our applications can stay lean.
• Leverage virtualization — Virtualization is what gives DataGrids the ability to outperform HTML tables (so that not all cells need to be created as DOM elements). So, it is essential to choose a DataGrid that supports virtualization to leverage this feature. We want to ensure that the DataGrid has a height and width set so that it is scrollable. This scrolling is what allows virtualization only to render cells needed inside the ViewPort and recycle cells as the user scrolls.
• Defer updates during configuration — DataGrids are built to rerender when changes are made, so we need to take that into account when configuring them. For example, if we have code that is making many changes to the grid, we want to defer rendering until we are done making the updates. The most common use cases for this are when the grid is being configured or when major data changes are being made at once.

Specialized Angular DataGrids

The sky is typically the limit regarding web development, so it’s no surprise that there’s still a lot more you can do with an Angular DataGrid. Developers and teams alike can keep adding more features to a single DataGrid library, but at a certain point, it makes more sense to branch some features off into a specialized DataGrid control. Some popular examples of specialized DataGrids include:

Pivot Grid

A DataGrid that displays a cross-tab view of one or more dimensions with built-in aggregation and extensive runtime configuration.

Angular PivotGrid showing aggregate data for analysis:

Transposed Grid

A DataGrid that renders rows horizontally instead of vertically. This is a very specialized use case.

MultiRow Grid

A DataGrid that renders single records in multiple rows of cells. This style of grid is very popular in Japan.

Conclusion

The HTML table is sufficient for simply viewing and editing tabular data in your Angular applications. For more advanced features, such as built-in analysis and data operations, you will want to explore third-party Angular DataGrids. You can use the feature list from this article as a checklist when you compare different third-party DataGrids. The screenshots used throughout are taken from the Wijmo FlexGrid Angular DataGrid samples.