​

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

  var myData = [

    ['Accra', 'Ghana', 26],

    ['Addis Ababa', 'Ethiopia', 19],

    ['Adelaide', 'Australia', 19],

    ['Algiers', 'Algeria', 16],

    ['Almaty', 'Kazakhstan', -8],

    ['Amman', 'Jordan', 17],

    ['Amsterdam', 'Netherlands', 5],

    ['Anadyr', 'Russia', -16],

    ['Anchorage', 'United States', -7],

    ['Ankara', 'Turkey', 13],

    ['Asuncion', 'Paraguay', 25],

    ['Athens', 'Greece', 16],

    ['Atlanta', 'United States', 9],

    ['Auckland', 'New Zeland', 14],

    ['Bangkok', 'Thailand', 28],

    ['Barcelona', 'Spain', 15],

    ['Beijing', 'China', 1],

    ['Beirut', 'Lebanon', 22],

    ['Belgrade', 'Serbia', 4],

    ['Bengaluru', 'India', 28],

    ['Berlin', 'Germany', 3],

    ['Bogota', 'Colombia', 13],

    ['Boston', 'United States', 2],

    ['Brasilia', 'Brazil', 20],

    ['Brisbane', 'Australia', 23],

    ['Brussels', 'Brussels', 4],

    ['Bucharest', 'Romania', 5],

    ['Budapest', 'Hungary', 4],

    ['Buenos Aires', 'Argentina', 21],

    ['Cairo', 'Egypt', 23],

    ['Calgary', 'Canada', -2],

    ['Canberra', 'Australia', 12],

    ['Cape Town', 'Republic of South Africa', 25],

    ['Caracas', 'Venezuela', 29],

    ['Casablanca', 'Maroko', 20],

    ['Chicago', 'United States', 7],

    ['Copenhagen', 'Denmark', 2],

    ['Dallas', 'United States', 21],

    ['Dar es Salaam', 'Tanzania', 32],

    ['Darwin', 'Australia', 27],

    ['Denver', 'United States', 1],

    ['Detroit', 'United States', 6],

    ['Dhaka', 'Bangladesh', 23],

    ['Doha', 'Qatar', 25],

    ['Dubai', ' United Arab Emirates', 27],

    ['Dublin', 'Ireland', 7],

    ['Edmonton', 'Canada', -5],

    ['Frankfurt', 'Germany', 4],

    ['Guatemala City', 'Republic of Guatemala', 14],

    ['Halifax', 'Canada', 0],

    ['Hanoi', 'Vietnam', 18],

    ['Harare', 'Zimbabwe', 17],

    ['Havana', 'Cuba', 15],

    ['Helsinki', 'Finland', -2],

    ['Hong Kong', 'Hong Kong', 20],

    ['Honolulu', 'United States', 23],

    ['Houston', 'United States', 23],

    ['Indianapolis', 'United States', 9],

    ['Islamabad', 'Pakistan', 23],

    ['Istanbul', 'Turkey', 13],

    ['Jakarta', 'Republic of Indonesia', 29],

    ['Jerusalem', 'Israel', 25],

    ['Johannesburg', 'Republic of South Africa', 27],

    ['Karachi', 'Pakistan', 29],

    ['Kathmandu', 'Nepal', 15],

    ['Khartoum', 'Sudan', 34],

    ['Kingston', 'Australia', 24],

    ['Kinshasa', 'Democratic Republic of the Congo', 31],

    ['Kiritimati', 'Kiribati', 26],

    ['Kolkata', 'India', 25],

    ['Kuala Lumpur', 'Malaysia', 28],

    ['Kuwait City', 'Kuwait', 22],

    ['Kyiv', 'Ukraine', 1],

    ['La Paz', 'Bolivia', 9],

    ['Lagos', 'Nigeria', 34],

    ['Lahore', 'Pakistan', 25],

    ['Las Vegas', 'United States', 8],

    ['Lima', 'Peru', 19],

    ['Lisbon', 'Portugal', 16],

    ['London', 'England', 8],

    ['Los Angeles', 'United States', 9],

    ['Madrid', 'Spain', 13],

    ['Managua', 'Nicaragua', 23],

    ['Manila', 'Philippines', 28],

    ['Melbourne', 'Australia', 12],

    ['Mexico City', 'Mexico', 9],

    ['Miami', 'United States', 22],

    ['Minneapolis', 'United States', 11],

    ['Minsk', 'Belarus', -2],

    ['Montevideo', 'Uruguay', 20],

    ['Montreal', 'Canada', -1],

    ['Moscow', 'Russia', 1],

    ['Mumbai', 'India', 30],

    ['Nairobi', 'Kenya', 24],

    ['Nassau', 'Bahamas', 23],

    ['New Delhi', 'India', 24],

    ['New Orleans', 'United States', 18],

    ['New York', 'United States', 4],

    ['Oslo', 'Norway', 2],

    ['Ottawa', 'Canada', -1],

    ['Paris', 'France', 6],

    ['Perth', 'Australia', 19],

    ['Philadelphia', 'United States', 2],

    ['Phoenix', 'United States', 9],

    ['Prague', 'Czech', 1],

    ['Reykjavik', 'Island', 3],

    ['Rio de Janeiro', 'Brazil', 30],

    ['Riyadh', 'Saudi Arabia', 16],

    ['Rome', 'Italy', 13],

    ['Salt Lake City', 'United States', 1],

    ['San Francisco', 'United States', 11],

    ['San Juan', 'Philippines', 22],

    ['San Salvador', 'El Salvador', 19],

    ['Santiago', 'Philippines', 19],

    ['Santo Domingo', 'Dominican Republic', 21],

    ['São Paulo', 'Brazil', 27],

    ['Seattle', 'United States', 4],

    ['Seoul', 'South Korea', 0],

    ['Shanghai', 'China', 9],

    ['Singapore', 'Singapore', 29],

    ['Sofia', 'Bulgaria', 5],

    ['Stockholm', 'Sweden', 0],

    ['Suva', 'Fiji', 24],

    ['Sydney', 'Australia', 22],

    ['Taipei', 'Taiwan', 20],

    ['Tallinn', 'Estonia', -1],

    ['Tashkent', 'Uzbekistan', 1],

    ['Tegucigalpa', 'Honduras', 17],

    ['Tehran', 'Iran', 10],

    ['Tokyo', 'Japan', 10],

    ['Toronto', 'Canada', 4],

    ['Vancouver', 'Canada', 4],

    ['Vienna', 'Austria', 3],

    ['Warsaw', 'Poland', -1],

    ['Washington DC', 'United States', 3],

    ['Winnipeg', 'Canada', 1],

    ['Yangon', 'Myanmar', 28],

    ['Zagreb', 'Republic of Croatia', 6],

    ['Zürich', 'Switzerland', 2]

  ]

