Docs
API
  • checkbox

    Checkbox column type

    Example

    
    columns: [{
    ...
    },{
      index: 'married',
      title: 'Married',
      type: 'checkbox'
    },{
    ...
    

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

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

    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

    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

    sortable

    Boolean

    Enable column sorting.

    
    sortable: true,
    
    False

    title

    String

    Column title.

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

    type

    String

    Column type.

    
    {
      index: 'married',
      title: 'Married',
      type: 'checkbox'
    }
    

    width

    Number

    column width.

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