Change Ant Design Pro Table pagination language - ant-design-pro

Question

I have already set the ProTable's language to en-US. Everything is translated to English already but the pagination footer still is in Chinese. How can I change the pagination language to English?
import ProTable, { ProColumns, IntlProvider, enUSIntl } from '#ant-design/pro-table';
const ProTableList: React.FC<{}> = () => {
return (
<IntlProvider value={enUSIntl}>
<ProTable<TableListItem>
headerTitle="Example List"
actionRef={actionRef}
rowKey="key"
...
/>
...
</IntlProvider>
)
}

Answer 1

If you use Ant Design with Pro Components than you need to use Internationalization from non pro version of Ant Design.
Wrap your App or in this case only ProTable component with ConfigProvider like in code below and you will get english translate.
import React from 'react';
import { ConfigProvider } from 'antd';
import enUS from 'antd/lib/locale/en_US';
import ProTable from '#ant-design/pro-table'
const YourComponent = () => {
return (
<ConfigProvider locale={enUS}>
<ProTable />
</ConfigProvider>
);
}
export default YourComponent;

Answer 2

I figured it out but forgot to update the answer here. The ProTable component has a showTotal method under pagination. You can use the provided total and range variables to modify the displayed pagination text.
import ProTable, { ProColumns, IntlProvider, enUSIntl } from '#ant-design/pro-table';
const ProTableList: React.FC<{}> = () => {
return (
<IntlProvider value={enUSIntl}>
<ProTable<TableListItem>
headerTitle="Example List"
actionRef={actionRef}
rowKey="key"
...
pagination={{
showTotal: (total, range) => (
<div>{`showing ${range[0]}-${range[1]} of ${total} total items`}</div>
),
}}
/>
...
</IntlProvider>
)
}
Will result in this:

Answer 3

Encountering the same issue, I think it's a bug. You can disable it by setting
showTotal to false
pagination={{ showTotal: false }}