DataGridXL » Docs

Column Settings

Column Style Function

Performance First

Performance is one of our product's USPs (Unique Selling Point).

DataGridXL comes with a "Curated Virtual DOM" that makes this exceptional render performance possible.

To really make the performance shine, we had to make some tough decisions: no HTML markup in cells.

Style Function

Still, each column can be supplied with a styleFunction. At this moment, only the backgroundColor can be changed on a per-cell basis.

const grid = new DataGridXL("grid", {
  columns: [{
    title: "Internet Speed (Mbps)",
    source: "internet_speed",
    styleFunction: function(cell){

      const cellStyle = {};

      if(cell.value < 0.5){
          cellStyle.backgroundColor: '#ff0000';
      } else {
          cellStyle.backgroundColor: '#00ff00';
      }

      return cellStyle;

    }
  }]
});

By defining a styleFunction, you can make a "heatmap"-style column where the cell background color tells the user something about its value.

More style options

When the CSS Custom Highlight API releases in all browsers (waiting on Firefox), you will also be able to change text colors on a per-cell basis.