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

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

  ..
  type: "grid",
  ..

  new FancyTab({
    activeTab: 1,
    ...