There are now a large number of JavaScript data table controls on the market, including open source third-party and self-produced and sold. It can be said that Wijmo's Flexgrid is the best table control currently adapted to Angular 2.
Angular 2 data table basic requirements: smaller, faster, and more familiar.
In order to use Angular 2 forms, first you need to understand the basic requirements of the forms. FlexGrid started in 1996 when controls written for Visual Basic were used in C++. Over the years, it has evolved and been perfected on multiple platforms, especially the JavaScript platform. FlexGrid is named because of the concept of Flex, and controls should contain the most needed key feature sets and scalable capabilities. Built-in basic functions such as: sorting, grouping, editing, and other fancy things can be provided through optional extensions. This will keep the controls streamlined and efficient, while giving customers the ability to deeply customize.
Another important indicator is performance. FlexGrid is constantly comparing with other products to ensure we are fast enough. The Flex concept makes our files small enough (about 25K after compression) and we have no dependencies on other frameworks. The most significant performance improvement is through virtual rendering. FlexGrid virtualizes all DOM, drawing only cells that need to be filled with viewports (and some buffers to smooth scrolling) at a time. When the table is scrolled, the cells (DOM elements) are recycled. Virtual rendering means that Grid can bind millions of data in 1 second.
Finally, one of the most important features is familiar operations. FlexGrid is based on all interaction behaviors in Excel, which may be the most commonly used way for users to operate Grid. People want to get definite behavior when scrolling, clicking, especially when using keyboard commands (including clipboard functions) rather than inventing ourselves. We imitated Excel so users feel comfortable using our tables, and surprisingly many other Grids have invented their own behavior or do not fully support scrolling and keyboard behavior. For example, when you select a row of data and hold the down arrow, many tables will not show the behavior you expected.
Use markup language to declare UI controls
Now let's take a look at the advantages of FlexGrid under AngularJS. The biggest benefit under AngularJS is the markup language of FlexGrid: Angular components provide the ability to declare controls using markup language. Declaration markers follow the MVVM design pattern well, and we can configure our components entirely through View (markup language).
FlexGrid supports the use of Angular markup language to declare a complete API. You can use markup language to set properties, attach events, and configure subcomponents (such as columns).
Here is an example that demonstrates how to configure FlexGrid using the Angular2 markup language.
<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>
Here are the results we have obtained from the markup language we have declared.
Many other Grid components only provide the ability to declare a control using markup language, which results in all configurations that must be done using JavaScript (ViewModel). This makes the View and ViewMode confused, forcing developers to use JavaScript to change the control UI. When doing this you will miss all the benefits of Angular binding. We think that doing so is an anti-pattern. See the difference below:
<ag-grid-ng2 #agGrid // items bound to properties on the controller [gridOptions]="gridOptions" [columnDefs]="columnDefs"></ag-grid-ng2>
By using components that fully support markup languages, you can get full MVVM pattern support and build applications like other development platforms (ASP.NET, Java, Silverlight, Flex).
Declare reusable cell type templates
To declare any FlexGrid members using markup language, we also provide cell templates. Cell templates are a way to declare reusable templates for different types of cells. Cell templates support any valid Angular tags, including bound expressions, html and other components. Cell template types include: title cell, edit mode cell, normal mode cell, etc.
Through cell templates, FlexGrid provides a representation for creating components. You can not only declare FlexGrid in markup language, but also use all Angular syntax in every cell. Let's see how powerful the FlexGrid cell template tag is.
<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" > <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>The results we declared as cell templates
Reusable cell templates in Angular2
Again, in order to achieve this effect in other table controls, you need to edit the JavaScript file and write it in the ViewModel.
Automatically update controls using data binding.
I believe the most productive benefit of Angular is the binding expression, which allows the controls we create to respond automatically to data changes, freeing us from tedious event handlers and DOM operations.
All properties of FlexGrid support data binding. In addition, we also provide two-way binding for some properties that require two-way data binding. Without writing any code, you can bind components to handle events and interact with the Model data.
Data binding is a first-class citizen on any development platform (Java, .NET), and Angular makes it easier and supports both one-way and two-way data binding.
TypeScript: 2 days of work with Angular.
FlexGrid and all Wijmo controls are written in TypeScript. We have a pretty long history working on the Microsoft platform, so when TypeScript becomes mature, we have a sense of home. TypeScript gives us an experience similar to writing C#: classes, inheritance, strong typing, type checking, build-time error checking, and more. It is the catalyst for us to create enterprise-grade JavaScript controls, just like we do on other platforms, we don't need to make any compromises in the API or syntax.
Perhaps most importantly, TypeScript gives us the ability to create real controls instead of widgets. FlexGrid as a class inherits from our base control class. When widgets force you to set an attribute and pass values using embarrassing functions, FlexGrid has getter and setter accessors that you can set directly. Wijmo also includes an event model for simply adding handlers.
If our users choose to use TpyeScript for development, they will get smart prompts and warnings in the supported IDEs, and there will be error messages when they try to assign an incorrect type to an attribute.
The most attractive feature of TypeScript is that our customers can inherit and extend our controls, which is in line with our Flex philosophy, simplifying control customization and reducing errors.
Finally, we go hand in hand with Angular2. I was surprised to see a decision we made a few years ago, using Microsoft's language. Our control class already uses TypeScript, so it can be seamlessly combined with Angular2. We simply extended them and added metadata to expose them in Angular2 components.
Don't believe my one-sided words: try too
“We bought Wijmo and their team did a great job: beautiful interface; thoughtful architecture; well-developed documentation; keeping up with changing technology,” said BJ Jeong of Cisco.
If my text doesn't convince you, encourage you to try FlexGrid and prove me right or wrong. If I'm wrong and FlexGrid is beaten by another Grid control, you can tell me. We have never stopped developing and improving for 20 years, and we will never stop. Download now to experience it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.