is it possible to support i18n in table col title? maybe a demo ?

[016]

the vue3-datatable is very good, I am using it in my new project right now. but I have a question need ask, here is the thing, I need allow user change language in VUE app, which means the table col title need be translate like
{field:"s_id", title:t('ship.s_id') , isUnique: true, type: 'number' },
but the code will not do auto translate, I have to use watch to do it, which is working but not good, do u guys have a better way to support it? if the answer is yes, maybe write a new demo code?

again, thx for your great work!

[bhaveshpatel200]

Hi,

You can assign cols from mounted, so it will be reflected in table header.

[016]

@bhaveshpatel200 ok, I will try, thx for so quickly reply, nice day.

[016]

@bhaveshpatel200 it's not working after I remove cols set to onMounted, can u share me some demo code for how to do it? thx very much.

[bhaveshpatel200]

Hi,

Could you please provide full example, so i can get some idea.

[016]

@bhaveshpatel200 sure, here is my test code. thx for your support

//round 1. only show correct in first time, no update after locale changed (locale.value = lang;)
<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

const rawCols = ref([
  {field:"compare", title:t('common.label.compare')},
  ...
]);


<template>
<vue3-datatable
    :rows="[]"
    :columns="rawCols"
    ...

    skin="bh-table-striped bh-table-hover bh-table-bordered bh-table-compact"
>
</vue3-datatable>


//round 2. working after add watch

<script setup>
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

const rawCols = ref([
  {field:"compare", title:""},
  ...
]);

////Behavior
watch(locale, () => {
  // console.log('locale changed. need update title')
  updateTitle();
});

onMounted(async () => {
  ....

  updateTitle();
})

////Actions
const updateTitle = () => {
  rawCols.value.forEach(col => {
    col.title = t(col.titleCode); // update each title
  });
}


<template>
<vue3-datatable
    :rows="[]"
    :columns="rawCols"
    ...

    skin="bh-table-striped bh-table-hover bh-table-bordered bh-table-compact"
>
</vue3-datatable>

[bhaveshpatel200]

Hi,

I will check once get time.