Use renderExpandableRow and onRowClick for expand row will have console warning.

[madebymt]

I have table with expanded row, for my understanding if I click the arrow icon will trigger renderExpandableRow setting, and if I have expandableRowsOnClick: true, then when I click the row not the > icon will trigger onRowClick function (correct me if I'm wrong)
But when I add my custom click action in renderExpandableRow(click the arrow icon), then my row won't be expanded and will have an error message in my console below.
Any way I can trigger extra events for the renderExpandableRow option so I can fetch more data? Because some of my users click the icon instead of the whole row, so I need to fetch more data on both click events.

Here's my codeSandBox

ndex.js:1437 Warning: Cannot update a component (ConnectFunction) while rendering a different component (n). To locate the bad setState() call inside n, follow the stack trace as described in https://fb.me/setstate-in-render in n (created by WithStyles(n)) in WithStyles(n) (created by t) in table (created by ForwardRef(Table)) in ForwardRef(Table) (created by WithStyles(ForwardRef(Table))) in WithStyles(ForwardRef(Table)) (created by t) in Unknown (created by t) in div (created by t) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by t) in t (created by WithStyles(t))
or this error you can see in my codeSandBox

Thank you so much for your help!

Your Environment

Tech	Version
Material-UI	4.11
MUI-datatables	3.1.3
React	16.8
browser	chrome
etc

[patorjk]

I think there's something wrong with your codesandbox, the renderExpandableRow method gets called twice for every expansion, which shouldn't happen. I made a new sandbox which doesn't have this issue:

https://codesandbox.io/s/muidatatables-custom-toolbar-9cdx9?file=/index.js

I believe this may be because you're running in strict mode, though it's really odd. PR #1388 should allow this table to run in strict mode without warnings, though it's odd that using unsafe_componentWillMount would cause an issue like this. I can't be certain if this is something with unsafe_componentWillMount or something with codesandbox.

Until version 3.2.0 (which will have the refactored out unsafe_componentWillMount), I'd recommend not running in strict mode.

If you do that, you should be able to use renderExpandableRow to fetch your data without issue.

[madebymt]

Thank you so much for your response, by checking your code sandbox, I only see renderExpandableRow no onRowClick, so I only can use one or the other?
And if I uncomment line 85 get more detail(data[rowMeta.dataIndex]) then I will see the console warning again, I need that custom action to fetch more data. If I can't put in the renderExpandedRow, do I have another option?
Thank you.

[patorjk]

onRowClick wont execute when you click the expand arrow, it will also execute when a row collapses. You'd want to use renderExpandableRow.

I've updated my codesandbox, I didn't have getMoreDetail defined, which is why it was throwing an error.

[madebymt]

In the end, i use onRowExpansionChange work for me for click the icon and do API request, but still not able to do onRowClick and this function both together. Hope this help someone else have same issue as me. Thank you.

[kalyan542]

Not able to render additional details when add fetchAPI inside renderExpandableRow function. Please let me know how to add additional details when click on expand

renderExpandableRow: (rowData, rowMeta) => {
    const colSpan = rowData.length + 1;
    this.props.fetchAdditionalJobDetails(rowData[9]).then(handleResponse).then((response) => {
      return <TableRow>
        <TableCell colSpan={colSpan}>Test</TableCell>
      </TableRow>
    }).catch((error) => {
      
    });
}

[patorjk]

The renderExpandableRow method isn't asynchronous, so you can't do it like that.

One idea could be to return a component, and that component would handle making the API call and updating itself. Ex:

renderExpandableRow: (rowData, rowMeta) => {
    return <ExpandableRowEntry rowData={rowData} rowMeta={rowMeta} />
}

[kalyan542]

The renderExpandableRow method isn't asynchronous, so you can't do it like that.

One idea could be to return a component, and that component would handle making the API call and updating itself. Ex:

renderExpandableRow: (rowData, rowMeta) => {
    return <ExpandableRowEntry rowData={rowData} rowMeta={rowMeta} />
}

Thanks for the quick reply. It's working as expected. Thank you