CODEWITHSUNDEEP
reactjsdatatabletranslate
Ruben Martins
Ruben Martins

Reputation: 181

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

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,
};

enter image description here

I want to translate "unsort, sort by Desc, Filter, Hide..." to english

Upvotes: 3

Views: 12992

Answers (4)

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6895

You can localize any text label on DataGrid by passing a localeText object prop to the DataGrid like this:

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 stackblitz for a live working example of this usage.

Upvotes: 9

Ondra
Ondra

Reputation: 1081

For our TypeScript installation with MUI Data Grid version == 5.17.9, little bit diffent path to locale text was needed.

import { DataGrid, ptBR } from '@mui/x-data-grid'


<DataGrid
  localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
/>

You can check state of traslations here: https://mui.com/x/react-data-grid/localization/#supported-locales

Upvotes: 6

Nilo River
Nilo River

Reputation: 11

The localeText that worked for me is this path:

localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}

@mui/x-data-grid": "5.2.0

Upvotes: 1

Al2x
Al2x

Reputation: 1039

Just to help someone if needed. (changing the dataGrid footer as well)

In my .jsx I added :

import { DataGrid, **ptBR** } from "@mui/x-data-grid";
<DataGrid localeText={ptBR.props.MuiDataGrid.localeText}

the result is :

enter image description here

supported locales at : https://material-ui.netlify.app/zh/components/data-grid/localization/

Upvotes: 0

Related Questions