Question

Essentially what I want to do is to apply additional CSS classes to individual cells in a data grid based on the value of the cell. An example would be to color the text red when a dollar value is negative.

The only solution I've found was to use the formatter of the column to create a string for a span that has the class based on the value passed in. I figure there has to be a better way.

Was it helpful?

Solution

When specifying the structure, you pass in an object that represents the widget configuration for a given column. As part of this object, include a formatter function in the definition:

{
...
 formatter: function(val, rowIdx, cell) {
    classes = compute_classes(val, rowIdx, cell);
    cell.customClasses.push(classes);
  }
}

however your 'compute_classes' computes the classes to use is up to you. They will be applied to the cell, and then you can manage their appearance in your CSS.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top