[英]React - How to change the language of DataTable component properties of material ui?
I'm using a Material ui component called DataTable, the problem is that filter fields are in English and I was wondering if there is any way to change their language to Portuguese我正在使用一个名为 DataTable 的 Material ui 组件,问题是过滤器字段是英文的,我想知道是否有任何方法可以将它们的语言更改为葡萄牙语
below my component code:在我的组件代码下方:
import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { PropTypes } from 'prop-types';
export default function DataTable({ rows, columns }) {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
/>
</div>
);
}
DataTable.propTypes = {
rows: PropTypes.arrayOf(
PropTypes.shape({
conteudo: PropTypes.string,
disciplina: PropTypes.string,
curso: PropTypes.string,
data: PropTypes.string,
})
).isRequired,
// eslint-disable-next-line react/forbid-prop-types
columns: PropTypes.array.isRequired,
};
I want to translate "unsort, sort by Desc, Filter, Hide..." to english我想将“unsort, sort by Desc, Filter, Hide...”翻译成英文
You can localize any text label on DataGrid
by passing a localeText
object prop to the DataGrid
like this:您可以本地化的任何文本标签DataGrid
通过传递localeText
对象道具的DataGrid
是这样的:
import { useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
const localizedTextsMap = {
columnMenuUnsort: "não classificado",
columnMenuSortAsc: "Classificar por ordem crescente",
columnMenuSortDesc: "Classificar por ordem decrescente",
columnMenuFilter: "Filtro",
columnMenuHideColumn: "Ocultar",
columnMenuShowColumns: "Mostrar colunas"
};
export default function DataTable({ rows, columns }) {
const [finalClickInfo, setFinalClickInfo] = useState(null);
const handleOnCellClick = (params) => {
setFinalClickInfo(params);
};
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
checkboxSelection
onCellClick={handleOnCellClick}
localeText={localizedTextsMap}
/>
{finalClickInfo &&
`Final clicked id = ${finalClickInfo.id},
Final clicked field = ${finalClickInfo.field},
Final clicked value = ${finalClickInfo.value}`}
{!finalClickInfo && `Click on a column`}
</div>
);
}
All the keys that can be localized are listed here . 此处列出了所有可以本地化的键。 You can take a look at this sandbox for a live working example of this usage.您可以查看此沙箱以获取此用法的实时工作示例。
Just to help someone if needed.只是在需要时帮助某人。 (changing the dataGrid footer as well) (也更改 dataGrid 页脚)
In my .jsx I added :在我的 .jsx 中,我添加了:
import { DataGrid, **ptBR** } from "@mui/x-data-grid";
<DataGrid localeText={ptBR.props.MuiDataGrid.localeText}
the result is :结果是:
supported locales at : https://material-ui.netlify.app/zh/components/data-grid/localization/支持的语言环境: https : //material-ui.netlify.app/zh/components/data-grid/localization/
The localeText that worked for me is this path:对我有用的 localeText 是这条路径:
localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
@mui/x-data-grid": "5.2.0 @mui/x-data-grid": "5.2.0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.