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.