<div class="container-fluid">
  <div id="theGrid"></div>
  <div style="display:none">
    <div id="theColumnPicker" class="column-picker"></div>
  </div>

  <button id="btnSave" class="btn btn-default">
    레이아웃 저장
  </button>
  <button id="btnRestore" class="btn btn-default">
    레이아웃 복원
  </button>
</div>
.wj-flexgrid {
    max-height: 300px;
    margin: 10px 0;
}

.column-picker {
    columns: 3;
    padding: 12px;
    margin-left: 12px;
    margin-top: 26px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* #372131 (Chrome) */
.column-picker .wj-listbox-item {
    break-inside: avoid;
}

.column-picker-icon {
    cursor: pointer;
    color: #FF8754;
    margin: 3px;
}


body {
  margin: 20px;
  font-family: 'S-CoreDream-3Light';
}

.wj-flexgrid {
  max-height: 300px;
  width:auto;
}

.wj-flexgrid .wj-header {
  background-color: #4FC3F7;
  color:white;
  font-weight:bold;
}

.wj-cells .wj-cell.wj-state-selected{
  background: #4DD0E1;
}

.btn {
  background-image: none;
  color:black;
  font-weight:bold;
  background-color:#FFD56C;
  border:none;
 text-shadow:none;
  margin:10px;
}
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
  // 그리드 생성
  let theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
    formatItem: (sender, e) => {
      if (e.panel == sender.topLeftCells) {
        e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
      }
    }
  });
  //
  // column picker 생성
  let theColumnPicker = new wijmo.input.ListBox('#theColumnPicker', {
    itemsSource: theGrid.columns,
    checkedMemberPath: 'visible',
    displayMemberPath: 'header',
    lostFocus: () => wijmo.hidePopup(theColumnPicker.hostElement)
  });
  //
  // 사용자가 왼쪽 상단 셀을 누를 때 열 선택기 표시
  let ref = theGrid.hostElement.querySelector('.wj-topleft');
  ref.addEventListener('mousedown', e => {
    if (wijmo.hasClass(e.target, 'column-picker-icon')) {
      wijmo.showPopup(theColumnPicker.hostElement, ref, false, true, false);
      theColumnPicker.focus();
      e.preventDefault();
    }
  });
  //
  // 레이아웃 저장/복원 버튼
  document.querySelector('#btnSave').addEventListener('click', () => {
    localStorage.setItem('myLayout', theGrid.columnLayout);
  });
  //
  document.querySelector('#btnRestore').addEventListener('click', () => {
    let layout = localStorage.getItem('myLayout');
    if (layout) {
      theGrid.columnLayout = layout;
    }
  });
}


function getData() {
  // 랜덤 데이터 생성
  let data = [], countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], products = ['Widget', 'Sprocket', 'Gadget', 'Doohickey'], colors = ['Black', 'White', 'Red', 'Green', 'Blue'], dt = new Date();
  //
  for (let i = 0; i < 100; i++) {
    let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length);
    //
    data.push({
      id: i,
      start: date,
      end: date,
      country: countries[countryId],
      product: products[productId],
      color: colors[colorId],
      countryId: countryId,
      productId: productId,
      colorId: colorId,
      amount1: Math.random() * 10000 - 5000,
      amount2: Math.random() * 10000 - 5000,
      amount3: Math.random() * 10000 - 5000,
      amount4: Math.random() * 10000 - 5000,
      amount5: Math.random() * 10000 - 5000,
      discount: Math.random() / 4,
      active: i % 4 == 0
    });
  }
  //
  return data;
}

External CSS

  1. https://cdn.grapecity.com/wijmo/5.20211.781/styles/wijmo.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css
  3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.min.js
  2. https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.grid.min.js
  3. https://cdn.grapecity.com/wijmo/5.20211.781/controls/wijmo.input.min.js
  4. https://www.grapecity.co.kr/files/license/Wijmo/CodePen_License.js