Add localization to vue-tables2 table

Question

Here is a similar example of table that I have in my project.

My project is a multilingual website so I would like to have vue-table also translated to the language user currently uses. What I want to be translated is only the table elements not the actual data inside the table. For instance in the example string 'records' should be translated to the users language. Also text 'Showing 1 to 10 of 50 records' under the pagination should be translated.

.

Example code:

Vue.use(VueTables.ClientTable);
new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'uri'],
    data: getData(),
    options: {
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        uri: 'View Record'
      },
      sortable: ['name', 'code'],
      filterable: ['name', 'code']
    }
  }
});

And HTML:

<div id="app">
  <v-client-table :columns="columns" :data="data" :options="options">
    <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>

    <div slot="child_row" slot-scope="props">
      The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
    </div>

  </v-client-table>
</div>

If anyone have any clue how I should do this I would be grateful.

Answer 1

In the documentation there is the "texts" option which refers to the "texts" option within this file.

So, in your data, you can simply add the texts parameter and edit them:

new Vue({
    el: "#app",
    data: {
        columns: ['name', 'code', 'uri'],
        data: getData(),
        options: {
            headings: {
                name: 'Country Name',
                code: 'Country Code',
                uri: 'View Record'
            },
            sortable: ['name', 'code'],
            filterable: ['name', 'code'],
            // EDITABLE TEXT OPTIONS:
            texts: {
                count: "Showing {from} to {to} of {count} records|{count} records|One record",
                first: 'First',
                last: 'Last',
                filter: "Filter:",
                filterPlaceholder: "Search query",
                limit: "Records:",
                page: "Page:",
                noResults: "No matching records",
                filterBy: "Filter by {column}",
                loading: 'Loading...',
                defaultOption: 'Select {column}',
                columns: 'Columns'
            },
        }
    }
});