Docs
API

    • hbar

    Complex horizontal bar chart column type

    HBar is part of FancyGrid spark module.
    To config this spark use sparkConfig param.

    Example

    
columns: [{
...
},{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
},{
...

    cls

    String

    Column css className.

     
    
.photo img {
  width: 80px;
  margin-top: -5px;
  margin-left: -10px;
}
...
columns: [{
  type: 'image',
  title: 'Photo',
  index: 'src',
  width: 80,
  cls: 'photo'
},{
...

    columnMenu

    Boolean

    Enable/disable column for menu.

     
    
columns: [{
  title: 'Company',
  index: 'name',
  columnMenu: false,
  type: 'string',
  width: 200,
}, {
  text: 'Stock Price',
  columns: [{
    title: 'Price',
    index: 'price'
  }, {
    title: 'Change',
    index: 'change',
    render: renderChangesFn
  }, {
    title: '% Change',
    index: 'pctChange',
    render: renderChangesFn
  }]
}, {
  title: 'Last Updated',
  index: 'lastChange',
  type: 'string',
  width: 97
}]
...
    undefined

    draggable

    Boolean

    Allows column to be dragged.

     
    
draggable: true,
    false

    flex

    Number

    Auto-calc column width by fitting available width.

    If to set one column to 1 than column width will fit to available grid width.

    If to set one column to 1 and another to 2 than available width will be divided on 3.

     
    
columns: [{
  index: 'company',
  title: 'Company'
},{
  index: 'name',
  title: 'Name',
  sortable: true
},{
  index: 'surname',
  title: 'Sur Name'
},{
  index: 'age',
  title: 'Age',
  type: 'number',
  width: 50
},{
  index: 'education',
  title: 'Education',
  flex: 1
}]

    headerCls

    String

    It is used only for checkbox column type.
    Configure as true to display a checkbox below the header text.
    Clicking the checkbox will check/uncheck all records. 

    
{
  index: 'company',
  type: 'string',
  title: 'Company',
  headerCls: 'header-cell-company'
}
    undefined

    headerLImageCls

    String

    In column header cell there is inactive left to title image.
    If to set css class name than this image will become active. 

    
.phone {
  display: inline-block;
  width: 19px;
  height: 16px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20style%3D%22shape-rendering%3AgeometricPrecision%22%20fill%3D%22%23555555%22%20%20opacity%3D%220.5%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6.2223%2C2.8573%20C6.4953%2C3.1303%206.4953%2C3.5723%206.2223%2C3.8453%20L5.2333%2C4.8333%20C4.9603%2C5.1063%205.0863%2C5.4653%205.2333%2C5.8213%20C5.5833%2C6.6653%206.3453%2C7.5103%207.4163%2C8.5813%20C8.6103%2C9.7763%209.3313%2C10.3323%2010.1753%2C10.7653%20C10.5193%2C10.9413%2010.8913%2C11.0383%2011.1633%2C10.7653%20L12.1523%2C9.7783%20C12.4253%2C9.5053%2012.8673%2C9.5053%2013.1403%2C9.7783%20L15.1173%2C11.7563%20C15.3903%2C12.0293%2015.3903%2C12.4713%2015.1173%2C12.7443%20L13.0653%2C14.7953%20C12.8233%2C15.0373%2012.4423%2C15.0683%2012.1643%2C14.8693%20C12.1643%2C14.8693%208.1363%2C13.6693%205.2333%2C10.7653%20C2.2063%2C7.7373%201.1303%2C3.8303%201.1303%2C3.8303%20C0.9313%2C3.5523%200.9633%2C3.1713%201.2043%2C2.9303%20L3.2573%2C0.8793%20C3.5303%2C0.6063%203.9723%2C0.6063%204.2453%2C0.8793%20L6.2223%2C2.8573%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  position: absolute;
  left: 2px;
  top: 7px;
}
...
},{
  type: 'string',
  headerLImageCls: 'phone',
  cellAlign: 'right',
  sortable: false,
  title: 'Phone',
  index: 'phone'
},{
    undefined

    hidden

    Boolean

    Hide column on start.

     
    
{
  index: 'married',
  resizable: true,
  type: 'checkbox',
  title: 'Married',
  width: 100,
  hidden: true
}
    false

    id

    String

    Column id was added to solve cases when column does not have data index or data index is repeated on several columns.
    If column id is not provided that it will be auto generated on base of column data index or random value. 

    
columns: [{
  type: 'string',
  title: 'Name',
  index: 'name',
  id: 'name',
  width: 80,
  align: 'center'
},{
    Auto generation.

    index

    String|Number|Array

    Data index.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  editable: true
}

    lockable

    Boolean

    Enable/disable column locking.

     
    
locked: false,
    true

    locked

    Boolean

    Locking column.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  locked: true
}
    False

    maxWidth

    Number

    The maximum width of column.

     
    
maxWidth: 150,

    menu

    Mixed

    Enables column menu.

     
    
menu: true,

    Example: Custom Default menu

     
    
menu: ['sort', '-', 'columns', '-', 'lock'],

    Example: Custom menu

     
    
menu: ['columns', '-', {
  text: 'Hi',
  handler: function(){
	alert('Hi');
  }
}],

    Example: One menu with columns only

     
    
menu: 'columns',
    false

    minWidth

    Number

    The minimum width of column.

     
    
minWidth: 80,

    resizable

    Boolean

    Enable resizing of column.

     
    
resizable: true,
    False

    rightLocked

    Boolean

    Locking column to right side.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name',
  rightLocked: true
}
    False

    sparkConfig

    Object

    Spark config of module.

     
    
sparkConfig: {
  percents: false
}

    title

    String

    Column title.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  index: 'name'
}
    ''

    titleEditable

    String

    Enables column title editing by double click on text.

     
    
{
  type: 'string',
  width: 65,
  title: 'Name',
  titleEditable: true,
  index: 'name'
}
    false

    type

    String

    Column type.

     
    
{
  index: 'married',
  title: 'Married',
  type: 'grossloss'
}

    width

    Number

    column width.

     
    
{
  type: 'action',
  width: 65,
  items: [{
    text: 'Delete',
    cls: 'action-column-remove',
    action: 'remove'
  }]
}

    sparkConfig

    fullStack

    Boolean

    Enables full width view of bars. Requires stacked: true. 

    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}
    false

    legend

    Boolean

    Enables full width view of bars. Requires stacked: true. 

    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}
    false

    stacked

    Boolean

    Enables stack display. Requires stacked: true. 

    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}
    false

    title

    Array

    The human-readable name of the series (displayed in the legend).

     
    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}
    '{value} {suffix}'

    tipFormat

    Function

    ToolTip format function

     
    
{
  width: 550,
  type: 'hbar',
  index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
  sparkConfig: {
    fullStack: true,
    stacked: true,
    tipFormat: function(o){
      return o.title + ' in ' + o.data.year + ':' + o.percents.toPrecision(4) + '%';
    },
    title: ['Toyota', 'GM', 'Volkswagen', 'Ford', 'Hyundai'],
    legend: {
      type: 'bbar',
      style: {
        'margin-left': '100px'
      }
    }
  }
}

    tipTpl

    String

    Change tooltip template.

     
    
{
  ...
  type: 'progressbar',
  sparkConfig: {
    percents: false
  },
  tipTpl: 'Value: {value} %'
  ...
}
    '{value} {suffix}'