Topic: datatable column header language

ozgehan premium asked 4 years ago


I have a page with multi-language. I use i18n and when I change the language of the page search, palceholder, inputs etc. all labels are changing in datatable and also in page except for column headers. I can't understand why can't I change column header names when I change language.


Magdalena Dembna staff commented 4 years ago

I haven't been using i18n before so I'm not sure how it works exactly. I think the problem might be the following: changes in the rows are being watched and every time a change is made, the datatable component triggers reload. Columns are assumed to be more static. Inspect the Datatable in your Vue dev tools - check the data field in props and whether it contains translated values. If so, you can try forcing component to update (f.e with key, there are several ways to do it). Let me know if that's the case. Kind regards, Magdalena

ozgehan premium commented 4 years ago

Hi Magdalena, I inspected the data field but column names didn't translated by i18. but other properties of datatable such as searchbox,page names (Next,Previous) are changed. I also have noticed that page number combobox has " select an option label " which I can't find option to customize it .

Magdalena Dembna staff commented 4 years ago

If the data hasn't been changed in the component's data field, it's not an issue with lack of reactivity but i18 itself - and I don't think I can help you with that. Once the data is being translated and our component doesn't update those fields it is an issue with MDB. As for select an option - it's a mistake on our end, due to changes in the mdbSelect - it shouldn't be there, we will fix this issue in the upcoming release. Kind regards, Magdalena

ozgehan premium answered 4 years ago

Hi Magdalena,

I did manage to change translation on column headers. You were right i18n can't reach nested objects so I did add langKey to column

    label: this.$t("Block"),
    field: "blockNo",
    sort: "asc",
    langKey: "Block"

and listened language selection change event then I manually changed column headers language by doing

changeLanguage(key) {
  return this.$t(key.toString());

Maybe this will help if someone has issue with that.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.0.0
  • Device: computer
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No