Language change example

  
    
      
An implementation of the @handsontable/vue component with an option to change the Context Menu language.

Select a language from the selector above the table and open the Context Menu to see the result.


      Note, that the language property is bound to the component separately (by using :language="language"), but it could be
      included in the :settings prop just as well.
    
    
      
Select language: 



      
    
    
      
Select language: 



      
    

import Vue from 'vue'; import { HotTable } from '@handsontable/vue'; import Handsontable from 'handsontable'; new Vue({ el: '#example1', data: function() { return { hotSettings: { data: Handsontable.helper.createSpreadsheetData(5, 10), colHeaders: true, rowHeaders: true, contextMenu: true }, language: 'en-US' } }, mounted: function() { this.getAllLanguageOptions(); }, methods: { getAllLanguageOptions: function() { const allDictionaries = Handsontable.languages.getLanguagesDictionaries(); const langSelect = document.querySelector('#languages'); langSelect.innerHTML = ''; for (let language of allDictionaries) { langSelect.innerHTML += `${language.languageCode}` } }, updateHotLanguage: function(event) { this.language = event.target.value; } }, components: { HotTable } });

Edit this page