Handsontable example

by Camille Bechayda

HTML

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
<button id="export-file" class="intext-btn">Download CSV</button>

CSS

</style><!-- Ugly Hack due to jsFiddle issue -->

<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 container1 = document.getElementById('example1');
  var hot1 = new Handsontable(container1, {
    data: Handsontable.helper.createSpreadsheetData(7, 7),
    colHeaders: true,
    rowHeaders: true,
    hiddenRows: { rows: [1, 3, 5], indicators: true },
    hiddenColumns: { columns: [1, 3, 5], indicators: true }
  });
  var button1 = document.getElementById('export-file');
  var exportPlugin1 = hot1.getPlugin('exportFile');
  
  button1.addEventListener('click', function() {
    exportPlugin1.downloadFile('csv', {
      bom: false,
      columnDelimiter: ',',
      columnHeaders: false,
      exportHiddenColumns: true,
      exportHiddenRows: true,
      fileExtension: 'csv',
      filename: 'Handsontable-CSV-file_[YYYY]-[MM]-[DD]',
      mimeType: 'text/csv',
      rowDelimiter: '\r\n',
      rowHeaders: true
    });
  });