datatables columns name translation
Hi im using metronic 8 for angular, when i define the various column is there a way to get them translated string for the language i choose?
this is how i define a single column in my code:
--------------------------------------
this.datatableConfig = {
serverSide: true,
processing: true,
ajax: (dataTablesParameters: any, callback) => {
.............. some code .................
}, columns. [
{
title: 'Supplier', data: 'supplier', render: function (data, type, row) {
return data.sup_name;
},
orderData: [2],
orderSequence: ['asc', 'desc'],
type: 'string',
}
]}
Replies (9)
Let us know if you still run into any issues.
Hi
You might be able to handle this by reloading the datatable when you change the language. This way, the headers will update according to the selected language.
In Angular, you could trigger a re-render by updating the datatable configuration or re-initializing it whenever a language change is detected.
Please check here on how to reload the datatable.
https://stackoverflow.com/a/58742900/1316921
You could also use an Angular observable to subscribe to language change events.
/src/app/_metronic/partials/layout/extras/dropdown-inner/user-inner/user-inner.component.ts
Thanks
thank you, yesterday i tried a similar solution and i was wandering if i was doing it the right way, thank you for confirming that
Hi
You can find an example of making the table columns translatable here:
https://gist.github.com/faizalmy/d64b9b3841c37ffb4a835af33992462d
Or are you referring specifically to translating the table headers?
Thanks
it works when the table is generated, but what do i have to do make to translate the table header when i change the language?
Hi
Could you let me know if you're using your own Angular project or Metronic v8 for Angular?
If you use Metronic v8, the TranslateService class is already included.
Thanks
im using metronic v8 angular project, i have the translate service, but i dont know how to implement the translation for the table column
Hi
To make your column titles translatable, you can use Angular's i18n translation service (ngx-translate already included) to dynamically set the title of each column based on the selected language.
Use TranslateService in your component to set the title. Update your column configuration to pull the title from your translations:
https://gist.github.com/faizalmy/d64b9b3841c37ffb4a835af33992462d
Check in folder /src/app/modules/i18n/vocabs.
Set up your translation files (like en.ts, fr.ts) with keys, for example:
{
"DATATABLE": {
"SUPPLIER": "Supplier"
}
}I have already set the key in the it.ts and the other file, the problem is that i give the title of the column in the ts configuration:
[
{
title: 'Supplier', data: 'supplier', render: function (data, type, row) {
return data.sup_name;
},
orderData: [2],
orderSequence: ['asc', 'desc'],
type: 'string',
}
]
i tried to implement the translate service by asking gpt, but it didnt work, what do i have to do add it in the ts?
