0
votes

Changer la langue de pagination de Ant Design Pro Table

J'ai déjà défini la ProTable de ProTable sur en-US. Tout est déjà traduit en anglais mais le pied de page de la pagination est toujours en chinois. Comment puis-je changer la langue de pagination en anglais?

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>
  )
}

ant-design-pro

0 commentaires

3 Réponses :

0
votes

Rencontrant le même problème, je pense que c'est un bug. Vous pouvez le désactiver en définissant showTotal sur false

pagination={{ showTotal: false }}

0 commentaires

1
votes

J'ai compris mais j'ai oublié de mettre à jour la réponse ici. Le composant ProTable a une méthode showTotal sous pagination . Vous pouvez utiliser les variables de total et de range fournies pour modifier le texte de pagination affiché.

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>
  )
}

Se traduira par ceci:

0 commentaires

0
votes

Si vous utilisez Ant Design avec des composants Pro, vous devez utiliser l'internationalisation à partir d'une version non professionnelle de Ant Design.

Enveloppez votre application ou dans ce cas uniquement le composant ProTable avec ConfigProvider comme dans le code ci-dessous et vous obtiendrez une traduction en anglais.

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;

0 commentaires