Docs
API
  • Columns

    Column types

    action, checkbox, date, combo, image, number, string, text, color,
    grossloss, progressbar, progressdonut, hbar,
    order, select,
    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']
    }
    
    

    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

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

    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,