We're please to announce the general release of the WebComponents wrapper for our powerful HTML DataGrid.

With this, we now support the following technologies:

React:
http://blog.htmltreegrid.com/post/React-DataGrid-initializing-HTMLTreeGrid-in-componentDidMount-of-a-React-Component.aspx
http://reactdatagrid.com [Pure React DataGrid]

Angular 1:
http://blog.htmltreegrid.com/post/AngularJS-DataGrid-Component-Why-our-Angular-DataGrid-is-better.aspx

Angular 2 (&4):
http://blog.htmltreegrid.com/post/Angular-2-HTML-TreeGrid.aspx

Web Components:
http://blog.htmltreegrid.com/post/Best-WebComponents-DataGrid-DataTable.aspx

In this post, we are going to look at how to integrate the webcomponents wrapper for HTML Datagrid.

Instructions

* git checkout https://github.com/flexicious/flxs-webcomponents-data-grid/
* bower install
* Place your licensed copy of html treegrid (v 3.xx) in lib_private 


In your head section:
```
    <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="./bower_components/polymer/polymer.html">
    <link rel="import" href="src/flxs-webcomponents-data-grid.html" />
    <link rel="import" href="src/flxs-webcomponents-data-grid-column.html" />
    <link rel="stylesheet" href="http://www.htmltreegrid.com/demo/flexicious/css/flexicious.css" type="text/css" />
```
And then in your body section:
```
    <template id="tpl" is="dom-bind">
        <flxs-webcomponents-data-grid dataProvider="{{ donuts }}" forcePagerRow="true" enablePaging="true" enableExport="true" style="width:800px;height:400px"
            creationComplete="[[creationComplete]]">
            <flxs-webcomponents-data-grid-column type="checkbox"></flxs-webcomponents-data-grid-column>
            <flxs-webcomponents-data-grid-column dataField="id" headerText="ID" filterComboBoxDataProvider="{{donuts}}"></flxs-webcomponents-data-grid-column>
            <flxs-webcomponents-data-grid-column dataField="type" headerText="Type"></flxs-webcomponents-data-grid-column>
        </flxs-webcomponents-data-grid>
    </template>
```    
 And then in your script section:
```
    <script>
    
         var donuts = [
                            { "id":"5001", "type":"None None None" },
                            { "id":"5002", "type":"Glazed" },
                            { "id":"5005", "type":"Sugar" },
                            { "id":"5007", "type":"Powdered Sugar" },
                            { "id":"5006", "type":"Chocolate with Sprinkles" },
                            { "id":"5003", "type":"Chocolate" },
                            { "id":"5004", "type":"Maple" }
                        ];
    window.addEventListener('dom-change', function () {
      var tpl = document.getElementById('tpl');
      tpl.donuts = donuts;
      tpl.creationComplete =  function(evt){
            alert("Created " + evt.id)
        }
    });
    </script>