Download doesnt work when having a column with buttons

[Dimitrisgks]

It says that array is out of stack

[gabrielliwerant]

Hello @Dimitrisgks. I don't see this issue on my end, so I'll need more information in order to reproduce it. A minimal codesandbox example that demonstrates the breakage would be best.

[Dimitrisgks]

Hello @Dimitrisgks. I don't see this issue on my end, so I'll need more information in order to reproduce it. A minimal codesandbox example that demonstrates the breakage would be best. There you go

const fetchConfig = {
method: "GET",
headers: {
Authorization: "Bearer " + jwtToken,
Accept: "application/json",
"Content-Type": "application/json"
}
};

fetch("/api/issues", fetchConfig)
  .then(response => response.json())
  .then(responseData => {
    this.setState({
      issues: responseData
    });
  })
  .catch(err => console.error(err));

}

delete = (issueId) => { const deleteConfig = { method: "DELETE", headers: { Accept: "/" } }; fetch("/api/issues/" + issueId, deleteConfig) .then(function(response) { if(response.ok) { alert(issueId + " : deleted successfully "); } }) .then(function() { window.location.reload(); }); }

render() { const columns = [ "issue", "title", "assignor", "assignee", "status", "category", "Actions" ];

const data = [];

const options = {
  filterType: "dropdown",
  responsive: "scroll"
};

 this.state.issues.map((issue, index) => {
  let type;

  if (issue.type_ === 0) {
    type = "Error";
  } else if (issue.type_ === 1) {
    type = "Improvement";
  } else if (issue.type_ === 2) {
    type = "Other";
  }

  data.push([
    issue.project.name,
    issue.title,
    issue.assignor.username,
    issue.assignee.username,
    issue.status.description,
    type,
    <div  >
      <Button onClick={() => this.delete(issue.issueID)} variant="contained" color="secondary">
        delete
      </Button>
      -
      <Button variant="contained" color="primary">
        edit
      </Button>
    </div>
  ]);
});

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

[Dimitrisgks]

react-dom.development.js:476 Uncaught RangeError: Maximum call stack size exceeded at initCloneArray (index.js:1308) at baseClone (index.js:893) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at cloneMap (index.js:1093) at initCloneByTag (index.js:1372) at baseClone (index.js:921) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at cloneMap (index.js:1093) at initCloneByTag (index.js:1372) at baseClone (index.js:921) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at cloneMap (index.js:1093) at initCloneByTag (index.js:1372) at baseClone (index.js:921) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) at index.js:946 at arrayEach (index.js:130) at baseClone (index.js:939) rethrowCaughtError @ react-dom.development.js:476 runEventsInBatch @ react-dom.development.js:748 runExtractedPluginEventsInBatch @ react-dom.development.js:881 handleTopLevel @ react-dom.development.js:5832 batchedEventUpdates$1 @ react-dom.development.js:24387 batchedEventUpdates @ react-dom.development.js:1414 dispatchEventForPluginEventSystem @ react-dom.development.js:5928 attemptToDispatchEvent @ react-dom.development.js:6045 dispatchEvent @ react-dom.development.js:5948 unstable_runWithPriority @ scheduler.development.js:704 runWithPriority$2 @ react-dom.development.js:12232 discreteUpdates$1 @ react-dom.development.js:24404 discreteUpdates @ react-dom.development.js:1439 dispatchDiscreteEvent @ react-dom.development.js:5915 here is the error

[gabrielliwerant]

I'm unable to test your example as I won't be able to hit your API. The error you are receiving does not look like it's an issue with this library, but with how you are using React and setting state. Not too sure what's going on, but I would do my mapping differently, as map returns the new array. So you are meant to use the return value of the map function as the new value. You can look up how to use this function in various places. Try logging out the output of your data variable to inspect if it has the right values, but I suspect that your code doesn't get to that point, which would mean there's a problem with how you are populating it.

Additionally, you are trying to set a component with interpolation into an array, which isn't how this library expects to receive components in the table. Have a look at the custom-action-columns example for a way to do this using customBodyRender.

[allencazar]

I am having the same issue when a custom component is set to a column. Even when I set the column options/download to false const columns = [ "Name", "Date", { name: "Actions", label: "Actions", options: { filter: false, sort: false, download: false, searchable: false, } } ];

<MUIDataTable title={""} data={fooData.map((val) => { return [val.Name, val.CreatedDate, <ActionWrapper id={fooId} />]; })} columns={columns} options={options} />

Fix: Use customBodyRender in column options example here: https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js

[Ambarishpk]

I am having the same issue when one of my columns data contained HTML elements like below mentioned.

columns = ['column-1',....,'column-N'];

data = [ 'data1',...., <button>Click Me</button>];

<MUIDataTable title={""} data={data} columns={columns} options={options} />

Fix: I found it's a version issue of mui-datatables. try to use ^3.4.1 or latest one.