Check out this table example from my project.
I am working on a multilingual website and I want the vue-table elements to be translated based on the user's language preference. Only the table elements need to be translated, not the actual data inside the table. For example, the word 'records' should be translated to the user's language. Additionally, the text 'Showing 1 to 10 of 50 records' under the pagination section should also be translated.
https://i.sstatic.net/yd1ay.png.
Here is an example of the 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 here is the HTML structure:
<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 you have any insights on how to achieve this translation process, please share!