Docs
API

    • number

    Number column type

    Example

    
columns: [{
...
  index: 'age',
  title: 'Age',
  type: 'number'
...

    align

    String

    Column header cell align.

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

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

    draggable

    Boolean

    Allows column to be dragged.

     
    
draggable: true,
    false

    editable

    Boolean

    Enable column editing.

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

    ellipsis

    Boolean

    Enable ellipsis for overflowed text.

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

    exportable

    Boolean

    Enable ellipsis for overflowed text.

     
    
...
columns: [{
  type: 'string',
  title: 'Name',
  index: 'name',
  width: 80,
  exportFn: function(o){
    o.value = o.data.name + ' ' + o.data.surname;
    
	return o;
  }
},{
  index: 'surname',
  exportable: false,
  title: 'Sur Name'
},{
...
    false

    exportFn

    Function

    Handler for getting custom export value.

     
    
...
columns: [{
  type: 'string',
  title: 'Name',
  index: 'name',
  width: 80,
  exportFn: function(o){
    o.value = o.data.name + ' ' + o.data.surname;
    
	return o;
  }
},{
  index: 'surname',
  exportable: false,
  title: 'Sur Name'
},{
...
    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
}]

    format

    Mixed

    Formatting.

     
    
{
  type: 'number',
  width: 65,
  title: 'amount',
  index: 'amount',
  format: 'number'
}

    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

    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

    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,

    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

    Column 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;
}

    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

    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

    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

    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:
    average - Gets the average value in the column.
    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 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: 'checkbox'
}

    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.

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