search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.7k stars 931 forks source link

How to expand only some rows on the basis of some condition, hide/remove expandable icon of some rows #1446

Open 007AMAN007 opened 4 years ago

007AMAN007 commented 4 years ago

I am using "expandableRows". I want to expand some rows on the basis of some condition. I can achieve this with the help of "isRowExpandable". But it is not helping me to hide/remove expandable icon. I want to hide/remove expandable icon of some rows.

007AMAN007 commented 4 years ago

Hi @patorjk .

See this example https://codesandbox.io/s/dreamy-meadow-oghwd

I want to hide "Expandable icon" if there is no "inner row". Like row with name "John Walshs". Is single row. No row inside it. So I want to hide "Expandable icon" of it.

Also one more issue here, if am hiding column of table from "view columns" feature, I want to hide column of "inner row" as well. Can we do this?

patorjk commented 4 years ago

Added a fix for this in version 3.4.0. You can now override the ExpandButton component. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js#L119

007AMAN007 commented 4 years ago

Thanks @patorjk

Thanks for providing solution quickly. It's working fine. Thanks

Mr777Nick commented 4 years ago

Added a fix for this in version 3.4.0. You can now override the ExpandButton component. Example: https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js#L119

Hi, thanks for this! So I've tried this solution, but there's something that I can't do with it.

Here's the problem, I need to hide the expand button on specific condition, I need to see if the value on a column is null, for example, then hide the expand button if it is. As of now, I'm unable to do that because the props to override the ExpandButton doesn't have the value for the column I'm refering to. There are only isHeaderCell, expandedRows, expandableRowsHeader, areAllRowsExpanded, onExpand inside the props.

I can just use the index to set isRowExpandable as false, but then the index is messed up if I filter or sort the table by clicking the table header. Another way that I can think is if I pass the rowData to isRowExpandable, but I can't seem to pass rowData, I can only pass dataIndex and expandedRows.

Do you know a workaround for this? Thank you!

ReangeloJ commented 3 years ago

I have the same issue. I had a function which returns the indexes based on some condition, of my original data-source for which I would like the rows to be expandable. However when I filter, it changes the table internal data-source not my original data-source so the index references are wrong. Is there a way to pass the tablerowData to the isRowExpandable method?

kpalumbohp commented 1 year ago

I know this is a couple of years old but I am also having this issue where I'm trying to hide the dropdown based on the rowData but there is no way to access the rowData when using the solution above. Is there a workaround for this?

ReangeloJ commented 1 year ago

I know this is a couple of years old but I am also having this issue where I'm trying to hide the dropdown based on the rowData but there is no way to access the rowData when using the solution above. Is there a workaround for this?

I would try using React-Table. It is headless so you can style it however you want.

stone2dbone commented 5 months ago

It's been 7 months since this question was last asked: Has a solution been developed where one can use a value from rowData to remove the expandable icon/disable expandable rows?