JavaScript Grid Component

Nowadays it is very popular directive approach.
We at FancyGrid also try to follow this trend.
Meet our first Component version.
Link on sample Grid Component

Component version is in unfinished/TEST Mode.

Enable Component version

After including library files include this.

<script>
Fancy.enableCompo();
</script>

Several varients of using

All in one directive(inline)

<fancy-grid id="myGrid" data-title="New Grid" data-width="400" data-height="300"
  data-columns="[{
    index: 'name',
    title: 'Name',    
    type: 'string'
  },{
    type: 'number',
    index: 'age',
    title: 'Age'
  }]" 
  data-data="[
    {name: 'Nick', age: 30},
    {name: 'Fred', age: 25},
    {name: 'Mike', age: 35}
  ]">
</fancy-grid>

Multi-lines

<fancy-grid id="myGrid" data-title="New Grid" data-width="400" data-height="300">
  <fancy-columns>
    [{
      index: 'name',
      title: 'Name',    
      type: 'string'
    },{
      type: 'number',
      index: 'age',
      title: 'Age'
    }]
  </fancy-columns>
  <fancy-data>
    [
      {name: 'Nick', age: 30},
      {name: 'Fred', age: 25},
      {name: 'Mike', age: 35}
    ]
  </fancy-data>
</fancy-grid>

Advanced

Form and Tab

Component version also avaliable for FancyForm and FancyTab

How to Manipulate with Component

If you set id for directive than in JavaScript global scope grid/form/tab will be avaliable by this name.

<fancy-grid id="myGrid" data-title="New Grid" data-width="400" data-height="300">
  <fancy-columns>
    [{
      index: 'name',
      title: 'Name',    
      type: 'string'
    },{
      type: 'number',
      index: 'age',
      title: 'Age'
    }]
  </fancy-columns>
  <fancy-data>
    [
      {name: 'Nick', age: 30},
      {name: 'Fred', age: 25},
      {name: 'Mike', age: 35}
    ]
  </fancy-data>
</fancy-grid>

<script>
...
myGrid.add({
  name: 'John',
  someProperty: 1
});
...
</script>