Docs
API

    • Columns

    Column types

    action, checkbox, color, combo, currency, date, image, number, rowdrag, string, switcher, text, tree,
    grossloss, progressbar, progressdonut, hbar,
    order, select, expand,
    sparklineline, sparklinebar, sparklinetristate, sparklinediscrete, sparklinebullet ,sparklinepie, sparklinebox    .


    All sparkline types are the same on syntax except of sparkConfig which you can read on site http://omnipotent.net/jquery.sparkline/


    action

    action column type.

    Instead of the action column type, it is recommended to use Controllers 

    
{
  type: 'action',
  width: 65,
  items: [{
  text: 'Delete',
  cls: 'action-column-remove',
  handler: function(grid, o){
    grid.remove(o);
  }
}

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

    checkbox

    Boolean

    checkbox column type.

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

    date

    String

    date column type.

     
    
{
  index: 'birthday',
  title: 'Birthday',
  type: 'date',
  width: 100
}


    
{
  index: 'birthday',
  title: 'Birthday',
  type: 'date',
  format: {
    read: 'm/d/Y'
  }
}

    
{
  index: 'birthday',
  title: 'Birthday',
  type: 'date',
  format: {
    read: 'm/d/Y',
    write: 'd.m.Y',
    edit: 'm.d.Y'
  }
}

    expand

    Enables row expanding element for column.

     
    
{  
  type: 'expand',
  locked: true
}

    combo

    String

    combo column type.

     
    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  data: ['USA', 'Canada', 'England']
}

    currency

    String

    currency column type.

     
    
columns: [{
  index: 'salary',
  type: 'currency',
  title: 'Salary in Dollar'
},{
  index: 'salary_eur',
  type: 'currency',
  title: 'Salary in Euro',
  currency: Fancy.currency.EUR
},{
  index: 'salary_gbp',
  type: 'currency',
  title: 'Salary in Pound',
  currency: Fancy.currency.GBP
},{
  index: 'salary_jpy',
  type: 'currency',
  title: 'Salary in Yen',
  currency: Fancy.currency.JPY

    image

    String

    image column type.

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

    grossloss

    Number

    grossloss column type.

     
    
{
  title: 'Gross/Loss',
  index: 'changes',
  type: 'grossloss',
  width: 75,
  sparkConfig: {
    grossColor: '#6fb270',
    lossColor: '#dc6b67',
    showOnMax: true,
    percents: true
  },
  rightLocked: true
}

    number

    Number

    number column type.

     
    
{
  type: 'number',
  index: 'age',
  title: 'Age'
}

    
{
  title: '%',
  index: 'percent',
  width: 45,
  type: 'number',
  render: function(o){
    if(o.value < 0){
      o.style = {
        color: '#E46B67'
      };
    }
    else{
      o.style = {
        color: '#65AE6E'
      };
    }

    o.value = o.value + '%';

    return o;
  }
}

    order

    Order column. It does numbered rows.

     
    
{  
  type: 'order',
  locked: true
}

    progressbar

    Number

    progressbar column type.

     
    
{
  index: 'online',
  type: 'progressbar',
  width: 290,
  title: 'Relative size',
  sparkConfig: {
    percents: false
  }
}

    progressdonut

    Number

    progressdonut column type.

     
    
{
  title: 'Dynamics',
  rightLocked: true,
  cellAlign: 'center',
  index: 'progress',
  type: 'progressdonut',
  width: 66,
  sparkConfig: {
    size: 28,
    tipTpl: 'Value: {value} %'
  }
}

    rowdrag

    Column with row drag and drop elements. It requires to enable rowDragDrop: true

     
    
rowDragDrop: true,
columns: [{
  type: 'rowdrag'
},{

    select

    Select column. It enables checkbox row selection.
    Another solution to reach similiar functionality to use property select for column. 

    
{
  type: 'select',
  locked: true
}

    sparkline*

    Array

    sparkline-s column type.

     
    
{
  title: 'Line',
  index: 'data1',
  type: 'sparklineline',
  sparkConfig: {
    spotRadius: 1.7
  }
}

data: [
 { data1: [-2,3,4,1,0,-5], data2: [1,2,3,4,5]},
 ...
];

    
{
  width: 50,
  type: 'sparklineline',
  sparkConfig: {
    sliceColors: ["#9DB160", "#B26668", "#4091BA", "#8E658E", "#3B8D8B", "#B6CA79", "#CB7F81", "#4091BA", "#8E658E", "#3B8D8B"]
  },
  values: ['toyota', 'gm', 'vw', 'ford', 'hyundai']
}

data = [
  { year: 2006, toyota: 6800228, gm: 5779719, vw: 5429896, ford: 3956708, hyundai: 2003608 },
  { year: 2007, toyota: 7211474, gm: 6259520, vw: 5964004, ford: 3565626, hyundai: 2292075 },
  ...
];

    string

    String

    string column type.

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

    switcher

    Boolean

    switcher column type.

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

    text

    String

    text column type.

     
    
{
  type: 'text',
  index: 'about',
  title: 'About'
}

    tree

    String

    tree column type.

     
    
{
  type: 'tree',
  title: 'Name',
  width: 200,
  index: 'name'
}

    defaults

    All listed properties can be auto set to columns if they do not already exist.

    defaults

    Object

    Defaults columns properties.

     
    
defaults: {
  type: 'string',
  width: 100,
  editable: true,
  sortable: true
},

    All column configs

    align

    String

    Column header cell align.

     
    
...
columns: [{
  type: 'image',
  title: 'Photo',
  index: 'src',
  width: 80,
  align: 'center'
},{
...
    left

    autoHeight

    Boolean

    Set row height according to cell content height.
    It is used only for column type text. 

    
...
columns: [{
  type: 'text',
  title: 'Info',
  index: 'info',
  width: 80,
  autoHeight: true
},{
...
    false

    autoWidth

    Boolean

    Auto width column according to data on grid init..

     
    
...
columns: [{
  type: 'string',
  title: 'Email',
  index: 'email',
  autoWidth: true
},{
...
    false

    cellAlign

    String

    Column cell align.

     
    
...
columns: [{
  type: 'image',
  title: 'Photo',
  index: 'src',
  width: 80,
  cellAlign: 'center'
},{
...
    left

    cellTip

    Mixed

    Column cell tooltip.

     
    
...
columns: [{
  type: 'number',
  width: 75,  
  align: 'center',
  cellAlign: 'center',
  cellTip: '{title} sold {value}<br> items on {day}'
},{
...

    
...
columns: [{
  type: 'number',
  width: 75,  
  align: 'center',
  cellAlign: 'center',
  cellTip: function(o){
    if(!o.value){
      return false;
    }
    
    return o.value;
  }
},{
...
    If cellTip is function that tt should return cell tip text, if it returns false than tip will not be shown.
    false

    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

    columns

    Array

    It is used for grouping columns.

     
    
columns: [{
  title: 'Company',
  index: 'name',
  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
}]
...

    data

    Mixed

    It is used only for combo column type.

    It is list of possible combo values.

     
    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  data: ['USA', 'Canada', 'England']
}

    Dynamic loading from server

    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  data: {
    proxy: {
      url: 'countries.php',
      method: 'POST',
      params: {
        region: 'europe'
      }
    }
  }
}
...
countries.php
{"data": ["UK", "Germany", "France"]}

    Returned data from server must be valid JSON, in other case it will not be rendered

    Data - array of objects

    Example: Local Data

    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'country',
  data: [
    {country: "USA", id: 1},
    {country: "Canada", id: 2},
    {country: "England", id: 3}
  ]
}

    Example: Server Data

    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'country',
  data: {
    proxy: {
      url: 'countries.php',
      method: 'POST'
    }
  }
}
...
countries.php
{"data": [{"country": "USA", "id": 1},{"country": "Canada", id: 2},{"country": "England", id: 3}]}

    Returned data from server must be valid JSON, in other case it will not be rendered

    disallowAfterDrop

    Boolean

    Dissalow drop column after current column when drag column. 

    
columns: [{
...
},{
  index: 'state',
  title: 'State',
  type: 'combo',
  width: 110,
  disallowAfterDrop: true

    displayKey

    String

    It is used only for combo.
    The data value name to display in grid cell, filter field and combo list.

     
    
columns: [{
...
},{
  index: 'state',
  title: 'State',
  type: 'combo',
  width: 110,
  displayKey: 'text',
  valueKey: 'value',
  data: {
    proxy: {
      url: 'states.json'
    }
  }
...

states.json
{
  "data": [{
    "value": "",
    "text": ""
  },{
    "value": "AL",
    "text": "Alabama"
  },{
    "value": "AK",
    "text": "Alaska"
  },{
    "value": "AZ",
    "text": "Arizona"

    draggable

    Boolean

    Allows column to be dragged.

     
    
draggable: true,
    false

    editable

    Boolean

    Enable column editing.

     
    
editable: true,
    false

    ellipsis

    Boolean

    Enable ellipsis for overflowed text.

     
    
{
  type: 'string',
  width: 65,
  ellipsis: true,
  title: 'About',
  index: 'about'
}
    false

    filter

    Object

    Enable column filtering.

     
    
filter: {
  header: true,
  emptyText: 'Search'
}

    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
}]

    format

    String

    Column formatting.

    Values: 'number'.

     
    
format: 'number',

    headerCheckBox

    Boolean

    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: 'active',
  resizable: true,
  type: 'checkbox',
  title: 'Active?',
  width: 100,
  headerCheckBox: true
}
    false

    headerClickSort

    Boolean

    It is used only for columns that are sortable.
    It prevents sorting by click on column header cell.
    It is used for sorting outside of grid over grid API. 

    
{
  index: 'company',
  type: 'string',
  title: 'Company',
  sortable: true,
  headerClickSort: false
}

...
grid.sort('company', 'asc');
    undefined

    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'
},{

    Sample on JSFiddle

    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

    Index(key) from data row.

    Also read chart categories.

     
    
index: 'name',
    
    
columns: [{
  title: 'Year',
  index: 'xAxis.categories',
  editable: false
},{
    Column order number index.

    items

    Array

    Is used only for action column type.

    Main purpose to generate button(s) inside of cell with handler and style if needed.

     Handler 
    
items: [{
  text: 'Delete',
  cls: 'action-column-remove',
  handler: function(grid, o){
    grid.remove(o);
  }
}]
    Action 
    
items: [{
  text: 'Delete',
  cls: 'action-column-remove',
  action: 'remove'
}]

    itemCheckBox

    Boolean

    Adds checkboxes for filter header combo list.

     
    
},{
  index: 'country',
  title: 'Country',
  type: 'combo',
  width: 99,
  filter: {
    header: true
  },
  displayKey: 'text',
  valueKey: 'text',
  multiSelect: true,
  itemCheckBox: true,
  minListWidth: 120,
  data: {
    proxy: {
      url: '/json-data/theme/countries.json'
    }
  }
},{
    true

    leftTpl

    String

    This property is used for only combo colomn.
    listTpl is template for left side of combo editor.

    This property is used for advanced templating combo.
    Templating combos is one the most complex issue. 

    
columns: [{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'text',
  valueKey: 'text',
  minEditorWidth: 150,
  minListWidth: 150,
  leftTpl: '<span class="flag {cls}"></span> l ',
  leftWidth: 35,
  listItemTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
  render: function(o){
	var cls = 'flag-' + coutries[o.value];
	
	o.value = '<span class="flag ' + cls + '"></span> <span class="country">' + o.value + '</span>';
	return o;
  },
  data: {
	proxy: {
	  url: 'countries.json'
	}
  }
},{
...
    undefined

    leftWidth

    Number

    This property is used for only combo colomn.
    leftWidth is width of left side of combo editor.
    This property can be used only if property leftTpl is defined.

    This property is used for advanced templating combo.
    Templating combos is one the most complex issue. 

    
columns: [{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'text',
  valueKey: 'text',
  minEditorWidth: 150,
  minListWidth: 150,
  leftTpl: '<span class="flag {cls}"></span> l ',
  leftWidth: 35,
  listItemTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
  render: function(o){
	var cls = 'flag-' + coutries[o.value];
	
	o.value = '<span class="flag ' + cls + '"></span> <span class="country">' + o.value + '</span>';
	return o;
  },
  data: {
	proxy: {
	  url: 'countries.json'
	}
  }
},{
...
    20

    listItemTpl

    String

    This property is used for only combo colomn.
    listItemTpl is template for list item for combo editor.

    This property is used for advanced templating combo.
    Templating combos is one the most complex issue. 

    
columns: [{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'text',
  valueKey: 'text',
  minEditorWidth: 150,
  minListWidth: 150,
  leftTpl: '<span class="flag {cls}"></span> l ',
  leftWidth: 35,
  listItemTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
  render: function(o){
	var cls = 'flag-' + coutries[o.value];
	
	o.value = '<span class="flag ' + cls + '"></span> <span class="country">' + o.value + '</span>';
	return o;
  },
  data: {
	proxy: {
	  url: 'countries.json'
	}
  }
},{
...
    undefined

    lockable

    Boolean

    Enable/disable column locking.

     
    
locked: false,
    true

    locked

    Boolean

    Locking column.

     
    
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

    minEditorWidth

    Number

    This property is used for only combo colomn.
    minEditorWidth is min width of combo editor.

    This property is used for advanced templating combo.
    Templating combos is one the most complex issue. 

    
columns: [{
  index: 'country',
  title: 'Country',
  type: 'combo',
  displayKey: 'text',
  valueKey: 'text',
  minEditorWidth: 150,
  minListWidth: 150,
  leftTpl: '<span class="flag {cls}"></span> l ',
  leftWidth: 35,
  listItemTpl: '<span class="flag {cls}"></span> <span class="country">{text}</span>',
  render: function(o){
	var cls = 'flag-' + coutries[o.value];
	
	o.value = '<span class="flag ' + cls + '"></span> <span class="country">' + o.value + '</span>';
	return o;
  },
  data: {
	proxy: {
	  url: 'countries.json'
	}
  }
},{
...
    auto

    minListWidth

    Number

    The minimum width of list for combo column.
    When column is not wide but values in list are long than for better look
    it is possible to set minListWidth 

    
minListWidth: 150,

    minWidth

    Number

    The minimum width of column.

     
    
minWidth: 80,

    multiSelect

    Boolean

    Enables multiSelect for header filter combo.

     
    
},{
  index: 'country',
  title: 'Country',
  type: 'combo',
  width: 99,
  filter: {
    header: true
  },
  displayKey: 'text',
  valueKey: 'text',
  multiSelect: true,
  itemCheckBox: true,
  minListWidth: 120,
  data: {
    proxy: {
      url: '/json-data/theme/countries.json'
    }
  }
},{

    precision

    Number

    This option is available for currency column type and for number column type if it has property format: 'number'.

     
    
columns: [{
  index: 'salary',
  type: 'currency',
  title: 'Salary in Dollar',
  precision: 2
},{
  index: 'salary_eur',
  type: 'currency',
  title: 'Salary in Euro',
  precision: 2,
  currency: Fancy.currency.EUR
},{
  index: 'salary_gbp',
  type: 'currency',
  title: 'Salary in Pound',
  precision: 2,
  currency: Fancy.currency.GBP
},{
  index: 'salary_jpy',
  type: 'currency',
  title: 'Salary in Yen',
  precision: 2,
  currency: Fancy.currency.JPY

    Sample on JSFiddle

    0

    render

    Function

    Before grid cell will be updated with it's value, function render runs if it exist.

    Function render is mainly used for some not standard styling or formatting of cell value.

     
    
render: function(o){
  if(o.value < 0){
    o.style = {
      color: '#E46B67'
    };
  }
  else{
    o.style = {
      color: '#65AE6E'
    };
  }

  o.value = o.value + '%';

  return o;
}

    rightLocked

    Boolean

    Locking column to right side.

     
    
rightLocked: true,
    false

    resizable

    Boolean

    Enable resizing of column.

     
    
resizable: true,
    false

    rowdrag

    Boolean

    Combines column rowdrag and current column.
    It adds drag elements to cells if selModel is rows or row. 

    
rowdrag: true,
    false

    searchable

    Boolean

    This property influence only on method search.
    If column has property searchable: false
    than searching ignores data values with column index. 

    
searchable: true,
    true

    select

    Boolean

    Combines column select and current column.
    It adds checkboxes to cells if selModel is rows or row. 

    
select: true,
    false

    selectable

    Boolean

    Enable column selection if selModel is column or columns.

     
    
selectable: true,
    true

    smartIndexFn

    Function

    Handler for generating custom cell value.

     
    
smartIndexFn: function(data){
  return data.name + ' ' + data.surname;
}
    undefined

    sortable

    Boolean

    Enable column sorting.

     
    
sortable: true,
    false

    sorter

    Function

    Enable custom column sort.

     
    
}, {
  index: 'age',
  width: 60,
  title: 'Age',
  sorter: function(dir, a, b) {
	switch (dir) {
	  case 'asc':
		if (a === '') {
		  return -1;
		}
		return a - b;
	  case 'desc':
		if (b === '') {
		  return -1;
		}
		return b - a;
	}
	return;
  },
  type: 'number'
}, {
    undefined

    sparkConfig

    Object

    sparkConfig is used only if type of column is one of sparklines.

    All sparkConfig-s on site http://omnipotent.net/jquery.sparkline/

     
    
sparkConfig: {
  barColor: '#60B3E2',
  negBarColor: '#F57A75'
}

    spin

    Boolean

    Enable a pair of up/down spinner buttons.
    It is used only for number column. 

    
columns: [{
..
  title: 'Salary',
  index: 'salary',
  type: 'number',
  spin: true,
  step: 1000,
  min: 0,
  max: 150000,
  format: {
    inputFn: salaryInputFn
  }
...

    step

    Number

    increment/decrement value for number column if spin is true

     
    
columns: [{
..
  title: 'Salary',
  index: 'salary',
  type: 'number',
  spin: true,
  step: 1000,
  min: 0,
  max: 150000,
  format: {
    inputFn: salaryInputFn
  }
...
    1

    subSearch

    Boolean

    Enables search field in list with values.
    This property disables editable property.
    It is used only for column type combo. 

    
{
  index: 'country',
  title: 'Country',
  type: 'combo',
  subSearch: true,
  data: {
    proxy: {
      url: 'countries.php',
      method: 'POST',
      params: {
        region: 'europe'
      }
    }
  }
}

    summary

    Mixed

    Enables summary for column.
    Also requires summary property for core object.

    Enables summary for column.
    Also requires to enable property summary for core object.
    Possible values:
    count - Gets the count of rows in column.
    min - Gets the minimum value in the column.
    max - Gets the maximum value in the column.
    sum - Sums the column values.

     
    
new FancyGrid({
  ...,
  summary: true,
  columns: [{
    ...,
	summary: 'sum'
  },{

    Example: summary row position

    
new FancyGrid({
  ...,
  summary: {
    position: 'bottom'
  },
  columns: [{
    ...,
	summary: 'sum'
  },{

    Example: handler

    
new FancyGrid({
  ...,
  summary: {
    position: 'bottom'
  },
  columns: [{
    ...,
	summary: function(){
	  return 'Total'
	}
  },{

    Example: object

    
new FancyGrid({
  ...,
  summary: {
    position: 'bottom'
  },
  columns: [{
    ...,
	summary: {
	  type: 'count',
	  fn: function(value){
		return '' + value + '';
	  }
	}
  },{
    undefined

    title

    String

    Column header text.

     
    
title: 'Name',
    ''

    titleEditable

    Boolean

    Enables column title editing by double click on text.

     
    
title: 'Name',
titleEditable: true,
    false

    trackOver

    Boolean

    Enable column trackOver if selModel is column or columns.

     
    
sortable: true,
    true

    type

    String

    Column type.

     
    
type: 'string',
    'string'

    valueKey

    String

    It is used only for combo.
    The data value name by which to filter and get/edit data.

     
    
columns: [{
...
},{
  index: 'state',
  title: 'State',
  type: 'combo',
  width: 110,
  displayKey: 'text',
  valueKey: 'value',
  data: {
    proxy: {
      url: 'states.json'
    }
  }
...

states.json
{
  "data": [{
    "value": "",
    "text": ""
  },{
    "value": "AL",
    "text": "Alabama"
  },{
    "value": "AK",
    "text": "Alaska"
  },{
    "value": "AZ",
    "text": "Arizona"
  ...

    values

    Array

    values is used only for sparkline column types.

    From values will be generated cell values for sparkline of column.

    This property is not required if it is set index of data.

    The main purpose of this property is to auto generate column spark values from existed data.

     
    
values: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],

    vtype

    Mixed

    Validation.

     
    
},{
  index: 'age',
  title: 'Age',
  width: 50,
  type: 'number',
  vtype: {
    before: ['notempty', 'notnan'],
    type: 'range',
    min: 20,
    max: 70
  }
}]

    
},{
  index: 'email',
  title: 'Email',
  width: 150,
  vtype: 'email'
},{

    width

    Number

    Column width.

     
    
width: 100,