我正在使用名为 DataTable 的 Material ui 组件,问题是过滤器字段是英语,我想知道是否有任何方法可以将其语言更改为葡萄牙语
在我的组件代码下面:
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,
};
我想将“取消排序、按描述排序、过滤、隐藏...”翻译成英语
您可以通过将
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>
);
}
此处列出了所有可以本地化的按键。 您可以查看 this stackblitz 了解此用法的实时工作示例。
localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
@mui/x-data-grid": "5.2.0