← Back to Features

Locale & Internationalization

Click a button to switch the UI language. Locale files are loaded from the CDN on demand.

🎯 Live Demo

💻 Implementation Code

locale-example.html 
<!DOCTYPE html>
<html>
<head>
  <title>WebPivotTable Localization</title>
  <script src="https://cdn.webpivottable.com/wpt/latest/wpt.js"></script>
</head>
<body>
  <h1>Internationalization Demo</h1>

  <!-- Language Selector -->
  <div class="controls">
    <button onclick="setLocale('en')">English</button>
    <button onclick="setLocale('zh')">中文</button>
    <button onclick="setLocale('de')">Deutsch</button>
    <button onclick="setLocale('fr')">Français</button>
    <button onclick="setLocale('es')">Español</button>
    <button onclick="setLocale('ja')">日本語</button>
    <button onclick="setLocale('ko')">한국어</button>
    <button onclick="setLocale('pt')">Português</button>
    <button onclick="setLocale('it')">Italiano</button>
    <button onclick="setLocale('tr')">Türkçe</button>
  </div>

  <web-pivot-table id="wpt" style="width:100%;height:600px"></web-pivot-table>

  <script>
    const wpt = document.getElementById('wpt')

    // Set locale programmatically
    async function setLocale(code) {
      try {
        await wpt.setLocale(code)
        console.log(`Locale changed to: ${code}`)
        updateActiveButton(code)
      } catch (error) {
        console.error('Failed to load locale:', error)
      }
    }

    // Update active button visual feedback
    function updateActiveButton(code) {
      document.querySelectorAll('.controls button').forEach(btn => {
        btn.classList.remove('active')
      })
      const activeBtn = document.querySelector(`button[onclick="setLocale('${code}')"]`)
      if (activeBtn) activeBtn.classList.add('active')
    }

    // Optional: auto-detect browser language
    function setAutoLocale() {
      const browserLang = navigator.language.split('-')[0]
      const supported = ['en', 'zh', 'de', 'fr', 'es', 'ja', 'ko', 'pt', 'it', 'tr']
      setLocale(supported.includes(browserLang) ? browserLang : 'en')
    }

    // Load data
    wpt.setWptFromCsvUrl('https://cdn.webpivottable.com/samples/sales.csv')
  </script>
</body>
</html>

📋 Usage Notes