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

    columnMenu

    Boolean

    Enable/disable column for menu.

     
    
columns: [{
  title: 'Company',
  index: 'name',
  columnMenu: false,
  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
}]
...
    undefined

    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

    Mixed

    Enables column menu.

     
    
menu: true,

    Example: Custom Default menu

     
    
menu: ['sort', '-', 'columns', '-', 'lock'],

    Example: Custom menu

     
    
menu: ['columns', '-', {
  text: 'Hi',
  handler: function(){
	alert('Hi');
  }
}],

    Example: One menu with columns only

     
    
menu: 'columns',
    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'
}
    ''

    titleEditable

    String

    Enables column title editing by double click on text.

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

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