Hide/show columns over API

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 0px 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

const 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({
    tbar: [{
      type: 'segbutton',
      multiToggle: true,
      items: [{
        text: 'Month',
        pressed: true
      }, {
        text: 'Quarter',
        pressed: true
      }, {
        text: 'Annual',
        pressed: true
      }],
      events: [{
        toggle: function(segbutton, button, value, values) {
          if (values[0] === false) {
            grid.hideColumn(['year2015[0]', 'year2015[1]', 'year2015[2]', 'year2015[3]', 'year2015[4]', 'year2015[5]', 'year2015[6]',
              'year2015[7]', 'year2015[8]', 'year2015[9]', 'year2015[10]', 'year2015[11]'
            ]);
          } else {
            grid.showColumn(['year2015[0]', 'year2015[1]', 'year2015[2]', 'year2015[3]', 'year2015[4]', 'year2015[5]', 'year2015[6]',
              'year2015[7]', 'year2015[8]', 'year2015[9]', 'year2015[10]', 'year2015[11]'
            ]);
          }

          if (values[1] === false) {
            grid.hideColumn(['2015-q1', '2015-q2', '2015-q3', '2015-q4']);
          } else {
            grid.showColumn(['2015-q1', '2015-q2', '2015-q3', '2015-q4']);
          }

          if (values[2] === false) {
            grid.hideColumn('2015');
          } else {
            grid.showColumn('2015');
          }
        }
      }]
    }],
    width: 700,
    height: 500,
    renderTo: 'container',
    theme: 'extra-gray',
    trackOver: true,
    selModel: {
      type: 'row',
      activeCell: true
    },
    data: {
      items: data
    },
    defaults: {
      type: 'number',
      width: 85,
      resizable: true,
      //sortable: true
    },
    cellStylingCls: ['low-value', 'high-value'],
    //columnLines: false,
    columns: [{
      locked: true,
      type:...