Docs
API

Columns

Column types

action, checkbox, color, combo, currency, date, image, number, 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'
  }
}

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

expand

Enables row expanding element for column.

 

{  
  type: 'expand',
  locked: true
}

hbar

Complex horizontal bar chart column type.
HBar is part of FancyGrid spark module.
To config this spark use sparkConfig param. 


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

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

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

currency

String

This option is available only for 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

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

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

hidden

Boolean

Hide column on start.

 

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

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

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

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,
`