​

  var hot = new Handsontable(example1, {

    data: myData,

    colHeaders: ['City', 'Country', 'Temperature'],

    dropdownMenu: true,

    filters: true,

    stretchH: 'all',

    height: 300

  });

​

  var buttons = {

    string: document.getElementById('export-string'),

    file: document.getElementById('export-as-file')

  };

​

  var exportPlugin = hot.getPlugin('exportFile');

  var resultTextarea = document.getElementById('result');

​

  buttons.string.addEventListener('click', function() {

    resultTextarea.value = exportPlugin.exportAsString('csv', {

      columnHeaders: true, // default false, exports the column headers

      rowHeaders: true, // default false, exports the row headers

    });

  });

​

  buttons.file.addEventListener('click', function() {

    exportPlugin.downloadFile('csv', {

      columnHeaders: true, // default false, exports the column headers

      rowHeaders: true, // default false, exports the row headers

    });

  });

​

​

  //saving data using CTRL + B

  var lastKey;

  hot.updateSettings({

    afterDocumentKeyDown: function(e) {

      if (lastKey === 'Control' && e.key === 'b') {

        console.log('saving');

        exportPlugin.downloadFile('csv', {

          columnHeaders: true, // default false, exports the column headers

          rowHeaders: true, // default false, exports the row headers

        });

      }

      lastKey = e.key;

    }

  });

​

});

​