Docs
API
  • grossloss

    Gross Loss column type

    Gross Loss is part of FancyGrid spark module.
    To config this spark use sparkConfig param.

    Example

    
    columns: [{
    ...
    },{
      title: 'Gross/Loss',
      index: 'change',
      type: 'grossloss',
      width: 75,
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      rightLocked: true
    },{
    ...
    

    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

    draggable

    Boolean

    Allows column to be dragged.

    
    draggable: 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
    }]
    

    hidden

    Boolean

    Hide column on start.

    
    {
      index: 'married',
      resizable: true,
      type: 'checkbox',
      title: 'Married',
      width: 100,
      hidden: true
    }
    
    false

    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

    Boolean

    Enables column menu.

    
    menu: true,
    
    false

    minWidth

    Number

    The minimum width of column.

    
    minWidth: 80,
    

    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

    sparkConfig

    Object

    Spark config of module.

    
    sparkConfig: {
    	grossColor: '#6fb270',
    	lossColor: '#dc6b67',
    	showOnMax: true,
    	percents: true
    },
    

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

    type

    String

    Column type.

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

    width

    Number

    column width.

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

    sparkConfig

    grossColor

    String

    Gross spark color.

    
    {
      ...
      type: 'grossloss',
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      ...
    }
    

    lossColor

    String

    Loss spark color.

    
    {
      ...
      type: 'grossloss',
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      ...
    }
    

    percents

    Boolean

    Enables percents mode.

    It used for adding sign % in tooltip.

    
    {
      ...
      type: 'grossloss',
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      ...
    }
    
    false

    showOnMax

    Boolean

    Change default maximum value from 100 to max value of column in data.

    
    {
      ...
      type: 'grossloss',
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      ...
    }
    
    false

    tipFormat

    Function

    ToolTip format function

    
    {
      width: 550,
      type: 'hbar',
      index: ['toyota', 'gm', 'vw', 'ford', 'hyundai'],
      sparkConfig: {
        fullStack: true,
        stacked: true,
        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'
          }
        }
      }
    }
    

    tipTpl

    String

    Change tooltip template.

    
    {
      ...
      type: 'grossloss',
      sparkConfig: {
        grossColor: '#6fb270',
        lossColor: '#dc6b67',
        showOnMax: true,
        percents: true
      },
      tipTpl: 'Value: {value} %'
      ...
    }
    
    '<span style="color: {color};">●</span> {value} {suffix}'