Как перевести searchPlaceholder для MaterialTable reactjs, используя FormattedMessage

Question

Я хочу перевести searchPlaceholder из MaterialTable в Reactjs

Я могу перевести все как exportTitle, searchTooltip ..., кроме searchPlaceholder я сделал то же самое, что и другие, но они не работали. это код

const localization = {
    pagination: {
        labelDisplayedRows: '{from}-{to}' + <FormattedMessage id="table.of.label" /> + '{count}'
    },
    toolbar: {
        nRowsSelected: '{0}' + <FormattedMessage id="table.row.label" /> + '(s) selected'
            + <FormattedMessage id="table.selected.label" />,
         searchPlaceholder: <FormattedMessage id="table.search.label" />,
        searchTooltip: <FormattedMessage id="table.search.label" />,
        exportTitle: <FormattedMessage id="table.export.label" />,
    },
    header: {
        actions: <FormattedMessage
            id="table.column.actions"
        />
    },
    body: {
        emptyDataSourceMessage: <FormattedMessage id="table.no_records_to_display.label" />,
        filterRow: {
            filterTooltip: <FormattedMessage id="table.filter.label" />
        },
        addTooltip: <FormattedMessage id="table.add.label" />,
        deleteTooltip: <FormattedMessage id="table.column.actions.delete" />,
        editTooltip: <FormattedMessage id="table.column.actions.edit" />,
    },
    grouping: {
        /* placeholder: <FormattedMessage id="table.drag_headers_here_to_display.label" />, */
    }
};
export default localization;

Answer 1

Возможно, но не через FormattedMessage.

material-table используются @material-ui компоненты, а для поиска они используют TextField. Заполнитель должен быть строкой.

Чтобы решить вашу проблему, вам нужно отформатировать заполнитель, прежде чем передать его в таблицу материалов.

Допустим, у вас IntlProvider сверху вашего дерева и выбранного языкового стандарта.

Все, что вам нужно:

1. добавить пользовательское сообщение в определение вашего сообщения с некоторым идентификатором

2. Оберните компонент, который отображает таблицу материалов, с помощью injectIntl HO C из react-intl.

3. В локализацию таблицы материалов добавьте searchPlaceholder: intl.formatMessage({ id: "my.custom.searchBar" }).

Рабочий код:

import { IntlProvider, injectIntl } from "react-intl";
import MaterialTable from "material-table";

const enMessages = {
  "my.custom.searchBar": "search here"
};
const frMessages = {
  "my.custom.searchBar": "rechercher"
};

function TableComponent({ intl }) {
  return (
    <MaterialTable
      columns={[
        { title: "Adı", field: "name" },
        { title: "Soyadı", field: "surname" },
        { title: "Doğum Yılı", field: "birthYear", type: "numeric" },
        {
          title: "Doğum Yeri",
          field: "birthCity",
          lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
        }
      ]}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 }
      ]}
      title="Demo Title"
      localization={{
        toolbar: {
          searchPlaceholder: intl.formatMessage({ id: "my.custom.searchBar" })
        }
      }}
    />
  );
}

const LocalizedTable = injectIntl(TableComponent);

export default function App() {
  const [locale, setLocale] = React.useState("en");

  const messages = locale === "en" ? enMessages : frMessages;
  return (
    <IntlProvider locale={locale} messages={messages}>
      <select onChange={e => setLocale(e.target.value)} value={locale}>
        <option value="en">en</option>
        <option value="fr">fr</option>
      </select>
      <div style={{ maxWidth: "100%" }}>
        <LocalizedTable />
      </div>
    </IntlProvider>
  );
}

Вот рабочие коды и коробка

Answer 2

На основе документов в таблице материалов: https://material-table.com/# / документы / особенности / локализация

Если вы хотите изменить searchPlaceholder, вам следует использовать следующее:

<MaterialTable
    ...
    localization={{
        ...
        toolbar: {
            searchTooltip: 'This is the placeholder text'
        },
      ...
    }}
/>