Need help with Data Table internationalization.

[fitimbytyqi]

Hello, I have a case where I need to translate table headers based on the language selected.

Currently I'm using this approach.

1. I'm converting my columns.tsx to a function instead.

2. After that, I pass the whole function as a prop to Data Table (because we cannot call functions in server components) like so:
   ps. This part is where I'm not sure if I'm doing it right performance wise.

3. I call it inside the data table component and pass the translations as prop like so:

I also recently found this new idea #409 (comment)

Which one is a better approach ?

Thanks a lot for your time.

[TheDevick]

Hello!

So, I know this issue was opened almost a year ago, but I'm facing the same issue as you.

Then I wanted to ask, what happened? Did you find a solution?

Thanks!

[fitimbytyqi]

Hey, I continued to use the approach I've highlighted above, but the way with metadata (the issue added above) should work too.

[sidimed-bahan]

Hi,

I know this issue was opened almost a year ago, and I am facing the same problem. However, the solution provided did not work for me, so I came up with a simpler alternative using next-intl. Here’s what I did:

1. In the en.json file (your messages file), I defined the header like this:
   {"clientName": "Client Name"}
   2 . In the column.tsx file, when defining the headers, I made sure that the header value matches the key from the en.json file. For example, in en.json, we have "clientName", and in column.tsx, the header should be set to "clientName".
2. In the datatable, it’s simple. I use useTranslations() to get the translations and then use it in the table header. Here’s the code for that:

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( t(header.column.columnDef.header), // Use t here header.getContext() )} ))} ))} I hope this helps. It’s a simple solution

[fitimbytyqi]

While this approach is really smart, you'll loose the typescript suggestion ability when typing the message.

Also this won't work when you make the header a function that returns jsx (needed when adding sorting ability or anything else).

[sidimed-bahan]

Thanks for the feedback! I understand that my solution loses TypeScript suggestions when typing the message.
As for the second point, you're right that it wouldn't work if the header needs to return JSX (for sorting or other features). In my case, I don't need that functionality right now, so this approach works for me.
Have you found a better solution ?

[fitimbytyqi]

I have 2 solutions that should work, first one is mentioned above from me

The second approach would be to utilise the meta attribute from tanstack/table.

Inside useReactTable, you pass the t function in meta attribute:

meta: {t}

in the cell from columns.tsx you can access t by using row.meta.t if I remember correctly the obj of meta.

The latter seems more stable but not sure performance wise.

[just-abdou]

I am currently working on option 1. I tried option 2 but couldn't find the row.meta.

Also, is there a way to translate some of the fields in the table rows, such as statuses?
Thanks.

[fitimbytyqi]

@just-abdou You find the meta at table.options.meta