Docs
API
  • string

    Color column type

    Example

    
    columns: [{
    ...
    },{
      title: 'Color',
      index: 'color',
      type: 'color',
      cls: 'color-column',
      rightLocked: true,
      sortable: false,
      width: 60
    },{
    ...
    

    align

    String

    Column header cell align.

    
    ...
    columns: [{
      type: 'image',
      title: 'Photo',
      index: 'src',
      width: 80,
      align: '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.

    
    .color-column .fancy-grid-cell-inner div {
      margin-left: 9px;
    }
    ...
    columns: [{
      title: 'Color',
      index: 'color',
      type: 'color',
      cls: 'color-column',
      rightLocked: true,
      sortable: false,
      width: 60
    },{
    ...
    

    editable

    Boolean

    Enable column editing.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name',
      editable: true
    }
    
    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
    }]
    

    index

    String|Number

    Data index.

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

    locked

    Boolean

    Locking column.

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

    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

    sortable

    Boolean

    Enable column sorting.

    
    sortable: true,
    
    False

    title

    String

    Column title.

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

    type

    String

    Column type.

    
    {
      title: 'Color',
      index: 'color',
      type: 'color',
      cls: 'color-column',
      rightLocked: true,
      sortable: false,
      width: 60
    }
    

    width

    Number

    column width.

    
    {
      title: 'Color',
      index: 'color',
      type: 'color',
      cls: 'color-column',
      rightLocked: true,
      sortable: false,
      width: 60
    }