javascript - Add localization to vue-tables2 table - Stack Overflow

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.

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.

• javascript
• vue.js
• vue-tables-2

Share Improve this question Follow asked Jun 20, 2018 at 7:59 NahkaNahka 42611 gold badge66 silver badges1616 bronze badges 1

• If you need anything else, you can lookup in the plugin repository: github./matfish2/vue-tables-2 – All Pereira Commented Nov 19, 2019 at 12:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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'
            },
        }
    }
});