Mui-datatables: Download option not working

[vikaskr0697]

[ghost]

I have also same issue.

[gregnb]

Will be doing a release today to resolve this issue. Sorry for the delay

[gregnb]

Published beta-8 should resolve this issue

[richardjzhang]

Just tried updating to beta-8 by running npm install mui-datatables --save but seem to still be running into this issue, am I doing something wrong?

[gregnb]

Visit: https://wy2rl1nyzl.codesandbox.io/
That is running beta-8

I need some more information. Version of Material-ui, React. Browser etc.

[richardjzhang]

Hey there thanks for responding. I'm quite new to all of this so appreciate any help I can get. Here are some of the package versions:
@ material-ui/[email protected]
@ material-ui/[email protected]
[email protected]
[email protected]
[email protected]

I'm also using Chrome as my browser

[gregnb]

@richardjzhang Sure, no problem. Does this fail with any data? Can I see your config provided to mui-datatables?

[richardjzhang]

Seems to fail with all the tables I have - I'll have a go at putting some dummy data in because at the moment the data is a prop

[gregnb]

@richardjzhang If you ran the following config could you tell me if you still have issues?

const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
    ];

    const options = {
      filterType: 'dropdown',
      responsive: 'stacked'
    };

    return (
      <MUIDataTable 
        title={"ACME Employee list"} 
        data={data} 
        columns={columns} 
        options={options} 
      />
    );

[richardjzhang]

@gregnb seem to still be having the same issue, this is what I have

class EnhancedTable extends React.Component {
  // Overides styling for the table. Overriding font size only at this stage
  getMuiTheme = () =>
    // eslint-disable-line
    createMuiTheme({
      overrides: {
        MUIDataTableBodyCell: {
          root: {
            fontSize: '1.5vmin',
            padding: 'auto',
            fontFamily: "'Proxima Nova', Helvetica, Arial, sans-serif",
          },
        },
      },
    });

  render() {
    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    const data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
      ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, "$500,000"],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, "$50,000"],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, "$75,000"],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, "$94,000"],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, "$210,000"],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, "$65,000"],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, "$77,000"],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, "$135,000"],
      ["Harper White", "Attorney", "Pittsburgh", 52, "$420,000"],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, "$150,000"],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, "$170,000"],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, "$90,000"],
      ["Justice Mann", "Business Consultant", "Chicago", 24, "$133,000"],
      ["Addison Navarro", "Business Management Analyst", "New York", 50, "$295,000"],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, "$200,000"],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, "$400,000"],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, "$110,000"],
      ["Danny Leon", "Computer Scientist", "Newark", 60, "$220,000"],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, "$180,000"],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, "$99,000"],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, "$90,000"],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, "$140,000"],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, "$330,000"],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, "$250,000"],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, "$190,000"],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, "$80,000"],
      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, "$45,000"],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, "$142,000"]
    ];

    const options = {
      filterType: 'dropdown',
      responsive: 'stacked'
    };
    return (
      <MuiThemeProvider theme={this.getMuiTheme()}>
        <MUIDataTable
          title={"ACME Employee list"} 
          data={data}
          columns={columns}
          options={options}
        />
      </MuiThemeProvider>
    );
  }
}

export default EnhancedTable;

[gregnb]

What is the issue exactly? Can I see a screenshot?

[richardjzhang]

@gregnb after clicking on the 'Download icon' i receive the following console message:

index.js:1 Uncaught TypeError: t.join is not a function
    at index.js:1
    at Array.reduce (<anonymous>)
    at r.handleCSVDownload (index.js:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)

And the pop up that usually opens for downloading the csv file doesn't happen

[gregnb]

@richardjzhang Can you reply back to me with your package.json as well? Is this inside of create-react-app?

[richardjzhang]

  "version": "1.0.0",
  "scripts": {
    "postinstall": "run-p install:client install:server",
    "install:client": "cd src/client && yarn install",
    "install:server": "cd src/server && yarn install",
    "dev": "run-p dev:*",
    "dev:client": "cd src/client && yarn run dev",
    "dev:server": "cd src/server && yarn run dev",
    "build": "run-p build:*",
    "build:client": "cd src/client && yarn run build"
  },
  "dependencies": {
    "@material-ui/core": "^1.2.0",
    "@material-ui/icons": "^1.0.0",
    "mui-datatables": "^2.0.0-beta-8",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "eslint-config-mathspace": "^0.5.4",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-react": "^7.9.1",
    "npm-run-all": "^4.1.3"
  }

@gregnb We were running it inside of create-react-app but have made some significant changes since then.

[gregnb]

I created a repo with create-react-app you can clone: https://github.com/gregnb/mui-download-bug

and then

npm install
npm run start

let me know if it works because I'm not getting any issues in Chrome testing

[richardjzhang]

@gregnb very weird, so this one works! I'll look into what might be going wrong on my end and will let you know if I manage to resolve it

[gregnb]

@richardjzhang for sure I would love that seems some other people are suffering from this issue but I can't see what it is.

I had one last idea. try rm -rf'ing node_modules and package-lock.json and then npm install

[richardjzhang]

Oh man @gregnb I found what the mistake was...

I have two Package JSON files. One for the backend and front end - the latest version of mui-datatables was in the backend. Moving it to the frontend Package JSON file fixed it

[gregnb]

@richardjzhang oh wow, well I’m glad you found the issue!