Columns

Column types

action, checkbox, date, combo, image, number, string, text, color,
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.


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

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} %'
  }
}

select

Select column. It enables checkbox row selection.


{
  type: 'select',
  locked: true
}

string

String

string column type.


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

text

String

text column type.


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

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 },
  ...
];

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

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

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

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

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

locked

Boolean

Locking column.


locked: true,
false

menu

Boolean

Enables column menu.


menu: true,
false

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

selectable

Boolean

Enable column selection if selModel is column or columns.


selectable: true,
true

sortable

Boolean

Enable column sorting.


sortable: true,
false

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

title

String

Column header text.


title: 'Name',
''

trackOver

Boolean

Enable column trackOver if selModel is column or columns.


sortable: true,
true

type

String

Column type.


type: 'string',
'string'

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,