Handsontable Nested Header

by jagjeet_rib

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

</style><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script><link type="text/css"rel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">

JavaScript

var example1 = document.getElementById('example1');

  var hot = new Handsontable(example1, {
    // data: Handsontable.helper.createSpreadsheetData(5, 10),
    data: [[
      "Cameras",
      "AU-34",
      "BE-28",
      "CA-31",
      "NT-37",
      "UK-25",
      "US-32"
    ]],
    colHeaders: true,
    rowHeaders: true,
    dropdownMenu: true,
    hiddenColumns: {
      columns: [1],
      indicators: true,
      copyPasteEnabled: true
    },
    manualColumnMove: [ 2, 4, 0, 1, 3, 5, 6 ],
    nestedHeaders: [
      [
        {
          "label": "Country",
          "colspan": 2,
          "id": "c716",
        },
        {
          "label": "",
          "colspan": 1,
          "id": "c715",
        },
        {
          "label": "Country",
          "colspan": 4,
          "id": "c716",
        }
      ],
      [
        "Belgium",
        "Netherlands",
        "Product_Category",
        "",
        "Canada",
        "United Kingdom",
        "United States"
      ]
    ],
  });