Material-UI CSV/PDF Print Export does not work using "@mui/x-data-grid" module

user_7206191 0
Viewed 2806

This could be a silly question but I'm confuse and this doesn't make sense unless I'm missing something. I wanted to print my data as a PDF using the export option since is available for everyone according to the documentation, however I do not get to see the option, I can only see the CSV option ?

enter image description here

while on their example they have access to both CSV and Print MUI - Export

enter image description here

I also checked their code to see if they "added" something extra but is seems to be completely normal, they are even using the normal one and not the pro

enter image description here

And even if if they were using PRO is available for both options pro and free.

enter image description here

Am I missing something, is it no longer available ? This is what I have, I'm not missing anything...

UPDATE I just removed everything I wasn't using and is still not working

import React, {useState} from 'react'
import {DataGrid, GridToolbar} from '@mui/x-data-grid';

function VerPedidos() {

    const data = JSON.parse(window.localStorage.getItem("verpedidos"))

    let librosData = data[0].data
    
    const [pageSize, setPageSize] = useState(10);
    const [selectionModel, setSelectionModel] = useState([]);
    const columns = [
        { field: 'descripcion', headerName: 'Descripción', width: 450 },

        {field: 'tipo', headerName: 'Tipo', width: 150},
      
        {field: 'editorial', headerName: 'Editorial', width: 100},
      
        {field: 'precio', headerName: 'Precio', width: 100, align: 'right', sortable: false,
        valueFormatter: (params) => {
        return `$${params.value}`;
      }}
      ]

    return (
        <DataGrid 
        rows={librosData}
        columns={columns}
        autoHeight 

        pageSize={pageSize}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        rowsPerPageOptions={[5, 10, 20]}

        components={{
          Toolbar: GridToolbar,
        }}
      />
    )
}

export default VerPedidos

enter image description here

package.json

 "name": "venta_de_libros",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.4",
    "@mui/styled-engine-sc": "^5.0.0",
    "@mui/styles": "^5.0.1",
    "@mui/x-data-grid": "^5.0.0-beta.5",
    "@mui/x-data-grid-generator": "^5.0.0-beta.4",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "devextreme": "21.1.5",
    "devextreme-react": "21.1.5",
    "firebase": "^8.10.0",
    "material-table": "^1.69.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.1",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

enter image description here

material-ui reactjs export
1 Answers

Solution:

You need to update your package.json dependencies. You need to have this dependencies in your package

{

  // Other package.json code ...

  "dependencies": {
    "@emotion/react": "11.5.0",
    "@emotion/styled": "11.3.0",
    "@mui/icons-material": "5.0.4",
    "@mui/material": "5.0.4",
    "@mui/styles": "5.0.1",
    "@mui/x-data-grid": "5.0.0-beta.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0"
  },

  // Other package.json code ...
}

Please pay attention to the version of the dependencies specially the @mui/x-data-grid it should be version "5.0.0-beta.5.

I also recommend to remove this dependencies from your package.json'

"@material-ui/core": "^4.12.3",
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/icons": "^4.11.2",

Your print export should still work even if without that dependencies above. Also I see that you are using `"@mui/material" so I think you would not need those dependencies.

You may also play the demonstration I created in the CodeSandbox the link is here

As of this writing the only working version that I've known about "@mui/x-data-grid" that you can use to implement CSV/Print Export is version "5.0.0-beta.5" and "5.0.0-beta.4".

How to install the right version of "@mui/x-data-grid" that supports CSV/PDF export ?
  yarn add @mui/x-data-grid@5.0.0-beta.5 or npm i @mui/x-data-grid@5.0.0-beta.5
What do I need to do if I have issues after installing those needed dependencies ?
Most package or dependencies related Issues if it's not due to network can be resolve by deleting node_modules folder and lock files (package-lock.json or yarn.lock) and installing all dependencies again by running npm install or yarn

For reference you may also browse this Github Repo

user_128839740
Related