I18n locale change doesn't change column headerName

On selecting different locale via I18n provider, everything translates instantly except column all of headerNames on open list.tsx, those translate only on page refresh.
3 Replies
kapa.ai
kapa.ai4mo ago
Hi @beg1c. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you are using the useTranslate hook from Refine to translate your column headers. This hook should automatically re-render your component when the locale changes. Here is an example of how you might use it in your List component:
import { useTranslate, useMany } from "@refinedev/core";
import { List, useTable, TextField, EditButton, ShowButton } from "@refinedev/antd";
import { Table, Space } from "antd";

export const PostList: React.FC = () => {
const translate = useTranslate();
const { tableProps } = useTable<IPost>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column
dataIndex="title"
title={translate("posts.fields.title")}
/>
<Table.Column
dataIndex={["category", "id"]}
title={translate("posts.fields.category")}
/>
<Table.Column<IPost>
title={translate("table.actions")}
dataIndex="actions"
key="actions"
/>
</Table>
</List>
);
};
import { useTranslate, useMany } from "@refinedev/core";
import { List, useTable, TextField, EditButton, ShowButton } from "@refinedev/antd";
import { Table, Space } from "antd";

export const PostList: React.FC = () => {
const translate = useTranslate();
const { tableProps } = useTable<IPost>();

return (
<List>
<Table {...tableProps} rowKey="id">
<Table.Column dataIndex="id" title="ID" />
<Table.Column
dataIndex="title"
title={translate("posts.fields.title")}
/>
<Table.Column
dataIndex={["category", "id"]}
title={translate("posts.fields.category")}
/>
<Table.Column<IPost>
title={translate("table.actions")}
dataIndex="actions"
key="actions"
/>
</Table>
</List>
);
};
(Source: Refine Documentation (https://refine.dev/docs/guides-concepts/i18n#changing-the-locale)) If your column headers are not updating when the locale changes, it might be because your List component is not re-rendering. Make sure that your List component is a child of your Refine component, and that you are passing your i18nProvider to the Refine component:
import { Refine, Resource } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { useTranslation } from "react-i18next";
import { Header } from "components";

const App: React.FC = () => {
const { t, i18n } = useTranslation();
const i18nProvider = {
translate: (key: string, options?: any) => t(key, options),
changeLocale: (lang: string) => i18n.changeLanguage(lang),
getLocale: () => i18n.language,
};

return (
<Refine
i18nProvider={i18nProvider}
>
<ThemedLayoutV2
header={<Header />}
>
<PostList />
</ThemedLayoutV2>
</Refine>
);
};
import { Refine, Resource } from "@refinedev/core";
import { ThemedLayoutV2 } from "@refinedev/antd";
import { useTranslation } from "react-i18next";
import { Header } from "components";

const App: React.FC = () => {
const { t, i18n } = useTranslation();
const i18nProvider = {
translate: (key: string, options?: any) => t(key, options),
changeLocale: (lang: string) => i18n.changeLanguage(lang),
getLocale: () => i18n.language,
};

return (
<Refine
i18nProvider={i18nProvider}
>
<ThemedLayoutV2
header={<Header />}
>
<PostList />
</ThemedLayoutV2>
</Refine>
);
};
(Source: Refine Documentation (https://refine.dev/docs/guides-concepts/i18n#changing-the-locale)) If you are still having issues, it might be helpful to check the Refine Documentation (https://refine.dev/docs) or the Refine Blog (https://refine.dev/blog) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold
stormy-gold4mo ago
Hello @Slemming, can you provide reproducible example for us to debug, please?