The Best Angular 2 Data Grid: FlexGrid

• Download Wijmo 5

Plenty of JavaScript data grids exist in the market: open source, third-party, homegrown. Wijmo's FlexGrid is currently the best data grid for Angular 2.

Angular 2 Data Grid Basics: Small, Fast, and Familiar

To have a good Angular 2 grid, first you have to nail the basics of a data grid. FlexGrid was first written in 1996 using C++ for Visual Basic (and even shipped as part of Visual Studio). It has since evolved and been refined in many platforms, the most recent being JavaScript. FlexGrid gets its name from our Flex Philosophy: controls should include only the key set of features required and offer everything else through an extensibility model. Features like sorting, grouping and editing are built-in, while other bells and whistles are offered as optional extensions of FlexGrid. This keeps the controls small and fast and gives both us and our customers the ability to build custom features.

Try Wijmo 5 and FlexGrid

Another key feature is performance. FlexGrid is constantly benchmarked against other grids to ensure we’re fast. The Flex Philosophy allows us to keep our file size very small (~25K Gzipped), and we also have zero dependencies on other libraries. The most significant performance improvement is through virtual rendering. FlexGrid virtualizes all of its DOM and only renders the cells needed to fill the viewport (with some additional buffer for smooth scrolling). The cells (DOM elements) are recycled as the grid scrolls. Virtual rendering means that the grid can bind to millions of records in under a second.

Lastly, one of the most important features is familiarity. FlexGrid bases nearly all of its interaction behavior on Excel, which is probably the most common grid/table used by any end user. People expect certain behaviors when scrolling, clicking, and especially using key commands (including clipboard functions). Instead of inventing our own behaviors, we mimic Excel's, and end users immediately feel comfortable using our grid. Surprisingly, many other grids either invent their own behavior or don't fully support keyboard actions or scrolling. For example, if you select a row in a grid and hold the down arrow key, many grids don't function as you’d expect.

Declare UI Controls in Markup

Now, let's get down to some Angular-specific advantages of FlexGrid. The biggest advantage to FlexGrid in Angular is its markup: Angular components give us the ability to declare UI controls in markup. Declarative markup is ideal for following the MVVM design pattern, and we can fully configure our components within the View (markup).

Well, if your components support it, that is.

FlexGrid supports declaring its entire API using Angular markup. You can set properties, attach events, configure child components (like columns) entirely in markup. Here’s an example of how a FlexGrid can be configured in Angular 2 markup:

<wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-column [header]="'Country'" 
    [binding]="'country'" [width]="'*'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Date'" 
    [binding]="'date'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Revenue'" 
    [binding]="'amount'" [format]="'n0'"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="'Active'" 
    [binding]="'active'"></wj-flex-grid-column>
</wj-flex-grid>

And the result of our declarative markup:

Many other grid components only offer the ability to declare a control in markup, forcing all configuration to be done in JavaScript (ViewModel). This muddies the waters between the View and ViewModel and forces designers to go into JavaScript to change the UI control. When doing this, you also miss out on all of the benefits of Angular bindings in markup. We find this practice to be an anti-pattern. Take a look at the difference.

<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;"
    // items bound to properties on the controller
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefs">
</ag-grid-ng2>

By using a component that fully supports declarative markup, you get true MVVM support and can build applications like you would in other development platforms (ASP.NET, Java, Silverlight, Flex).

Declare Reusable Templates for Cell Types

In addition to declaring any of FlexGrid's members in markup, we also offer cell templates. Cell templates are a way to declare reusable templates for different types of cells. Cell templates support any valid Angular markup, including binding expressions, html, and other components. Different types of cell templates include: header cells, cells in edit mode, cells in normal mode, etc.

By offering cell templates, FlexGrid gives you an expressive way to create components. Not only can you leverage FlexGrid's API in markup, but you can leverage all of Angular's syntax within each cell.

Take a look at how powerful FlexGrid cell template markup can be:

