Build a Customizable Angular Data Grid in Minutes
Data grids have been one of the most common visual software elements since the advent of UIs themselves. They provide a powerful and flexible way to display data in a tabular format. As web apps continue to replace the traditional native applications we’re used to, it only makes sense that data grids would make their way to web app UIs as well. Plenty of JavaScript data grids exist in the market: open source, third-party, and homegrown. Which to choose?
In another post, we discuss what makes data grids so useful as UI elements and why Flexgrid is the best React data grid. Other tutorials discuss how to build a React data grid in minutes, and how to build a Vue data grid. You can see the FlexGrid in action and learn more about it using our Learn Wijmo application. You can get your copy from NPM, from our CDN, or you can download it from our site.
Wijmo’s FlexGrid is the fastest and most feature-rich JavaScript data grid component. Whether you’re building an app to track manufacturing stats or analyze financial data, FlexGrid will provide the best data grid UX with the best performance.
Let’s put FlexGrid to work, building a customizable Angular data grid in minutes.
This is the Angular version of the “2019 Sedans” app:
https://stackblitz.com/edit/angular-abrawp
We used stackblitz to create the sample so it is easy to maintain and share.
Create the Angular App
To create your own copy of the app, follow these steps:
- Open stackblitz
- Click the “Angular/TypeScript” button at the bottom of the screen
- Add Wijmo to the project by typing “wijmo” into the dependencies list:
Import the Required Rodules
The app will use Angular’s HttpClient module to load the JSON data asynchronously, and FlexGrid and FlexGridFilter modules to show and filter the data.
To import the modules we need, edit the app.module.ts file as follows:
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
import { WjGridFilterModule } from 'wijmo/wijmo.angular2.grid.filter';
import { AppComponent } from './app.component';@NgModule({
imports: [
BrowserModule,
HttpClientModule,
WjGridModule,
WjGridFilterModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Style the App with CSS
To style the app, edit the styles.css file as follows:
/* styles.css */
@import "wijmo/styles/themes/wijmo.theme.material.css";body {
font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
max-height: 300px;
max-width: 32em;
}
The first line imports a Wijmo CSS file. We chose the material theme for this sample, one of several included with Wijmo.
Add the Data Source
The application loads data from a JSON store and exposes it as a CollectionView. This is done in the app.component.ts file:
// app.component.ts
import { Component from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from 'wijmo/wijmo';@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent { // create our CollectionView
data = new WjCore.CollectionView([], {
groupDescriptions: ['make'] // group my make
}); // and populate it from the JSON data source
constructor(private http: HttpClient) {
this.http.get('https://api.myjson.com/bins/cqvk8')
.subscribe(data => {
this.data.sourceCollection = data;
});
}
}
The constructor uses Angular’s HttpClient to load the data from the data store asynchronously. When the data arrives, it is assigned to the CollectionView’s sourceCollection property and becomes available to the application.
Show the Data
The final step is the application UI, defined in the app.component.html file:
<!-- app.component.html -->
<h1>
2019 Sedans (Angular)</h1>
<p>
Sort by model and price…</p><!-- summary info -->
<p>
Showing
<b>{{data ? data.items.length: 0}}</b> models from
<b>{{data ? data.groups.length: 0}}</b> makes.</p><!-- define the grid -->
<wj-flex-grid
[allowResizing]="'None'"
[showAlternatingRows]="false"
[isReadOnly]="true"
[selectionMode]="'ListBox'"
[headersVisibility]="'Column'"
[itemsSource]="data" <!-- define the columns -->
<wj-flex-grid-column
[binding]="'make'" [header]="'Make'" [width]="'*'" [visible]="false">
</wj-flex-grid-column>
<wj-flex-grid-column
[binding]="'model'" [header]="'Model'" [width]="'*'">
</wj-flex-grid-column>
<wj-flex-grid-column
[binding]="'price'" [header]="'Price'" [format]="'c0'" [width]="'.5*'"
[aggregate]="'Avg'">
</wj-flex-grid-column> <!-- add a column filter -->
<wj-flex-grid-filter></wj-flex-grid-filter></wj-flex-grid>
The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data.
The header is followed by the “wj-flex-grid” element which initializes the grid’s properties, including the itemsSource, the columns to display, and their properties.
The column properties include the binding, header, format, and width for each column. Note that the aggregate property on the price column causes the grid to show the average price for each in the group headers. The “wj-flex-grid” element contains a “wj-flex-grid-filter” element which adds the column filter, so users may filter the grid data by model and by price.
Run the Application
That’s it! The Angular version of the “2019 Sedans” app is ready:
https://stackblitz.com/edit/angular-abrawp
Happy coding! If you have questions or comments be sure to enter them below.
