Column Header Styling

Column Header ClassNames and Styling Titles

by FancyGrid Inc.

HTML

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

<div id="container"></div>

<div style="margin-top: 10px;">
</div>

CSS

.id-column-cls .fancy-grid-cell-inner {
  margin-left: 14px;
  font-size: 14px;
}

.id-column-cls .fancy-grid-cell {
  border-right-width: 1px;
  border-right-color: rgb(211, 219, 225);
  background-color: rgb(240, 242, 244);
  background: #ececec !important;
  border-color: #ccc;
}

.fancy-grid-cell {
  line-height: 20px;
}

.fancy-grid-cell-even {
  background-color: #F9F9F9;
}

.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 !important;
  color: gray !important;
  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: 2px 7px 2px 7px;
  color: #057aff !important;
}

.fancy-grid-header-cell {
  line-height: 20px;
}

.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: 2px 7px 2px 7px;
  color: #057aff !important;
}

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

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  new FancyGrid({
     title: 'Europe Car Sales by Countries 2015',
    gridBorders: [1, 0, 1, 0],
    renderTo: 'container',
    theme: 'gray',
    width: 850,
    height: 500,    
    cellHeaderHeight: 40,
    cellHeight: 40,
    barHeight: 40,
    trackOver: true,
    selModel: {
      type: 'row',
      activeCell: true
    },
    textSelection: true,
    nativeScroller: true,
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 85,
      resizable: true,
      //sortable: true
    },
    footer: {
      status: '<span style="position: relative;top: 3px;">*</span> - Only PC, without LCV, LBC',
      source: {
        text: "European Automobile Manufacturers' Association",
        link: 'acea.be'
      }
    },
    columns: [{
      title: ' ',
      index: 'id',
      width: 40,
	  locked: true,
      cls: 'id-column-cls',
      resizable: false
    },{
      title: 'Country',
      index: 'country',
      type: 'string',
	  locked: true,
	  headerCls: 'header-cell-country',
      width: 80
    },{
      title: 'January',
      index: 'year2015[0]',      
      format: 'number'
    },{
      title: 'February',
      index: 'year2015[1]',      
      format: 'number'
    },{
      title: 'March',
      index: 'year2015[2]',
      format: 'number'
	},{
      title: 'Q1 2015',
	  headerCls: 'header-cell-quater',
	  cls: 'column-quater',
      index: 'year2015[0] + year2015[1] + year2015[2]',
      format: 'number'
    },{
      title: 'April',
      index: 'year2015[3]',
      format: 'number'
    },{
      title: 'May',
      index: 'year2015[4]',
      format: 'number'
    },{
      title: 'June',
      index: 'year2015[5]',
      format: 'number'
	},{
      title: 'Q2 2015',
	  headerCls: 'header-cell-quater',
	  cls: 'column-quater',
      index: 'year2015[3] + year2015[4] + year2015[5]',
      format: 'number'
    },{
      title: 'July',
      index: 'year2015[6]',
   ...