Tabs

Sometimes it needs to show data by fragments.
Tabs is very good approach for this.
In our project there is extra small widget FancyTab.

FancyTab

Sample code

Link on sample Tabs

var columns = [{
  type: 'image',
  index: 'img',
  title: 'Photo',
  cls: 'column-car-image',
  width: 170
},{
  index: 'name',
  type: 'string',
  sortable: true,
  width: 100,
  title: 'Name'
},{
  index: 'price',
  type: 'currency',
  sortable: true,
  title: 'Start Price'
}];

var selModel = 'row',
  defaults = {
    resizable: true
  },
  cellHeight = 75;

new FancyTab({
  renderTo: 'tabs',
  title: 'KIA by types',
  width: 500,
  height: 450,
  resizable: true,
  theme: 'gray',
  items: [{
    title: 'Sub-Compacts',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'sub-compacts.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Compacts',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'compacts.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Minivans',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'minivans.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Luxury Sedans',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'luxury-sedans.json'
      }
    },
    defaults: defaults,
    columns: columns
  },{
    title: 'Crossovers',
    type: 'grid',
    selModel: selModel,
    cellHeight: cellHeight,
    data: {
      proxy: {
        url: 'suv.json'
      }
    },
    defaults: defaults,
    columns: columns
  }]
});

API

API of FancyTab is similiar to FancyForm the 2 main differences are:
1 - It requires to set type of each tab.
Example:

  ..
  type: "grid",
  ..
2 - To set active tab.

  new FancyTab({
    activeTab: 1,
    ...
`