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]

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

[issam-seghir]

@fitimbytyqi option two really smart idea , i use it and its work perfectly
example :

brands-table.tsx

export function BrandsTable({ columns, data }: DataTableProps) {
    const t = useTranslations();
   ...
    const table = useReactTable({
        data,
        meta: { t },
        columns,
        state: {
            sorting,
            columnVisibility,
            rowSelection,
            columnFilters,
        },
        enableRowSelection: true,
        ...
    });
....

brands-columns.tsx

 {
        accessorKey: "username",
        header:  ({ column ,table}) => {
            return (
                <DataTableColumnHeader
                    column={column}
                    title={table.options.meta.t(
                        "BrandsPage.Table.Columns.username",
                    )}
                />
            );
        },
        cell: ({ row }) => (
            <LongText className="max-w-36">{row.getValue("username")}</LongText>
        ),
        meta: {
            className: cn(
                "drop-shadow-[0_1px_2px_rgb(0_0_0_/_0.1)] dark:drop-shadow-[0_1px_2px_rgb(255_255_255_/_0.1)] lg:drop-shadow-none ",
                "transition-colors duration-200 group-hover/row:bg-muted group-data-[state=selected]/row:bg-muted",
                "sticky start-6 z-[3] md:table-cell",
            ),
        },
        enableHiding: false,
    },

en.json

 "BrandsPage": {
        "title": "Brands",
        "ActionButton": "Add Brand",
        "Table": {
            "Columns": {
                "username": "Username",
                "name": "Name",
                "email": "Email",
                "status": "Status",
                "role": "Role",
            }
        }
    },

[fitimbytyqi]

@issam-seghir looks great! just not sure performance wise

[Re9iNee]

in case someone needed help for type safety

// tanstack-table.d.ts
import type { Dictionary } from "@/types/global.type";
import type { RowData } from "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface TableMeta<TData extends RowData> {
    t: Dictionary;
  }
}