optimistic-gold•6mo ago

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•6mo 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•6mo ago

<@537772056847187988> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•6mo ago

Hello @Slemming, can you provide reproducible example for us to debug, please?