Column Header cells classnames

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div id="container" style="width: 100%; height: calc(100% - 80px);"></div>

CSS

.column-cls-sales-model-name .fancy-grid-cell {
  background: #626262  !important;
  border-right-color: #626262;
}

.column-cls-sales-model-name .fancy-grid-cell-inner {
  color: #FFF;
  font: 12px/20px Arial;
  margin-top: 6px;
}

body {
  background: #f9f9f9;
}

.fancy-theme-gray.fancy-panel .fancy-panel-header {
  background-color: white;
  color: gray;
  text-align: center;
  font-weight: bold;
  font-size: 17px;
}

.header-cell-gross-loss {
  border-bottom: 4px solid #6fb270 !important;
}

.header-cell-dynamics {
  border-bottom: 4px solid #44A4D3 !important;
}

.fancy-theme-gray .fancy-grid-header-cell {
  background: #eef1f5 !important;
}

.header-cell-total {
  border-bottom: 4px solid #057aff !important;
}

.header-cell-country {
  border-bottom: 4px solid #f60990 !important;
}

.header-cell-total .fancy-grid-header-cell-text {
  background-color: white !important;
  border: 1px solid #d5dadb;
  border-radius: 12px;
  padding: 1px 7px 1px 7px;
  color: #057aff !important;
}

.column-quater .fancy-grid-cell {
  background-color: rgb(5, 122, 255, 0.1) !important;
}

.header-cell-quater .fancy-grid-cell {
  border-bottom: 4px solid #057aff !important;
}

.header-cell-quater .fancy-grid-header-cell-text {
  background-color: white !important;
  border: 1px solid #d5dadb;
  border-radius: 12px;
  padding: 1px 7px 1px 7px;
  color: #057aff !important;
}

.fancy-grid {
  border-top: 1px solid #d3dbe1 !important;
}

.low-value {
  background-color: rgba(242, 83, 83, 0.3) !important
}

.high-value {
  background-color: rgba(61, 173, 130, 0.4) !important;  
}

JavaScript

function monthRender(o) {
  var value = parseInt(o.value.replace(',', ''));

  if (value < 1000) {
    o.cls = 'low-value';
  } else if (value > 250000) {
    o.cls = 'high-value';
  }

  return o;
}

document.addEventListener("DOMContentLoaded", () => {
  const grid = new FancyGrid({
    renderTo: 'container',
    theme: 'extra-gray',
    width: 850,
    height: 500,    
    trackOver: true,
    selModel: {
      type: 'row',
      activeCell: true
    },
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 85,
      draggable: true,
      resizable: true,
      sortable: true
    },
    cellStylingCls: ['low-value', 'high-value'],
    //columnLines: false,
    columns: [{
      locked: true,
      type: 'order',
      resizable: false
    },{
      title: 'Country',
      index: 'country',
      type: 'string',
      sortable: true,
      locked: true,
      headerCls: 'header-cell-country',
      width: 80
    },{
      title: 'Q1 2015',
      headerCls: 'header-cell-quater',
      id: '2015-q1',
      columns: [{
        title: 'January',
        index: 'year2015[0]',
        format: 'number',
        render: monthRender
      },{
        title: 'February',
        index: 'year2015[1]',      
        render: monthRender,
        format: 'number'
      },{
        title: 'March',
        index: 'year2015[2]',
        render: monthRender,
        format: 'number'
      }]
    },{
      title: 'Q2 2015',
      id: '2015-q2',
      headerCls: 'header-cell-quater',
      columns: [{
        title: 'April',
        index: 'year2015[3]',
        render: monthRender,
        format: 'number'
      },{
        title: 'May',
        index: 'year2015[4]',
        render: monthRender,
        format: 'number'
      },{
        title: 'June',
        index: 'year2015[5]',
        render: monthRender,
        format: 'number'
      }]
    },{
      title: 'Q3 2015',
      id: '2015-q3',
      headerCls: 'header-cell-quater',
     ...