<wj-flex-grid [itemsSource]="data1"
                    [allowSorting]="false"
                    [deferResizing]="true">
    <template wjFlexGridCellTemplate [cellType]="'TopLeft'" 
    *ngIf="customTopLeft">
        ?
    </template>
    <template wjFlexGridCellTemplate [cellType]="'RowHeader'" 
    *ngIf="customRowHeader" #cell="cell">
        { {cell.row.index}}
    </template>
    <wj-flex-grid-column header="Country"
                            binding="country"
                            width="*">
        <template wjFlexGridCellTemplate [cellType]="'Cell'" 
        *ngIf="customCell" #item="item">
            <img src="resources/{ {item.country}}.png" />
            { {item.country}}
        </template>
        <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" 
        *ngIf="customGroupHeader" #item="item" #cell="cell">
            <input type="checkbox" [(ngModel)]="cell.row.isCollapsed" />
            { {item.name}} ({ {item.items.length}} items)
        </template>
    </wj-flex-grid-column>
    <wj-flex-grid-column header="Downloads"
                            binding="downloads"
                            [width]="170"
                            [aggregate]="'Sum'">
        <template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" 
        *ngIf="customColumnHeader">
            <input type="checkbox" 
            [(ngModel)]="uiCtx.highlightDownloads" />
            Downloads
        </template>
        <template wjFlexGridCellTemplate [cellType]="'Cell'" 
        *ngIf="customCell" #item="item">
            <span [ngStyle]="{color: uiCtx.highlightDownloads? 
            (item.downloads>10000 ?'green':'red'):''}"
                    style="font-weight:700">
                { {item.downloads}}
            </span>
        </template>
        <template wjFlexGridCellTemplate [cellType]="'Group'" 
        *ngIf="customGroup" #cell="cell">
            Sum = { {cell.value | number:'1.0-0'}}
        </template>
    </wj-flex-grid-column>
</wj-flex-grid>

And the result of our declarative cell templates:

Again, to achieve this with any other grid, you need to go to JavaScript and write it in the ViewModel.

Automatically Updating Controls with Bindings

I believe Angular’s most productive benefit is binding expression, which allows us to create UI that automatically reacts to changes in data, saving us from writing excessive event handlers and DOM manipulations.

FlexGrid supports bindings for all of its properties. Beyond that, we also offer two-way bindings for any properties that can benefit from it. Without writing any code, you can bind components to handle events and propagate changes to and from your model.

Binding is a first-class citizen in any development platform (Java, .NET). Angular has made it very easy, and support for both one-way and two-way bindings is essential.

TypeScript: A Natural Fit for Angular 2

Last, but not least, FlexGrid, and all of Wijmo, is written in TypeScript. We have a long history of working in Microsoft platforms, so when TypeScript became available, we felt right at home. TypeScript gives us a development experience on par with C#: we get classes, inheritance, strong types, type checking, error checking at build time, and much more. It’s been a catalyst for us to create enterprise-quality JavaScript controls, just like we’ve done in other platforms, and we didn’t have to make any compromises in our API or syntax.

Perhaps most important, TypeScript has given us the ability to create "true controls" (as classes) and not widgets (as functions), like almost all other components. FlexGrid is a class derived from our Base Control class. While widgets force you to use an awkward function to set a property and pass in a value, FlexGrid has properties with getters and setters so that you can directly assign them. Wijmo also has an Event model for easily adding handlers.

Our end users that choose to work in TypeScript (as many now will in Angular 2) also benefit from our controls: they get IntelliSense (or auto complete) code in IDEs that support it, warnings, and helpful error messages if they try to assign an incorrect type to a property.

The most powerful feature of TypeScript is that our customers can inherit from and extend our controls. This falls in line with our Flex Philosophy, simplifying control customization and reducing errors.

Lastly, we’re aligned with where Angular 2 is now. It’s amazing to see a decision we made years ago justified by the Google team—adopting a Microsoft language, no less! Our control classes were already written in TypeScript, so they’re a natural fit for Angular 2. We simply extend them and add metadata decorations to expose them as Angular 2 components.

Don't Take My Word for It: Try It

“We purchased Wijmo and their team is doing a great job: good-looking, well-thought-out architecture; documentation; keeping up with ever-changing landscape like no others.” — BJ Jeong, Cisco

If my words haven’t convinced you, I encourage you to try FlexGrid and prove me right or wrong. If we’re wrong and FlexGrid has been beaten by another grid, we want to know. We haven't stopped refining and improving our grid for 20 years, and we won’t stop anytime soon.

• Download Wijmo 5