The best Angular2 Table control _angularjs

There are a number of JavaScript data table controls available on the market, including open source Third-party and homegrown. 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, more familiar.

To use the angular 2 form, you first need to understand the basic requirements of the form. FlexGrid began in 1996, when using C + + as a control written for Visual Basic. Over the years, it has evolved and perfected on multiple platforms, especially the JavaScript platform. FlexGrid is named after the Flex concept, the control should contain the most critical feature sets and scalability capabilities that are most needed. Built-in basic features such as sorting, grouping, editing, and other things that are more fancy can be provided through an optional extension. This will keep the controls streamlined and efficient, while giving customers a deep customization capability.

Another important indicator is performance. FlexGrid constantly compare with other products to make sure 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 virtualize All of the DOM, drawing only the cells that need to fill the viewport (and some buffer areas that make scrolling smooth) at a time. When the table scrolls, the cells (DOM elements) are reclaimed. Virtual rendering means that the grid can bind millions data within 1 seconds.

Finally, one of the most important features is the familiar operation. FlexGrid is based on all of the interactive behavior of Excel, which is probably the most common way for users to manipulate the grid. People want to get a certain behavior when scrolling, clicking, especially when using keyboard commands (including the Clipboard function), rather than our own inventions. We mimicked Excel so that users feel comfortable using our tables, and surprisingly many other grid inventions have their own behavior or do not fully support scrolling and keyboard behavior. For example, when you select a row of data and hold down the down arrow, many tables do not show the behavior you expect.

to declare a UI control using markup Language

Now, let's take a look at the advantages of FlexGrid under ANGULARJS. The biggest benefit of ANGULARJS is the FlexGrid Markup language: The angular component provides the ability to declare a control using markup languages. The declaration tag nicely follows the MVVM design pattern, and we can configure our components entirely through the view (Markup language).

FlexGrid supports the use of the angular markup language to declare the 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>

The following are the results of the markup language we have declared.

Many other grid components provide only the ability to declare a control using markup language, which causes all configurations to be completed using JavaScript (ViewModel). This makes confusion between view and ViewMode, forcing developers to use JavaScript to change the UI of the control. When you do so you will miss all the benefits of angular binding. We think this is an inverse pattern. Look at the following differences:

 <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 components that fully support markup language, you can get complete MVVM mode support, building applications like other development platforms (ASP.net, Java, Silverlight, Flex).

Declare a reusable cell type template
to declare any FlexGrid member using the markup language, we also provide a cell template. Cell templates are a way to declare reusable templates for different types of cells. The cell template supports any valid angular tag, including binding expressions, HTML, and other components. Cell template types include: header cells, edit mode cells, Normal mode cells, and so on.

With a cell template, FlexGrid provides a way to create a component. Not only can you use the markup language to declare FlexGrid, you can also use all the angular syntax in each cell. Let's see how powerful FlexGrid cell template tags are.

<wj-flex-grid [itemssource]= "data1" [allowsorting]= "false" [deferresizing]= "true" > <template wjflexgridcelltemplate [celltype]= "' TopLeft '" *ngif= "Customtopleft" >№</template> <template WJFLEXGRIDC elltemplate [celltype]= "' Rowheader '" *ngif= "customrowheader" #cell = "Cell" > {{cell.row.index}}} </template> & Lt;wj-flex-grid-column header= "Country" binding= "Country" width= "*" > <template wjflexgridcelltemplate [cellTyp e]= "' Cell '" *ngif= "Customcell" #item = "item" >  {{item.countr Y}} </template> <template wjflexgridcelltemplate [celltype]= ' GroupHeader ' *ngif= ' Customgroupheader ' #item = "item" #cell = "cell" > <input type= "checkbox" [(Ngmodel)]= "cell.row.isCollapsed"/> {{item.name}} ({{ite M.items.length} items) </template> </wj-flex-grid-column> <wj-flex-grid-column header= "Downloads" bi nding= "Downloads" [width]= "170" [Aggregate]= "' Sum '" > <template wjflexgridcelltemplate [celltype]= "' ColumnHeader '" *ngif= "Customcolumnheader" > ; Input type= "checkbox" [(Ngmodel)]= "Uictx.highlightdownloads"/> Downloads </template> <template Wjflex gridcelltemplate [celltype]= "Cell" "*ngif=" Customcell "#item =" item "> <span [ngstyle]=" {color: Uictx.highlightdownloads? (item.downloads>10000? ') Green ': ' Red '): ' '} ' style= ' font-weight:700 ' > {{item.downloads}} </span> </template> <te Mplate wjflexgridcelltemplate [celltype]= "' Group '" *ngif= "customgroup" #cell = "Cell" > Sum = {{cell.value | number: ' 1

 .0-0 '} </template> </wj-flex-grid-column> </wj-flex-grid>

The result of the cell template we declared

Reusable cell templates in Angular2

Again, to implement this effect in other table controls, you need to edit the JavaScript file and write it in ViewModel.

use data binding to automatically update controls.

I believe that the most productive benefit of angular is the binding expression, which allows us to create controls that automatically respond to data changes, freeing us from cumbersome event handlers and DOM operations.

FlexGrid All properties support data binding, and we also provide bidirectional binding for some properties that require bidirectional data binding. You do not need to write any code, you can bind components to handle events and interact with model data.

Data binding on any development platform (Java,. NET) is a first-class citizen, angular makes it easier and supports both one-way and bidirectional data binding.

typescript: a perfect match for angular 2.

FlexGrid and all Wijmo controls are written using Typescript. We have a fairly long history of 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 so on. It's our catalyst for creating enterprise-class JavaScript controls, and as we do on other platforms, we don't have to compromise on the API or the syntax.

Perhaps most importantly, Typescript provides us with the ability to create real controls rather than widgets. FlexGrid inherits from our base control class as a class. When widgets force you to use embarrassing functions to set a property and pass values, FlexGrid has getter and setter accessors, and you can set them directly. Wijmo also contains an event model for simply adding handlers.

If our users choose to use tpyescript for development, they will get smart prompts, warnings in the supported IDE, and error messages when they try to assign an incorrect type to a property.

The most compelling feature of typescript is that our customers can inherit and extend our controls, which is consistent with our flex philosophy, simplifies control customization and reduces errors.

Finally, we are abreast of Angular2. I was pleasantly surprised to see a decision we made a few years ago, using the language of Microsoft. Our control classes have been typescript, so they can be seamlessly combined with ANGULAR2. We have simply extended them and added metadata to expose them in the ANGULAR2 component.

do not listen to my word: you also try

"We bought Wijmo, and their team did a great job: an attractive interface, a thoughtful architecture, a perfect document, and a follow-up to changing technology." "said BJ Jeong, a Cisco company.

If my words do not convince you, encourage you to try FlexGrid, prove my right and wrong. If I'm wrong and FlexGrid is defeated by another grid control, you can tell me. For 20 years we have never ceased to develop and improve, and we will not stop. Download now for an experience.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.