0

Tengo una tabla en react, y estoy usando material-ui. Obviamente el texto por defecto de los controles de la tabla esta en ingles pero yo quiero tenerlo en español. Sé hacerlo utilizando el prop localText pero quisiera hacerlo importando esEs con makestyles. Pero no logro hacerlo. Dejo el codigo en el que estoy trabajando.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { DataGrid, esES } from '@material-ui/data-grid';

const useStyles = makeStyles((theme) => ({
    esES,
}));

const columns = [
    { field: 'id', headerName: 'ID',},
    { field: 'firstName', headerName: 'First name',},
    { field: 'lastName', headerName: 'Last name',},
    {
        field: 'age',
        headerName: 'Age',
        type: 'number',
    },
    {
        field: 'fullName',
        headerName: 'Full name',
        description: 'This column has a value getter and is not sortable.',
        sortable: false,
    },
];

const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
];

const TablaPrecios = () => {
    const classes = useStyles();

    return (
        <div style={{ height: 400, width: '100%' }}>
            <DataGrid
                className={classes.esEs}
                rows={rows}
                columns={columns}
                pageSize={5}
                checkboxSelection
            />
        </div>
    );
};

export default TablaPrecios;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 respuesta 1

0

como bien comentas, la configuración regional predeterminada de MUI es en inglés.

Aun que puedes configurar el texto local con la prop localText de la siguiente manera:

<DataGrid
  {...data}
  localeText={{
      noRowsLabel: "No se ha encontrado datos.",
      noResultsOverlayLabel: "No se ha encontrado ningún resultado",
      toolbarColumns: "Columnas",
      toolbarColumnsLabel: "Seleccionar columnas",
      toolbarFilters: "Filtros",
      toolbarFiltersLabel: "Ver filtros",
      toolbarFiltersTooltipHide: "Quitar filtros",
      toolbarFiltersTooltipShow: "Ver filtros",
  }}
  components={{
    Toolbar: GridToolbar,
  }}
/>

Te dejo la documentación oficial de MUI: https://mui.com/components/data-grid/localization/#locale-text

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.