JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<link
  href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css"
  rel="stylesheet"
/>
<script
  type="text/javascript"
  src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"
></script>
<div>
  <button id="lang-french">French</button>
  <button id="lang-german">German</button>
  <button id="lang-japan">Japan</button>
  <button id="lang-default">Default (English)</button>
</div>

<div id="example-table"></div>

JavaScript

//Build Tabulator
var tabledata = [
  {
    id: 1,
    name: 'Oli Bob',
    progress: 12,
    gender: 'male',
    rating: 1,
    col: 'red',
  },
  {
    id: 2,
    name: 'Mary May',
    progress: 1,
    gender: 'female',
    rating: 2,
    col: 'blue',
  },
  {
    id: 3,
    name: 'Christine Lobowski',
    progress: 42,
    gender: 'female',
    rating: 0,
    col: 'green',
  },
  {
    id: 4,
    name: 'Brendon Philips',
    progress: 100,
    gender: 'male',
    rating: 1,
    col: 'orange',
  },
  {
    id: 5,
    name: 'Margret Marmajuke',
    progress: 16,
    gender: 'female',
    rating: 5,
    col: 'yellow',
  },
];

//Build Tabulator
var table = new Tabulator('#example-table', {
  data: tabledata,
  height: '311px',
  layout: 'fitColumns',
  pagination: 'local',
  langs: {
    'fr-fr': {
      //French language definition
      columns: {
        name: 'Nom',
        progress: 'Progression',
        gender: 'Genre',
        rating: 'Évaluation',
        col: 'Couleur',
        dob: 'Date de Naissance',
      },
      pagination: {
        first: 'Premier',
        first_title: 'Première Page',
        last: 'Dernier',
        last_title: 'Dernière Page',
        prev: 'Précédent',
        prev_title: 'Page Précédente',
        next: 'Suivant',
        next_title: 'Page Suivante',
        all: 'Toute',
      },
    },
    'de-de': {
      //German language definition
      columns: {
        name: 'Name',
        progress: 'Fortschritt',
        gender: 'Genre',
        rating: 'Geschlecht',
        col: 'Farbe',
        dob: 'Geburtsdatum',
      },
      pagination: {
        first: 'Erste',
        first_title: 'Erste Seite',
        last: 'Letzte',
        last_title: 'Letzte Seite',
        prev: 'Vorige',
        prev_title: 'Vorige Seite',
        next: 'Nächste',
        next_title: 'Nächste Seite',
        all: 'Alle',
      },
    },
    'ja-jp': {
...