sample1 / fatigues headers

In this example below you will see how to do a sample1 / fatigues headers with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 69356b, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 69356b ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>sample1 / fatigues headers</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://docs.handsontable.com/pro/1.10.2/bower_components/handsontable-pro/dist/handsontable.full.css'>

  
  
</head>

<body>

  <div ng-app="app" ng-cloak ng-controller="AppCtrl as ctrl" class="container">
  <h2>baseHeaders から nestedHeaders を作る</h2>
  <hot-table settings="ctrl.settings" datarows="ctrl.bs"></hot-table>
  <pre>{{ctrl.nestedHeaders|json}}</pre>
</div>
  <script src='https://docs.handsontable.com/pro/1.10.2/bower_components/handsontable-pro/dist/handsontable.full.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js'></script>
<script src='https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/69356b/sample1-fatigues-headers-YVvERX */
angular.module('app', ['ngHandsontable'])
.controller('AppCtrl', function($scope) {
  var ctrl = this;
  var baseHeaders = Handsontable.helper.createSpreadsheetData(3, 3);
  
  var nestedHeaders = ctrl.nestedHeaders = [].concat(baseHeaders).map(function(baseHeader) {
    return baseHeader.concat(baseHeader);
  });
  
  ctrl.settings = {
    rowHeaders: true,
    colHeaders: true,
    nestedHeaders: nestedHeaders,
  };
  ctrl.bs = Handsontable.helper.createSpreadsheetData(1, 6);
})

Comments